解决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 安卓手机可以正常播放