vue 微信录音倒计时_基于vue微信平台H5页面audio自动播放音频解决方案

在说解决方案之前先说一下需求背景吧，产品要做一个答题类的测试，其中打开的第一个页面是要自动开始播放一段提前录好的音频(MP3格式的，这很重要，MP3格式的在移动端相对兼容性好一点)，然后开始做题每道题都先自动播放音频的题目，然后用户根据题目内容答题。大概就是这样一个需求。

早就听说过移动端对音频自动播放是禁止的，知道这个需求的时候就觉得不好搞，但是想着别人能做我应该也行，然后就开始了网上找填坑的方法

找了好多都是说不全的或者是用了没效果的，最后自己通过研究之前调用微信支付的代码，最终得出了完美的解决方案，代码如下：

if (window.WeixinJSBridge) {

window.WeixinJSBridge.invoke('getNetworkType', {}, (res) => {

vm.$refs.audioPlayer.load()

setTimeout(() => {

vm.$refs.audioPlayer.play()

}, 300)

})

} else {

document.addEventListener('WeixinJSBridgeReady', () => {

window.WeixinJSBridge.invoke('getNetworkType', {}, (res) => {

vm.$refs.audioPlayer.load()

setTimeout(() => {

vm.$refs.audioPlayer.play()

}, 300)

})

}, false)

}

之所以有一个300秒的延时是因为有一小部分手机会出现js报错，加上了之后就没有了，这个vm.$refs.audioPlayer.load()你觉得有需要就加，没需要不加也行，

上面说到的js报错内容大概是这个DOMException { INDEX_SIZE_ERR: 1, DOMSTRING_SIZE_ERR: 2, HIERARCHY_REQUEST_ERR: 3, WRONG_DOCUMENT_ERR: 4，明明已经有拿到dom元素了，不知道为啥报这个错，反正加个延时就好了，有知道的小伙伴给分享一下报错原因呗