一种解决h5页面背景音乐不能自动播放的方案

解决方案:监听WeixinJSBridgeReady事件、DOMContentLoaded事件
微信的JS API建立在微信壳浏览器的内置JS对象WeixinJSBridge上,WeixinJSBridge并不是WebView一打开就有了,客户端需要初始化这个对象,当这个对象准备好的时候,客户端会抛出事件"WeixinJSBridgeReady"。
发现部分机型,监听DOMContentLoaded和load事件,在回调中也可以播放音乐;
所以,为了保险起见,可以同时监听两个事件,以增强其适用性。
代码如下:
<audio style="display:none; height: 0" id="bg-music" preload="auto" src="bg-music.mp3" loop="loop"></audio>

document.addEventListener('DOMContentLoaded', function () {
    function audioAutoPlay() {
        var audio = document.getElementById('bg-music');
            audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
    }
    audioAutoPlay();
});

猜你喜欢

转载自blog.csdn.net/u010439874/article/details/133365425