微信小程序多音频场景处理

微信小程序多音频场景处理

背景：页面中有多条数据，每条数据都可以单独播放，不同时播放

核心逻辑就是每个音频单独初始化一个方法，每个音频播放的进度等信息都单独控制

通过wx.createInnerAudioContext来控制

// wxml
<view wx:for="{{list}}" wx:key="id">
  <view play="{{play}}" url="{{item.url}}" id="{{item.id}}">播放</view>
</view>

// js
Component({
  data: {
    play: false,
    list: [
      { id: 1, url: '' },
      { id: 2, url: '' },
      { id: 3, url: '' },
    ],
    id: null,
  },
  onLoad: function () {},
  onShow() {},
  onHide() {
    this.audioPause();
  },
  onUnload() {
    this.audioPause();
  },
  handleAudioPlay(e) {
    const { play, url, id } = e.detail;
    if (!this[`innerAudioContext${id}`]) {
      this[`innerAudioContext${id}`] = wx.createInnerAudioContext();
    }
    if (play) {
      this[`innerAudioContext${id}`].pause();
    } else {
      this[`innerAudioContext${id}`].autoplay = true;
      this[`innerAudioContext${id}`].src = url;
      this[`innerAudioContext${id}`].play();
    }

    this.setData({
      play: !play,
      id,
    });
    this.innerAudioContext.onEnded(() => {
      this.setData({
        play: false,
      });
    });
  },
  audioPause() {
    const { id } = this.data;
    this[`innerAudioContext${id}`].pause();
    this.setData({
      play: false,
    });
  },
});

当采用这个方法时，还有三种常见的场景需要考虑：

1. 页面返回键退出当前页面
2. 右上角退出小程序
3. 手机home键将小程序切换到后台

为什么需要考虑这三种情况呢，因为一般小程序退出当前页面或者切换到后台，需要停止当前播放的音乐

当通过返回键退出当前页面(或者点击页面跳转到其它页面)，一般直接销毁音频初始化方法即可：

handlerBack() {
  router.back()
  const { id } = this.data
  if (this[`innerAudioContext${id}`]) {
    this[`innerAudioContext${id}`]. destroy()
  }
}

当右上角退出小程序时

onUnload() {
  const { id } = this.data
  if (this[`innerAudioContext${id}`]) {
    this[`innerAudioContext${id}`]. pause()
  }
}

当按home键切换到后台时：

onHide() {
  const { id } = this.data
  if (this[`innerAudioContext${id}`]) {
   this[`innerAudioContext${id}`]. pause()
  }
}

当前音频是单独播放，只是针对每个音频初始化一个实例，假如需要同时播放多个音频，这种方式可能会导致内存不足导致的崩溃

更多微信小程序知识点，查看