微信小程序之背景音频

原生微信小程序背景音频的实现

之前实现了个 微信小程序 音频播放, 背景音频在此基础上改即可，大部分功能很相似，直接上代码

在Page外面创建一个背景音频实例，因为只需要创建一次，而且不需要销毁（因为要在后台播放）

// 创建一个播放对象
const audio = wx.getBackgroundAudioManager();

Page({

})

初始化音频时,附上音频链接会直接播放，这里要给title赋值，不然苹果手机会报错, onHide() 跟onUnload() 都不需要暂停跟销毁， 其他逻辑跟上一篇一样

 initAudio(url) {
      // 音频链接
      audio.src = url 
      audio.title = '音频'

      audio.onTimeUpdate(() => {
          let durationnum = parseInt(audio.duration)
          let time = this.formatSeconds(audio.duration)
          this.setData({
              duration: time,
              durationNum: durationnum,
          })
          this.changeCurrent(audio.currentTime)
      })
 },

 onHide(){
      //页面隐藏时停止播放
    // audio.stop()
  },
  
  onUnload() {
      //页面卸载时销毁音频实例
      // audio.destroy();
  },

另外补充一个知识点：
拖拽进度条时，会有闪屏抖动的问题。是因为slider组件的value 一直在计算，想不动都难。所以我应该是每次在他完成操作后再做计算，我再加入了个滑动监听事件，每次滑动的时候我设置个变量控制，并且把音频暂停（不暂停会一直计算value）,完成拖动后再计算，然后再播放音频，就解决了。其实应该是加个防抖函数即可的，但是不知道是小程序还是自己的问题，没有实现到，后续再看

changing() {
    this.setData({
        timer: true
    })
    audio.pause();
},
	// 滑块拖动快进，快退
async changeValue(e) {
    this.setData({
        timer: false
    })

    if(this.data.timer) return

    let val = e.detail.value
    let step = (val / 100) * this.data.durationNum
    await audio.seek(parseInt(step))
    await this.changeCurrent(step)

    audio.play();
},

完。