一種解決h5頁面背景音樂不能自動播放的方案

• 場景：微信、瀏覽器、App
• 普通解決方案：採用audio標籤的autoplay屬性
• 現象：

1. 大部分IOS系統和少部分Android微信不支持自動播放

$解決方案：監聽WeixinJSBridgeReady事件、DOMContentLoaded事件 微信的JS API創建在微信殼瀏覽器的內置JS對象WeixinJSBridge上，WeixinJSBridge並非WebView一打開就有了，客戶端須要初始化這個對象，當這個對象準備好的時候，客戶端會拋出事件"WeixinJSBridgeReady"。 發現部分機型，監聽DOMContentLoaded和load事件，在回調中也能夠播放音樂； 因此，爲了保險起見，能夠同時監聽兩個事件，以加強其適用性。 代碼以下： <audio style="display:none; height: 0" id="bg-music" preload="auto" src="../static/videos/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();
});
 

2. 部分Android瀏覽器和全部IOS下Safari瀏覽器不支持自動播放

　　解決方案：經過手勢事件播放音樂 　　(1) 監聽body的touchstart事件，回調中播放音樂； 　　缺點：部分元素的touch事件可能會阻止冒泡，須要在對應的地方調起播放音樂函數 　　(2) 能夠增長透明層，點擊到透明層，播放音樂，關閉透明層； 　　缺點：第一次點擊按鈕元素可能不響應，形成用戶體驗上的傷害。

3. 部分App不支持webview音樂自動播放

　　解決方案：1.殼瀏覽器支持；2.經過手勢事件播放音樂   　　完整代碼： // 音樂播放
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 media = document.querySelector('#bg-music');
    if (isPlay && media.paused) {
        media.play();
    }
    if (!isPlay && !media.paused) {
        media.pause();
    }
}