uni-app 音频播放Android平台不能创建多次uni.createInnerAudioContext()实例，但是实例化一次后多次播报play()事件会导致其他监听事件叠加触发。比如onPlay()和onEnded()都会打印多次，造成页面渲染卡顿。
问题根本原因还是uniapp未能解决创建新实例销毁旧的实例，以及代码中的destroy()方法并不能真正的销毁实例。
希望官方能尽快解决，背景音频也有同样的问题
7***@qq.com
- 发布：2022-07-10 10:32
- 更新：2024-11-10 17:13
- 阅读：2727
uni-app 音频播放Android平台不能创建多次uni.createInnerAudioContext()实例，但是实例化一次后多次播报play()事件会导致其他监听事件叠加触发。比如onPlay()和onEnded()都会打印多次，造成页面渲染卡顿。
刘先生啊 - 平平无奇一前端
<script>
let innerAudioContext = uni.createInnerAudioContext();
</script>
playaudiosuccess_() {
innerAudioContext.src = '../../static/y835.mp3';
innerAudioContext.play();
innerAudioContext.onEnded(function(res) {
innerAudioContext.destroy() //先销毁音频
innerAudioContext = null // 再赋值为null
innerAudioContext = uni.createInnerAudioContext() // 最后再创建一个新的
})
},
可以试试这样
7***@qq.com (作者)
解决方法：定义一个全局的音频实例const innerAudioContext = uni.createInnerAudioContext();然后多次调用同一实例。
我是这样写的，来回切换音频扫了几百次都没事，
Vue.prototype.$audioManager = {
audioContext: null, // 当前正在播放的音频上下文
createAudioContext() {
if (this.audioContext) {
this.audioContext.destroy();
}
this.audioContext = uni.createInnerAudioContext();
return this.audioContext;
},
destroyAudioContext() {
if (this.audioContext) {
this.audioContext.destroy();
this.audioContext = null;
}
}
};
export default {
...
methods: {
...
//播放扫码成功音效
ringling() {
const audioContext = this.$audioManager.createAudioContext();
audioContext.stop();
audioContext.src = '../../static/success.mp3';
audioContext.play();
audioContext.onEnded(() => {
this.$audioManager.destroyAudioContext();
});
},
//播放扫码失败音效
ringling2() {
const audioContext = this.$audioManager.createAudioContext();
audioContext.stop();
audioContext.src = '../../static/failed.mp3';
audioContext.play();
audioContext.onEnded(() => {
this.$audioManager.destroyAudioContext();
});
},
}
}
