小程序的音頻組件沒有進(jìn)度條的功能，業(yè)務(wù)需要，只好燒腦自己實(shí)現(xiàn)。

邏輯思路：

1.所有音頻播放、停止按鈕使用狀態(tài)切換控制
2.當(dāng)點(diǎn)擊某個(gè)音頻播放時(shí)，首先將所有音頻的狀態(tài)置為停止?fàn)顟B(tài)，然后將當(dāng)前音頻置為播放狀態(tài)
3.滾動(dòng)條插件配合音頻控件一起使用
4.播放狀態(tài)時(shí)滾動(dòng)條的長度隨音頻進(jìn)度變化而變化，時(shí)間只需要顯示總時(shí)長
5.拖動(dòng)滾動(dòng)條時(shí)，音頻的播放當(dāng)前位置的聲音

UI設(shè)計(jì)效果：

?代碼如下：

<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,   //數(shù)據(jù)
    currentIndex: null,   //要展示的音頻進(jìn)度條的下標(biāo)
    audio: null,   //音頻
  },

//獲取到數(shù)據(jù)，處理后 賦值
getData(){
     res.data.data.hcCourseResultList.forEach(item => {
         item.isMove = false   //是否觸發(fā)滾動(dòng)條的移動(dòng)
         item.showAudio = false   //是否播放
         item.currentProcessNum = 0   //當(dāng)前播放的進(jìn)程
         item.showTotalTime = this._getMinuteBySecond(item.duration)   //顯示的總時(shí)長
    })
       
    this.setData({
         meditationCourse: res.data.data
    })
},
 // 秒轉(zhuǎn)分
  _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
  },


// 點(diǎn)擊播放和暫停音頻
  playAudio(e) {
    let that = this;
    let index = e.currentTarget.dataset.index
    let arr = that.data.meditationCourse.hcCourseResultList
    let srcAddress = e.currentTarget.dataset.src
    // 暫停當(dāng)前音頻
    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) => {   //將所有的音頻置為停止?fàn)顟B(tài)
      that._setAudioType(index, false)
    })
    that._setAudioType(index,true)   //將當(dāng)前音頻置為播放狀態(tài)
    that.setData({
      currentIndex: index   //設(shè)置當(dāng)前要展示的音頻進(jìn)度條
    })
    
    that.data.audio = wx.getBackgroundAudioManager();//初始化音頻并播放
    that.data.audio.src = srcAddress
    that.data.audio.title = e.currentTarget.dataset.name   //音頻標(biāo)題  必填
    that.data.audio.autoplay = true
    that.data.audio.play();

    //音頻開始播放的時(shí)間 和 進(jìn)度條的當(dāng)前值為0 
    that.data.audio.startTime = 0
    let currentProcessNum = `meditationCourse.hcCourseResultList[${index}].currentProcessNum`
    that.setData({
      [currentProcessNum]: 0
    })
  
    //音頻自然播放結(jié)束
    that.data.audio.onEnded(function name(params) {
      console.log('音頻自然播放結(jié)束')
    })

    //音頻進(jìn)度播放更新
    that.data.audio.onTimeUpdate(function () {
      //沒有觸動(dòng)滑動(dòng)事件 更新進(jìn)度
      if(!arr[index].isMove){
        that._setCurrent(index)
      }
   })
  },
  //開始滑動(dòng)觸發(fā)
  start : function (e) {
    let index = e.currentTarget.dataset.index
    this.move(index,true)
    this.data.audio.pause()
  },
  //觸發(fā)滑動(dòng)條
  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),
    })
  },

  //結(jié)束滑動(dòng)觸發(fā)
  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)
    }
  },
  //設(shè)置音頻圖片狀態(tài)以及滾動(dòng)條可播放狀態(tài)函數(shù)
  _setAudioType: function (index, tag) {
      let that = this
      let showAudio = `meditationCourse.hcCourseResultList[${index}].showAudio`
      that.setData({
        [showAudio]: tag
      })
  },
  //設(shè)置 滾動(dòng)條當(dāng)前位置函數(shù)
 _setCurrent: function (index) {
   let currentProcessNum = `meditationCourse.hcCourseResultList[${index}].currentProcessNum`
   this.setData({
     [currentProcessNum]: this.data.audio.currentTime
   })
 },
 //設(shè)置滾動(dòng)條是否滾動(dòng)狀態(tài)函數(shù)
 move:function (index,isMove) {
   let isMoveValue = `meditationCourse.hcCourseResultList[${index}].isMove`
    this.setData({
      [isMoveValue]: isMove
    })
 },

實(shí)現(xiàn)效果：

?文章來源地址http://www.zghlxwxcb.cn/news/detail-509335.html

到了這里，關(guān)于原生微信小程序，多音頻播放實(shí)現(xiàn)進(jìn)度條功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！