原生微信小程序，多音频播放实现进度条功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了原生微信小程序，多音频播放实现进度条功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

小程序的音频组件没有进度条的功能，业务需要，只好烧脑自己实现。

逻辑思路：

1.所有音频播放、停止按钮使用状态切换控制
2.当点击某个音频播放时，首先将所有音频的状态置为停止状态，然后将当前音频置为播放状态
3.滚动条插件配合音频控件一起使用
4.播放状态时滚动条的长度随音频进度变化而变化，时间只需要显示总时长
5.拖动滚动条时，音频的播放当前位置的声音

UI设计效果：

原生微信小程序，多音频播放实现进度条功能

代码如下：

<view wx:if="{{currentIndex == index}}" class="sliderBox">
      <slider class="slider_middle" catchchange="changeSlide" bindtouchstart="start"             bindtouchend="end" max="{{item.duration}}" min="0" value="{{item.currentProcessNum}}" block-size="12" data-index="{{index}}" activeColor="#F19831" block-color="#F19831"></slider>
       <text class="right_text">{{item.showTotalTime}}</text>
</view>


<image src="../../images/img/{{item.showAudio ? 'suspend_cheng' : 'play_cheng'}}.png" mode="widthFix" class="play_cheng" style="margin-top: {{currentIndex == index ? 54 : 34}}rpx;" bindtap="playAudio" data-index="{{index}}" data-src="{{serverAddress}}{{item.address}}" data-name="{{item.courseName}}"/>

.sliderBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20rpx 0 0 0;
}
.slider_middle {
  width: calc(100% - 80rpx);
  margin: 0;
}
.right_text {
  color: #F19831;
  font-size: 24rpx;
}

 data: {
    meditationCourse: null,   //数据
    currentIndex: null,   //要展示的音频进度条的下标
    audio: null,   //音频
  },

//获取到数据，处理后 赋值
getData(){
     res.data.data.hcCourseResultList.forEach(item => {
         item.isMove = false   //是否触发滚动条的移动
         item.showAudio = false   //是否播放
         item.currentProcessNum = 0   //当前播放的进程
         item.showTotalTime = this._getMinuteBySecond(item.duration)   //显示的总时长
    })
       
    this.setData({
         meditationCourse: res.data.data
    })
},
 // 秒转分
  _getMinuteBySecond(seconds) {
    let minute = Math.floor(seconds / 60);
    let second = seconds % 60
    minute < 10 ? minute = '0' + minute : '';
    second < 10 ? second = '0' + second : '';
    return minute + ":" + second
  },


// 点击播放和暂停音频
  playAudio(e) {
    let that = this;
    let index = e.currentTarget.dataset.index
    let arr = that.data.meditationCourse.hcCourseResultList
    let srcAddress = e.currentTarget.dataset.src
    // 暂停当前音频
    if(arr[index].showAudio) {
      that._setAudioType(index, false)
      that.data.audio.pause()
      return
    }
    if(that.data.currentIndex == index && !arr[index].showAudio) {
      that._setAudioType(index, true)
      that.data.audio.play()
      return
    }

    if (that.data.audio) {   //将播放的音频停止
      that.data.audio.pause()
    }
    arr.forEach((item, index) => {   //将所有的音频置为停止状态
      that._setAudioType(index, false)
    })
    that._setAudioType(index,true)   //将当前音频置为播放状态
    that.setData({
      currentIndex: index   //设置当前要展示的音频进度条
    })
    
    that.data.audio = wx.getBackgroundAudioManager();//初始化音频并播放
    that.data.audio.src = srcAddress
    that.data.audio.title = e.currentTarget.dataset.name   //音频标题  必填
    that.data.audio.autoplay = true
    that.data.audio.play();

    //音频开始播放的时间 和 进度条的当前值为0 
    that.data.audio.startTime = 0
    let currentProcessNum = `meditationCourse.hcCourseResultList[${index}].currentProcessNum`
    that.setData({
      [currentProcessNum]: 0
    })
  
    //音频自然播放结束
    that.data.audio.onEnded(function name(params) {
      console.log('音频自然播放结束')
    })

    //音频进度播放更新
    that.data.audio.onTimeUpdate(function () {
      //没有触动滑动事件 更新进度
      if(!arr[index].isMove){
        that._setCurrent(index)
      }
   })
  },
  //开始滑动触发
  start : function (e) {
    let index = e.currentTarget.dataset.index
    this.move(index,true)
    this.data.audio.pause()
  },
  //触发滑动条
  changeSlide : function (e) {
    let that = this
    let index = e.currentTarget.dataset.index
    const position = e.detail.value
    
    let currentProcessNum = `meditationCourse.hcCourseResultList[${index}].currentProcessNum`
    that.setData({
     [currentProcessNum]: position
    })

    that.data.audio.seek = position
    wx.seekBackgroundAudio({
      position: Math.floor(position),
    })
  },

  //结束滑动触发
  end : function (e) {
    let index = e.currentTarget.dataset.index
    this.move(index, false)
    this.data.audio.play()
    if(!this.data.meditationCourse.hcCourseResultList[index].showAudio) {
      this._setAudioType(index, true)
    }
  },
  //设置音频图片状态以及滚动条可播放状态函数
  _setAudioType: function (index, tag) {
      let that = this
      let showAudio = `meditationCourse.hcCourseResultList[${index}].showAudio`
      that.setData({
        [showAudio]: tag
      })
  },
  //设置 滚动条当前位置函数
 _setCurrent: function (index) {
   let currentProcessNum = `meditationCourse.hcCourseResultList[${index}].currentProcessNum`
   this.setData({
     [currentProcessNum]: this.data.audio.currentTime
   })
 },
 //设置滚动条是否滚动状态函数
 move:function (index,isMove) {
   let isMoveValue = `meditationCourse.hcCourseResultList[${index}].isMove`
    this.setData({
      [isMoveValue]: isMove
    })
 },