需求：顯示音樂播放按鈕、可手動拖拽進度條；頁面中含多個音樂，播放當前音樂時暫停其他音樂播放。

小程式自帶標籤 audio
小程式自帶的audio標籤含固定的樣式，且有最小尺寸。目前專案也不含name和author欄位，所以放棄audio標籤。

實現效果圖

初始化音樂資料

<text>{{currentProcess}}</text>
<slider bindchange="" bindtouchstart="" bindtouchend="" max="{{totalProcessNum}}" min="0" value="{{currentProcessNum
 
}}" disabled="{{canSlider}}"></slider>
<text>{{totalProcess}}</text>
<image src="{{audioListObj['q'+questionObj.id].imgUrl}}" data-audioId="q{{questionObj.id}}" bindtap="clickPlayAudio"></image>  <!-- clickPlayAudio 播放按鈕觸發事件 -->

src: _this.data.questionObj.audio,
 

currentProcess: '--:--',//顯示 將currentProcessNum處理成時間形式展示
currentProcessNum: 0,//賦值
totalProcess: '--:--',
totalProcessNum: 1,
seek: -1,
imgUrl: '../../images/play.png',
canSlider: false    //是否可以滑動，防止載入音樂時 使用者滑動進度條

點選播放按鈕觸發事件

說明：

• 因頁面中音樂數量較多，所以只有當用戶點選播放，再去載入audio檔案。

• wx.getBackgroundAudioManager()物件，同一時間只會播放一個audio檔案。當重新賦值src時，會切換檔案。

• 利用onTimeUpdate方法實時更新播放進度。

• onEnded方法處理audio播放完畢後的資料重新初始化事件。

• 變數clickPlayAudioFunctionIsRuning用來防止使用者連續點選按鈕。

    const _this = this;
    const _data = _this.data;
    //防止使用者點選播放按鈕太快
    if (_data.clickPlayAudioFunctionIsRuning){
      return ;
    }
    _this.setData({
      clickPlayAudioFunctionIsRuning: true
    })
    var _obj = _this.data.audioListObj;
    const audioId = $this.currentTarget.dataset.audioid;
    var backgroundAudioManager = wx.getBackgroundAudioManager();
    if (_this.data.audioListObj[audioId].imgUrl == '../../images/play.png'){
      console.log('轉換至播放狀態')
      //切換所有播放按鈕為暫停狀態
      for (var j in _this.data.audioListObj) {
        if (j && _this.data.audioListObj[j]) {
          _this.data.audioListObj[j].imgUrl = '../../images/play.png';
        }
      }
      _this.setData({
        audioListObj: _this.data.audioListObj,
      })
      //暫停正在播放音樂
      wx.stopBackgroundAudio();
      _obj[audioId].imgUrl = '../../images/paused.png';
      backgroundAudioManager.title = '測試';
      //設定音樂開始時間
      if (_this.data.audioListObj[audioId].currentProcessNum != 0){
        backgroundAudioManager.startTime = _this.data.audioListObj[audioId].currentProcessNum;
      }
      backgroundAudioManager.src = _this.data.audioListObj[audioId].src;
      _obj[audioId].canSlider = true;
      backgroundAudioManager.play();
      //    背景音訊自然播放結束事件
      backgroundAudioManager.onEnded(function () {
        var _obj = _this.data.audioListObj;
        _obj[audioId].imgUrl = '../../images/play.png';
        _obj[audioId].currentProcess = 0;
        _obj[audioId].currentProcessNum = 0;
        _this.setData({
          audioListObj: _obj
        })
      })
      //背景音訊播放進度更新事件
      backgroundAudioManager.onTimeUpdate(function (callback) {
        _obj = _this.data.audioListObj;
        //設定總時長
        if (_obj[audioId] && _obj[audioId].totalProcess && (_obj[audioId].totalProcess == '--:--' || _obj[audioId].totalProcess == '00:00')) {
          console.log(_this.formatTime(backgroundAudioManager.duration))
          _obj[audioId].totalProcess = _this.formatTime(backgroundAudioManager.duration);
          _obj[audioId].totalProcessNum = backgroundAudioManager.duration;
          _this.setData({
            audioListObj: _obj
          })
        }
        if (!_this.data.isMovingSlider) {
          //更新進度
          _obj[audioId].currentProcess = _this.formatTime(backgroundAudioManager.currentTime);
          _obj[audioId].currentProcessNum = backgroundAudioManager.currentTime;
          _this.setData({
            audioListObj: _obj
          })
        }
      })
    } else if (_this.data.audioListObj[audioId].imgUrl == '../../images/paused.png'){
      console.log('轉換至暫停狀態')
      _obj[audioId].imgUrl = '../../images/play.png'
      wx.pauseBackgroundAudio();
      backgroundAudioManager.pause();
    }

    _this.setData({
      audioListObj: _obj,
      clickPlayAudioFunctionIsRuning: false
    })

滑動進度條觸發事件

const _this = this;
    const _data = _this.data;
    const _obj = _this.data.audioListObj;
    const position = $this.detail.value;
    const audioId = $this.currentTarget.dataset.audioid;
    var backgroundAudioManager = app.globalData.bgAudioListManager;
      _obj[audioId].currentProcess = _this.formatTime(position);
      _obj[audioId].currentProcessNum = position;

      //如果正在播放
      if (_obj[audioId].imgUrl == '../../images/paused.png'){
        _obj[audioId].seek = position;
        if (_obj[audioId].seek != -1) {
          wx.seekBackgroundAudio({
            position: Math.floor(position),
          })
          _obj[audioId].seek = -1;
        }
      }
      _this.setData({
        audioListObj: _obj
      })

開始滑動觸發事件

this.setData({
      isMovingSlider: true
    });

結束滑動觸發事件

 this.setData({
      isMovingSlider: false
    });

備註：

程式碼只用於參考，具體如何實現要結合自己的專案結構。