兼容大部分手機端的音樂播放代碼

博主送福利了，微信掃碼有驚喜。超值紅包等着你。。么么噠

 

言歸正轉

html部分

<!--背景音樂-->
    <audio style="display:none; height: 0" id="bg-music" preload="auto" src="music/bg.mp3" loop="loop"></audio>

js部分

//兼容大部分的app，微信和瀏覽器的音樂后台播放。
    document.addEventListener('DOMContentLoaded', function() {
        // 音樂播放
        function autoPlayMusic() {
            var audio = document.getElementById('bg-music');
            audio.play();
            document.addEventListener("WeixinJSBridgeReady", function() {
                audio.play();
            }, false);
            // 自動播放音樂效果，解決瀏覽器或者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 media = document.querySelector('#bg-music');
            if (isPlay && media.paused) {
                media.play();
            }
            if (!isPlay && !media.paused) {
                media.pause();
            }
        }
        autoPlayMusic();
    });