小程序InnerAudioContext不报错、不播放BUG

weixin_45799427

已于 2024-09-05 10:14:15 修改

阅读量196

点赞数 4

文章标签： vue.js javascript ecmascript uni-app 微信小程序

于 2024-09-05 10:12:05 首次发布

本文链接：https://blog.csdn.net/weixin_45799427/article/details/141923262

版权

全局生成了一个createInnerAudioContext实例，每次赋值src然后play()播放没声音也没报错

项目场景

我当前是uni-app+vue3开发环境我全局生成的this.audioContext = wx.createInnerAudioContext对象 audioContext是放在了data内

问题描述

我持有全局对象进行play时无法播放，没有声音没有报错注册的监听也没有调用

playAudio() {
			if (this.audioFilePath) {
				this.audioContext = wx.createInnerAudioContext();
				this.audioContext.src = this.audioFilePath;
				this.audioContext.play();
				this.audioContext.onError((err) => {
					console.error('音频播放错误:', err);
				});
				this.audioContext.onEnded(() => {
					console.log('音频播放结束');
				});
			} else {
				console.error('音频文件路径未创建');
			}
		}


---

# 原因分析：
找了很久没找到什么问题，最后通过打印输出	this.audioContext 对象和局部持有的wx.createInnerAudioContext();对象发现我全局的对象被vue处理了一下成为了响应式的对象这个时候调用播放什么是无效的，具体我还不太知道响应式之后应该怎么调用原始的方法让他生效

---

# 解决方案：
目前我知道我持有的对象被vue修改了一层成为全局响应对象，这个时候我的解决方法是不让this.audioContext成为响应对象vue提供了方法markRaw ，	const audioContext1 = wx.createInnerAudioContext();
this.audioContext = markRaw(audioContext1); // 全局对象 这样全局对象就可以正常处理暂停播放销毁