微信小程式多音訊場景處理 - 背景音訊

提到音訊播放控制，不得不提背景音訊這個方法wx.getBackgroundAudioManager

很不幸，這個有坑。當使用場景為單音訊播放或者不需要記錄每個音訊播放的位置時，使用它是一個合適的選擇。當需要記錄每個音訊的播放位置時，這個就會有些問題了。問題來源backgroundAudioManager.seek這個API。

重要的事情說3遍：backgroundAudioManager.seek在模擬器上正常，但是在真機上不生效，每次都會重新播
重要的事情說3遍：backgroundAudioManager.seek在模擬器上正常，但是在真機上不生效，每次都會重新播

Component({
  data: {
    play: false,
    list: [
      { id: 1, url: '' },
      { id: 2, url: '' },
      { id: 3, url: '' },
    ],
    duration: {},
    id: null,
  },
  onLoad() {},
  onShow() {},
  onHide() {},
  onUnload() { },
  play() {
    wx.nextTick(() => {
      const { duration = {} } = this.data;
      const currentTime = duration[id] || 0;
      backgroundAudioManager.title = '每日快訊';
      backgroundAudioManager.epname = '';
      backgroundAudioManager.singer = '';
      backgroundAudioManager.coverImgUrl = '';
      backgroundAudioManager.src = url;
      if (currentTime) {
        // 跳轉到指定的進度
        backgroundAudioManager.seek(currentTime);
        backgroundAudioManager.play();
      }
    });
  },
  handleAudioPlay(e) {
    const { play, url, id } = e.detail;
    const backgroundAudioManager = wx.getBackgroundAudioManager();
    if (play) {
      backgroundAudioManager.pause();
      // 記錄當前音訊播放的進度
      wx.getBackgroundAudioPlayerState({
        success(res) {
          const { currentPosition } = res;
          that.setData({
            duration: {
              ...duration,
              [id]: currentPosition,
            },
          });
        },
      });
      // 點選的不是當前播放的音訊
      if (this.data.id !== id) {
        this.play()
      }
    } else {
      this.play()
    }
    this.setData({
      play: !play,
      id,
    }),
  },
});
 

更多微信小程式知識點，檢視