H5中背景音樂無法自動播放問題

蘋果禁止了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：上面的代碼僅僅是解決背景音樂不自動播放的問題，如需加控制音樂播放和暫停的代碼，請各位小伙伴先自行摸索一下；