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

真的脑子疼，小程序的音频组件居然没有进度控制的功能，网上的方法又很少，逻辑通了就好写了。

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

1.wxml

{{item.currentProcess}}
 
 {{item.totalProcess}}
 
 

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{
   })
   that.data.innerAudioContext2.onStop(() => {
   })
   that.setData({//记录当前点击项和上次点击项
    newid2: e.currentTarget.dataset.index,
    oldid2: that.data.newid2 ? that.data.newid2 : index
   })  
  } else {//非第一次点击
   let old = that.data.newid2
   that.setData({
    newid2: index,
    oldid2: old
   })
   if (that.data.oldid2 != index ) {
    that.data.innerAudioContext2.stop()
    that.data.innerAudioContext2.src = e.currentTarget.dataset.srcs
    that.data.innerAudioContext2.play()
   }else{
    if (that.data.innerAudioContext2.paused){
     that.data.innerAudioContext2.stop()
     that.data.innerAudioContext2.src = e.currentTarget.dataset.srcs
     that.data.innerAudioContext2.play()
    }else{
     that.data.innerAudioContext2.stop() 
     for (var i = 0; i < data.length; i++) {
      data[i].play = true
     }
    }
   }
  }
  this.setData({
   cc: data
  })
 },
 playAudio(e){//带滚动条多个音频处理问题
  let that = this
  let arr = that.data.cc
  let index = e.currentTarget.dataset.index
  if (that.data.audio) {//将所有的音频停止
   that.data.audio.pause()
  }
  for(let i=0;i

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