收藏
回答

创建多个InnerAudioContext实例分别对应不同音频,点击事件播放音频总是播放最后一个?

用wx.createInnerAudioContext()创建了多个实例,每个实例src对应不同的音频文件,不同的点击事件播放对应的音频,开发者工具模拟器和安卓手机测试都正常, iPhone和iPad上测试却是无论点击哪个按钮都是播放最后一个实例的音频,请问这是写法问题还是bug,有没有什么解决方案实现点击不同按钮播放对应音频?

代码如下:

index.js

const app = getApp()
const innerAudioContext_1 = wx.createInnerAudioContext();
const innerAudioContext_2 = wx.createInnerAudioContext();
const innerAudioContext_3 = wx.createInnerAudioContext();
const innerAudioContext_4 = wx.createInnerAudioContext();
const innerAudioContext_5 = wx.createInnerAudioContext();
innerAudioContext_1.src = '/audio/voice_01.mp3'
innerAudioContext_2.src = '/audio/voice_02.mp3'
innerAudioContext_3.src = '/audio/voice_03.mp3'
innerAudioContext_4.src = '/audio/voice_04.mp3'
innerAudioContext_5.src = '/audio/voice_05.mp3'

Page({
  data: {
  },

  tapevent_01(){ innerAudioContext_1.play(); },
  tapevent_02(){ innerAudioContext_2.play(); },
  tapevent_03(){ innerAudioContext_3.play(); },
  tapevent_04(){ innerAudioContext_4.play(); },
  tapevent_05(){ innerAudioContext_5.play(); },
})


index.wxml

<button type="primary" bindtap="tapevent_01">播放1</button>
<button type="primary" bindtap="tapevent_02">播放2</button>
<button type="primary" bindtap="tapevent_03">播放3</button>
<button type="primary" bindtap="tapevent_04">播放4</button>
<button type="primary" bindtap="tapevent_05">播放5</button>


代码片段:https://developers.weixin.qq.com/s/JsEeA5mt7iCf

回答关注问题邀请回答
收藏

2 个回答

  • Chef-Lunixy
    Chef-Lunixy
    2022-09-07

    因为 InnerAudioContext 贯穿整个上下文,每次创建不会重新实例化一个对象出来,所以以最后一次 src 赋值为准,建议如下修改:

    const innerAudioContext = wx.createInnerAudioContext();
    
    tapevent_01(){
          innerAudioContext.src = '/audio/voice_01.mp3'
          innerAudioContext.play();
      },
      tapevent_02(){
          innerAudioContext.src = '/audio/voice_02.mp3'
          innerAudioContext.play();
      },
      tapevent_03(){
          innerAudioContext.src = '/audio/voice_03.mp3'
          innerAudioContext.play();
      },
      tapevent_04(){
          innerAudioContext.src = '/audio/voice_04.mp3'
          innerAudioContext.play();
      },
      tapevent_05(){
          innerAudioContext.src = '/audio/voice_05.mp3'
          innerAudioContext.play();
      },
    


    PS:为了代码维护方便,把 src 属性值通过页面元素的 data-* 传递,点击播放事件用一个函数搞定。



    2022-09-07
    有用 1
    回复 3
    • 熊💫
      熊💫
      2022-09-07
      谢大佬~
      用一个实例改变src的方式确实没问题,但是会有个问题是:例如在音频1播放中途还未播放完毕时触发播放音频2,音频1会立刻停止开始播放音频2,也就是同一时间只能播放一个音频,如何做到让多个音频互不干扰同时播放呢?
      2022-09-07
      回复
    • Chef-Lunixy
      Chef-Lunixy
      2022-09-07回复熊💫
      不行啊,想想手机在什么场景下同时播放多个音频?
      2022-09-07
      回复
    • 熊💫
      熊💫
      2022-09-07回复Chef-Lunixy
      需求是要同时播放的,不会同时播放过多,之前好像看到过有帖子说createInnerAudioContext是支持创建多个的。。。唉
      2022-09-07
      回复
  • 白菊狗汁
    白菊狗汁
    2023-05-06

    还有个问题,如何播放音频的src相同,不会重新播放,而会被当成相同的实例,也是相当无语拉这个控件

    2023-05-06
    有用
    回复
登录 后发表内容