uni.createInnerAudioContext() 报错{"errMsg":"MediaError","errCode":-5} 解决方案

分类：uni-app

audio

刚好在写关于控制音频播放的功能，H5、Android调试正常，在iOS端调试时onError报{"errMsg":"MediaError","errCode":-5}错误。说实话，和官方文档对比了一下，还是有点儿懵逼，复制粘贴的代码到了自己这儿居然报错。

疯狂三连 IDE没更新？姿势不对？我太菜了？

作为面向网络开发的我，遇事不解找度娘，发现遇到此问题的小伙伴也挺多的，也有部分小伙伴提供了一些解决思路：

https://ask.dcloud.net.cn/article/39258
https://www.php.cn/faq/469883.html

经过调试，发现iOS端音频播放技能前摇太长了，当然了，官方提供的API肯定是经过大面积测试的，一般来说都是咱们的使用姿势错了，细心看下文档和调试就能把问题解决了。

解决过程如下，希望对遇到此问题的小伙伴有帮助：

发现问题

按照官方API的示例直接复制或编写相同代码，H5、Android端调试正常，ios端报错

const innerAudioContext = uni.createInnerAudioContext();  
innerAudioContext.autoplay = true;  
innerAudioContext.src = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3';  
innerAudioContext.onPlay(() => {  
  console.log('开始播放');  
});  
innerAudioContext.onError((res) => {  
  console.log(res.errMsg);  
  console.log(res.errCode);  
});

const innerAudioContext = uni.createInnerAudioContext();  
innerAudioContext.src = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3';  
innerAudioContext.play()  

innerAudioContext.onPlay(() => {  
  console.log('开始播放');  
});  
innerAudioContext.onError((res) => {  
  console.log(res.errMsg);  
  console.log(res.errCode);  
});

在ios调试会分别发现：

初始化设置添加 innerAudioContext.autoplay = true;
onError事件被触发并返回{"errMsg":"MediaError","errCode":-5} 后onPlay事件会被触发，这问题应该是大多数小伙伴遇到的

初始化设置时执行 innerAudioContext.play() 方法
onError事件不会被触发，onPlay()事件被触发两次

至于ios端为什么会出现这样的问题，就需要Dcloud团队去处理了。

解决问题

相信各位小伙伴也注意到了官方文档中的onCanplay事件，在这里调用执行播放的事件就能解决问题了。
用大白话来讲：音频资源尚未加载完成，就已经执行播放事件。

               const innerAudioContext = uni.createInnerAudioContext();  
        innerAudioContext.src = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3';  

        innerAudioContext.onCanplay(() => {  
            console.log('可以播放音频');  
            innerAudioContext.play()  
        })  
        innerAudioContext.onPlay(() => {  
            console.log('开始播放');  
        });  
        innerAudioContext.onStop(() => {  
            console.log('音频停止播放');  
        });  
        innerAudioContext.onEnded(() => {  
            console.log('音频自然播放结束事件');  
        });  
        innerAudioContext.onError((res) => {  
            console.log('播放错误');  
            console.log(err);  
        });