H5中背景音乐无法自动播放问题

Posted 2020-09-01 津津unique

苹果禁止了Autoplay和JS "onload" 加载播放，使在html文件里使用了preload和autoplay属性，在移动版 Safari 上，此属性会被忽视，并且不会加载视频流，甚至不会下载该视频流。

除非用户物理点击一次屏幕，其实现在不能苹果手机，其他的安卓手机和部分App有时也存在背景音不能自动播放的问题。

背景音不能自动播放的场景及解决办法

解决方案：监听WeixinJSBridgeReady事件、DOMContentLoaded事件

   微信的JS API建立在微信壳浏览器的内置JS对象WeixinJSBridge上，WeixinJSBridge并不是WebView一打开就有了，客户端需要初始化这个对象，当这个对象准备好的时候，客户端会抛出事件"WeixinJSBridgeReady"。

发现部分机型，监听DOMContentLoaded和load事件，在回调中也可以播放音乐；

所以，为了保险起见，可以同时监听两个事件，以增强其适用性。

<div class="musicinfo" id="musicinfo">
        <audio id="musicid" src="music.mp3" preload="preload" autoplay="autoplay"  loop="loop">您的浏览器不支持 audio标签。</audio>
        <img class="music on roate" src="musicon.png">
</div> 
document.addEventListener(‘DOMContentLoaded‘, function () {
    function audioAutoPlay() {
        var audio = document.getElementById(‘ musicid ‘);
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
    }
    audioAutoPlay();
});

2、部分android浏览器和所有ios下Safari浏览器不支持自动播放

解决方案：通过手势事件播放音乐

   (1) 监听body的touchstart事件，回调中播放音乐；

   缺点：第一次点击按钮元素可能不响应，部分元素的touch事件可能会阻止冒泡，需要在对应的地方调起播放音乐函数

var audio = document.getElementById(‘musicid‘);
function musicInBrowserHandler() {
     audio.play();
     document.body.removeEventListener(‘touchstart‘, musicInBrowserHandler);
}
document.body.addEventListener(‘touchstart‘, musicInBrowserHandler);

(2) 可以增加透明层，点击到透明层，播放音乐，关闭透明层；

   缺点：第一次点击按钮元素可能不响应，而且有时候用户不会在打开页面短时间内点击，造成用户体验上的伤害。

3. 部分App不支持webview音乐自动播放

   解决方案：1.壳浏览器支持；2.通过手势事件播放音乐

   缺点：有些壳浏览器可能没有音频自动播放的接口，或者用户不进行手势操作。

完整代码

<!-- 音乐 start-->
<div class="musicinfo" id="musicinfo">
    <audio id="musicid" src="music.mp3" preload="preload" autoplay="autoplay"  loop="loop">您的浏览器不支持 audio标签。</audio>
    <img class="music on roate" src="musicon.png">
</div>
<!-- 音乐 end-->
<script type="text/javascript">
    // 音乐播放
    function autoPlayMusic() {
        // 自动播放音乐效果，解决浏览器或者APP自动播放问题
        function musicInBrowserHandler() {
            musicPlay(true);
            document.body.removeEventListener(‘touchstart‘, musicInBrowserHandler);
        }
        document.body.addEventListener(‘touchstart‘, musicInBrowserHandler);

        // 自动播放音乐效果，解决微信自动播放问题
        function musicInWeixinHandler() {
            musicPlay(true);
            document.addEventListener("WeixinJSBridgeReady", function () {
                musicPlay(true);
            }, false);
            document.removeEventListener(‘DOMContentLoaded‘, musicInWeixinHandler);
        }
        document.addEventListener(‘DOMContentLoaded‘, musicInWeixinHandler);
    }
    function musicPlay(isPlay) {
        var audio = document.getElementById(‘musicid‘);
        if (isPlay && audio.paused) {
            audio.play();
        }
        if (!isPlay && !audio.paused) {
            audio.pause();
        }
    }
    autoPlayMusic();
</script>

PS：上面的代码仅仅是解决背景音乐不自动播放的问题，如需加控制音乐播放和暂停的代码，请各位小伙伴先自行摸索一下；