手機端網頁自動播放背景音樂相關資料

做手機端活動頁面的時候，經常會遇到打開頁面自動播放背景音樂的需求。但是很多開發人員在實現這個需求時會遇到各種各樣不能自動播放或有些場景可以有些場景不行的現象，現在總結一下手機端自動播放背景音樂的資料。

程序媛鎮樓

首先從正常的代碼開始：

<audio autoplay  src="url.mp3"></audio>

【andriod】
支持場景：
QQ瀏覽器
QQ（QQ內置了QQ瀏覽器，當然能打開）
微信（都是騰訊的，難道內核一樣？）
系統自帶瀏覽器

不支持場景：
chrome

【ios】
支持場景：

不支持場景：
safari

然後是改進的代碼開始：
方案1：用video的append，然而並沒什麼卵用

<div id="bgmvideo">
</div>

<script type="text/javascript"> 
$(document).ready(function () {  
            if (!sessionStorage.getItem("bgm")) {  
                 $("#bgmvideo").append(  
                    '<audio src="url.mp3" autoplay hidden></audio>'  
                );  
                sessionStorage.setItem("bgm", 1)  
            }  
        })  
</script>

方案2：針對大部分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="url.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();
});

方案3：觸屏播放，等同於按了播放按鈕

$('html').one('touchstart',function(){ 
audio.play(); 
}
});

("body").one("touchstart",
audio.play(); 
});

優點：兼容所有場景。
缺點：不是真正的自動播放，用戶不觸屏就不會播放。且爲避免重複播放，應再改進爲在新建全屏透明層上觸發事件，觸發後同時關閉該層。
備註：此代碼測試未通過。

方案4：一個自信滿滿的方案，然而測試後，各種場景都無效，還不如默認的……
http://blog.csdn.net/sinat_33750162/article/details/54630112

其他參考：
部分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();
    }
}