uni-app uni.getBackgroundAudioManager()在切换音乐时监听事件累加多次触发问题

uni-app uni.getBackgroundAudioManager()在切换音乐时监听事件累加多次触发问题

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Windows
PC系统版本 win11
HBuilderX Alpha
HBuilderX版本 3.3.0
手机系统 Android
手机系统版本 Android 11
手机厂商 华为
手机机型 荣耀note10
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

let bgm = uni.getBackgroundAudioManager();
bgm.onPlay(()=>{})

预期结果：

每次切换监听事件只触发一次

实际结果：

每次切换监听会累加，如果切换10次，事件会累加10次

bug描述：

使用uni.getBackgroundAudioManager()开发背景音乐播放器，但是在切换音乐的时候，onPlay，onPause等监听事件一直累加多次触发，如初始化播放onPlay触发一次；点下一首，onPlay触发两次；点上一首，onPlay触发三次；再切换还会一直累加

bug图片


更多关于uni-app uni.getBackgroundAudioManager()在切换音乐时监听事件累加多次触发问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

没有这种情况 <template>
<view class="content">
<button @click=“stop()”>zanting</button>

    <button @click="open()">打开</button>  
</view>
</template> <script> const bgAudioManager = uni.getBackgroundAudioManager(); export default { data() { return { title: 'Hello' } }, onLoad() { bgAudioManager.title = '致爱丽丝'; bgAudioManager.singer = '暂无'; bgAudioManager.coverImgUrl = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png'; bgAudioManager.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3'; bgAudioManager.onPlay(()=>{ console.log("onPlay") }) bgAudioManager.onStop(()=>{ console.log("onStop") }) bgAudioManager.onCanplay(()=>{ console.log("onCanplay") }) }, methods: { open: function() { bgAudioManager.play(); }, stop: function() { bgAudioManager.stop(); } } } </script> <style> </style>

更多关于uni-app uni.getBackgroundAudioManager()在切换音乐时监听事件累加多次触发问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


请问这个问题解决了吗？遇到了同样的问题

这是 uni-app 中 uni.getBackgroundAudioManager() 事件监听器的常见问题。原因是每次调用 onPlay() 等方法时，都会添加一个新的监听器，而旧的监听器并未移除，导致事件被重复触发。

解决方案：

在每次重新绑定事件前，先移除之前的事件监听。可以使用 offPlay()、offPause() 等方法：

let bgm = uni.getBackgroundAudioManager();

// 移除旧的事件监听
bgm.offPlay();
bgm.offPause();
bgm.offStop();
// ... 其他需要的事件

// 绑定新的事件监听
bgm.onPlay(() => {
  console.log('播放');
});

bgm.onPause(() => {
  console.log('暂停');
});

// ... 其他事件

更优的实践：

建议将背景音频管理器的初始化封装为一个函数，在每次需要更新监听时调用：

function setupBackgroundAudioListeners() {
  const bgm = uni.getBackgroundAudioManager();
  
  // 移除所有旧监听
  bgm.offPlay();
  bgm.offPause();
  bgm.offEnded();
  bgm.offError();
  
  // 设置新监听
  bgm.onPlay(() => {
    console.log('音乐开始播放');
  });
  
  bgm.onPause(() => {
    console.log('音乐暂停');
  });
  
  bgm.onEnded(() => {
    console.log('音乐播放结束');
    // 自动播放下一首逻辑
  });
  
  bgm.onError((res) => {
    console.error('播放错误:', res);
  });
}

// 在切换音乐时调用
function switchMusic(newSrc) {
  const bgm = uni.getBackgroundAudioManager();
  bgm.stop(); // 停止当前播放
  setupBackgroundAudioListeners(); // 重新设置监听器
  bgm.src = newSrc;
  bgm.title = '新歌曲';
  bgm.play();
}
回到顶部