解决vue微信浏览器H5页面ajax请求后无法播放问题

在说解决方案之前先说一下需求背景吧，产品要做一个答题类的测试，选择答案选项进行接口交互，如果选对播放答对的音频（推荐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)
}

个人亲测，iphone6 iphoneX 安卓手机可以正常播放