微信小程序多音频播放进度条问题

<text class="left_text">{{item.currentProcess}}</text>
        <slider class="slider_middle" bindchange="changeSlide" bindtouchstart="start" bindtouchend="end" max="{{item.totalProcessNum}}" min="0" value="{{item.currentProcessNum}}" disabled="{{item.canSlider}}" block-size  ="18" data-index="{{index}}"></slider>
        <text class="right_text">{{item.totalProcess}}</text>
        <image class="audio_btn" wx:if="{{!item.showAudio}}" src="/UploadFiles/2021-04-02/play.png">

2.js


 videoControl(e) {//控制视频播放，需求更改后暂时无用
  let src = e.currentTarget.dataset.src
  let img = e.currentTarget.dataset.post
  let data = this.data.cc
  let that = this
  if (this.data.innerAudioContext2){
   that.data.innerAudioContext2.stop()
  }
  if (this.data.innerAudioContext) {
   that.data.innerAudioContext.stop()
   that.setUser(that.data.oldid, false)
  }
  for(var i = 0;i<data.length;i++){
   if (data[i].type == '2'){
    data[i].play = true
   }
  }
  this.setData({
   cc:data
  })
  if(this.data.type){
   wx.navigateTo({
    url: '/pages/record/record"share"'
   })
  }else{
   wx.navigateTo({
    url: '/pages/record/record"00:00", 0)
   that.setAudioType(index,false,false)
  })
  //音频进度播放更新
  that.data.audio.onTimeUpdate(function () {
   //设置总时长
   if(arr[index].totalProcess == '00:00' || arr[index].totalProcessNum == '00:00'){
    that.setTotal(index,that.time_to_sec(that.data.audio.duration), that.data.audio.duration)
   }
   //没有触动滑动事件更新进度
   if(!arr[index].isMove){
    that.setCurrent(index,that.time_to_sec(that.data.audio.currentTime), that.data.audio.currentTime)
   }
  })
 },
 //开始滑动触发
 start : function (e) {
  let arr = this.data.cc
  let index = e.currentTarget.dataset.index
  this.move(index,true)
 },
 //触发滑动条
 changeSlide : function (e) {
  let that = this
  let arr = that.data.cc
  let index = e.currentTarget.dataset.index
  const position = e.detail.value
  let seek = arr[index].seek
  seek = position
  if (seek != -1) {
   wx.seekBackgroundAudio({
    position: Math.floor(position),
   })
   seek = -1
  }
  that.setCurrent(index,that.time_to_sec(position), position)
  that.seek(index,seek)
 },
 //结束滑动触发
 end : function (e) {
  let arr = this.data.cc
  let index = e.currentTarget.dataset.index
  this.move(index, false)
 },
 //停止播放音频
 pauseAudio:function (e) {
  let that = this
  let index = e.currentTarget.dataset.index
  that.data.audio.pause()
  that.setAudioType(index,false,true)
 },
 //设置音频图片状态以及滚动条可播放状态函数
 setAudioType: function (index, tag, tagSlide, ) {
  let that = this
  let arrs = that.data.cc
  arrs[index].showAudio = tag
  arrs[index].canSlider = tagSlide
  that.setData({
   cc:arrs
  })
 },
 //设置音频当前播放时间以及滚动条当前位置函数
 setCurrent: function (index,currentProcess, currentProcessNum) {
  let that = this
  let arrs = that.data.cc
  arrs[index].currentProcess = currentProcess
  arrs[index].currentProcessNum = currentProcessNum
  that.setData({
   cc: arrs
  })
 },
 //设置音频总播放时间以及滚动条总位置函数
 setTotal: function (index,totalProcess, totalProcessNum) {
  let that = this
  let arrs = that.data.cc
  arrs[index].totalProcess = totalProcess
  arrs[index].totalProcessNum = totalProcessNum
  that.setData({
   cc: arrs
  })
 },
 //设置滚动条是否滚动状态函数
 move:function (index,isMove) {
  let that = this
  let arrs = that.data.cc
  arrs[index].isMove = isMove
  that.setData({
   cc: arrs
  })
 },
 //设置音频时间点函数
 seek: function (index, seek) {
  let that = this
  let arrs = that.data.cc
  arrs[index].seek = seek
  that.setData({
   cc: arrs
  })
 },


总结
以上所述是小编给大家介绍的微信小程序多音频播放进度条问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！