前言
复盘了一下,微信内置浏览器音频自动播放的问题。
先说结果吧,使用 Web Audio,Android 与 IOS 均可以自动播放。使用 <audio>
,IOS 可以自动播放,Android 无法自动播放。
如果大家有更好的解决方案,或者以上结论失效,可以在评论区一起探讨。
Web Audio 自动播放
目前来看,使用 Web Audio 是微信音频自动播放,最合适的兼容方案。
实现方式
这里使用 howler.js 作为 Web Audio API 的简化语法来展现实现逻辑:
import {Howl, Howler} from 'howler';
import assetsBgm from './assets/bgm.mp3';
// Web Audio 初始化
const soundBgm = new Howl({
src: [assetsBgm],
loop: true,
preload: true,
})
// 音频资源 load 之后通过微信桥接触发播放
soundBgm.on('load',()=>{
window.WeixinJSBridge && window.WeixinJSBridge.invoke('getNetworkType', {}, ()=> {
soundBgm.play();
}, false);
})
demo
扫码测试 Web Audio 自动播放:
<audio>
自动播放
经过测试 <audio>
IOS 端可以自动播放,Android 需要在点击后触发才可以自动播放。
实现方式
相关实现方式如下:
<audio src="./assets/bgm.mp3" id="audio" loop controls></audio>
const elementAudio = document.getElementById('audio');
window.WeixinJSBridge && window.WeixinJSBridge.invoke('getNetworkType', {}, () => {
elementAudio.play();
}, false);
demo
扫码测试 <audio>
自动播放:
结论
微信环境内音频自动播放,主要通过 WeixinJSBridge
来触发,除了文中的方式,网上还有其它更多的解决方案,但原理都是通过 Bridge 调用原生封装的方法。
相比 <audio>
安卓端无法自动播放,Web Audio 似乎是最好的解决方案。
如果大家有更好的解决方案,可以评论区见~