小程序模拟音乐播放器

最新推荐文章于 2026-06-20 08:05:52 发布

原创最新推荐文章于 2026-06-20 08:05:52 发布 · 201 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #微信小程序 #音频

此博客围绕前端领域的微信小程序音频展开，虽未给出具体内容，但可知聚焦于微信小程序中音频方面的信息技术相关内容。


const innerAudioContext = wx.createInnerAudioContext();
// innerAudioContext.autoplay = true;
let play_number = 0;
let music_src = '';
Page({
  data: {
    music_list: [],
    play: true,
    play_min: 0,  // 最小限制 
    play_max: 100,   // 最大限制
    play_cur: 0, // 当前value
    diM: '00',
    diS: '00',
    timer_music:'',
    total_time:'00:00'
  },
  onLoad: function (e) {
    var that = this;
    innerAudioContext.src = 'http://m10.music.126.net/20231026140725/55119d8ed81f3952d885353470808a8d/ymusic/ad38/1c0c/345d/b551d3ed299a96acf71a6dddd49f8609.mp3';
  },
  click_play(){
    console.log("播放");
    let that = this;
    innerAudioContext.play()
    that.setData({ play: false });
    that.setData({
      timer_music: setTimeout(() => {
        innerAudioContext.currentTime  // 可刷新 监听计时
        innerAudioContext.onTimeUpdate(() => {
          // console.log(innerAudioContext.duration)  // 总时长
          // console.log(innerAudioContext.currentTime)  // 当前播放进度
          var minite = Math.floor((innerAudioContext.currentTime / 60) % 60);
          var second = Math.floor(innerAudioContext.currentTime % 60);
          const minitec = minite.toString().length === 1 ? `0${minite}` : minite.toString();
          const secondc = second.toString().length === 1 ? `0${second}` : second.toString();

          var t_minite = Math.floor((innerAudioContext.duration / 60) % 60);
          var t_second = Math.floor(innerAudioContext.duration % 60);
          const t_minitec = t_minite.toString().length === 1 ? `0${t_minite}` : t_minite.toString();
          const t_secondc = t_second.toString().length === 1 ? `0${t_second}` : t_second.toString();
          that.setData({
            diM: minitec,
            diS: secondc,
            total_time: t_minitec+':'+t_secondc,
            play_max: parseInt(innerAudioContext.duration),
            play_cur: parseInt(innerAudioContext.currentTime),
          })
        })
      }, 1000)
    });
  },

  click_pause(){
    let that = this;
    clearTimeout(that.data.timer_music);
    console.log("暂停");
    innerAudioContext.pause();
    that.setData({ play: true });
    console.log(innerAudioContext.duration);
  },
  click_lastSong(){
    let that = this;
    clearTimeout(that.data.timer_music);
    play_number--;
    that.setData({ play: false });
    console.log(play_number,"上一曲");
    innerAudioContext.src = "http://m10.music.126.net/20231026142307/749ed03988829c5fef4f2d7c8c7e99ca/ymusic/4ddb/8caf/45f7/fc8c7db54beb7d4bfb026b1558fb7b05.mp3";
    that.click_play();
  },
  click_underSong(){
    let that = this;
    clearTimeout(that.data.timer_music);
    play_number++;
    that.setData({ play: false });
    console.log(play_number,"下一曲");
    // that.setData({
    //   music_src: that.data.music_list[play_number].src,
    // })
    innerAudioContext.src = "http://m701.music.126.net/20231026161340/3f73ea51693e8c46c96183aee2ce5839/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/28481716365/e62b/b339/991f/c39f4e87d52f6b48a5837f60d84f2a38.mp3";
    that.click_play();
  },
})

<view class="bsb pw100 bw border-r1 p24 mt20">
      <view class="colc1 mb20">● 播放音乐</view>
      <view class="flex_a plr20">
        <image src="/img/85.png" mode="widthFix" style="width: 30rpx;"></image>
        <text class="pl10">当前播放：{{val}}gala</text>
      </view>
      
      <view class="plr20">
        <view class="component-slider h30 lh30">
          <view class="slider-box">
            <view class="slider-btn" style="margin-left: {{ (play_cur-play_min)*(100/(play_max-play_min)) }}%;" ></view>
            <view class="slider-line"></view>
            <view class="slider-line-active" style="width: {{ (play_cur-play_min)*(100/(play_max-play_min)) }}%;"></view>
          </view>
          <slider block-size="12" min="{{play_min}}" max="{{play_max}}" value="{{play_cur}}" class="h30 lh30" />
        </view>

        <view class="flex_sb col6 font13">
          <view class="">{{diM}}:{{diS}}</view>
          <view class="">{{total_time}}</view>
        </view>
      </view>

      <view class="flex_aj">
        <view class="plr20 flex_aj" bind:tap="click_lastSong">
          <image src="/img/86.png" mode="widthFix" style="width: 30rpx;"></image>
        </view>
        <view class="plr10 mlr20 h70 lh70">
          <image src="/img/221.png" mode="widthFix" style="width: 60rpx;" bind:tap="click_play" wx:if="{{play}}"></image>
          <image src="/img/88.png" mode="widthFix" style="width: 60rpx;" bind:tap="click_pause" wx:if="{{!play}}"></image>
        </view>
        <view class="plr20 flex_aj" bind:tap="click_underSong">
          <image src="/img/87.png" mode="widthFix" style="width: 30rpx;"></image>
        </view>
      </view>
    </view>

.component-slider {
  width: 100%;
  position: relative;
}
/* 盒子 */
.slider-box {
  width: 100%;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 未选中区线 */
.slider-line {
  width: 100%;
  height: 10rpx;
  background: rgba(49, 153, 228, 0.1);
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 选中区线 */
.slider-line-active {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  height: 10rpx;
  background: #5B96F6;
}

/* slider按钮 */
.slider-btn {
  height: 0rpx;
  width: 0rpx;
  /* border: 1px solid #ff0000; */
}
/* 显示的数字 */
.slider-number {
  width: 100%;
  position: absolute;
  bottom: -10rpx;
}
.slider-number text {
  position: absolute;
  top: 0;
  font-size: 24rpx;
  color: #999999;
  transition: all 0.3s;
}
/* 当前选中的数字 */
.slider-number text.active {
  font-size: 32rpx;
  color: #5B96F6;
  transition: all 0.3s;
}
/* slider组件设置透明 */
slider {
  opacity: 0;
}