微信小程序之音頻播放

 

 項目需求要做一個音頻播器的功能，但是要實現退出小程序后還能播放，在微信聊天頂部出現正在播放的什么音頻的播放標記。然后在網上找了相關的例子發現大多都是退出后音頻會暫停掉，不符合項目需求。查閱微信小程序API文檔，發現可以使用wx.getBackgroundAudioManager()這個api實現退出后還能播放的需求。

上圖就是大概界面，點擊按鈕進行播放，進圖條可以拖拽，點擊列表播放音頻

首先創建全局的音頻播放器

const audioManager = wx.getBackgroundAudioManager()

通過wx.request請求調用接口獲取音頻列表的信息

第二步初始化對象賦值

采用定時器延時賦值，因為請求是異步的方式，有可能會在成功時取不到值

播放與暫停

列表播放

看了下文檔，在onEnded中執行下一首的函數

audioManager.onEnded(function() {
      console.log("onEnded");
      console.log("當前狀態", that.data.audioPalyStatus);
      let nextTimer = setTimeout(function() {
        if (that.data.showpause === true) {
          that.bindTapNext()
        }
      }, 2000)
    })

that.data.showpause這是表示沒有點擊暫停按鈕的狀態

 //自動播放下一首
  bindTapNext: function() {
    console.log("播放下一首", 'bindTapNext')
    let that = this
    let length = this.data.audiolist.length
    console.log("當前有多少音頻的長度", length);
    let audioIndexPrev = this.data.index
    console.log("當前的index", audioIndexPrev);
    let audioIndexNow = audioIndexPrev
    if (audioIndexPrev === length - 1) {

      audioIndexNow = 0
    } else {
      audioIndexNow = audioIndexPrev + 1
      console.log("當前audioIndexNow", audioIndexNow);
    }
    setTimeout(function() {
      that.setData({
        index: audioIndexNow,
        audioPalyStatus: 0,
        // showstart: false,
        showpause: true,
        secondplay: false,
        max: that.data.max,
      })
      that.setData({
        currentobj: that.data.audiolist[that.data.index]
      })
      that.setData({
        text: that.data.currentobj.voice_dec,
      })
      console.log("再次的index", that.data.index);
      console.log("下一首的嗎", that.data.currentobj);
      console.log("第0首", that.data.audiolist[0], '第一首', that.data.audiolist[1]);
      if (that.data.showpause == true) {
        // that.start()
        that.setData({
          secondplay: false,
        })
        audioManager.src = that.data.currentobj.voicefile
        audioManager.title = that.data.currentobj.voice_name
        audioManager.coverImgUrl = that.data.currentobj.urlimage
        // max = that.data.currentobj.voice_times
      }
    }, 1000)

  },

基本完成音樂播放功能