一種解決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();
    }
}
 

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