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

最新推荐文章于 2022-12-06 16:30:06 发布

原创

最新推荐文章于 2022-12-06 16:30:06 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

本文介绍如何在微信小程序中实现多音频的独立播放控制，并详细解释了使用wx.createInnerAudioContext进行音频管理的方法。此外还探讨了不同退出场景下音频播放的处理方式，以及可能遇到的内存问题。

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

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

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

通过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;
      thi