解決ios下的微信頁面背景音樂無法自動播放問題

在做各種html5場景頁面的時候，插入背景音樂是一個很普遍的需求，我們都知道，ios下的safari是無法自動播放音樂的，以至於現在行程一種認知，ios是沒有辦法自動播放媒體資源的，這個認知其實是錯誤的，是有解決方案的，解決方案如下：

解決方案：

audio插入背景音樂：

<audio src="bg.mp3" id="audio"  autoplay preload loop="loop"></audio> 

代碼怎么解決背景音樂自動播放呢：

其實很簡單就是微信WeixinJSBridgeReady事件。這個是微信自帶提供的事件，測試發現，部分機子微信只要做微信ready后執行播放，就可以實現自動播放了，代碼如下：

<audio src="bg.mp3" id="audio"  autoplay preload loop="loop"></audio> 

js部分：

function audioAutoPlay(id){
    var audio = document.getElementById(id);
    audio.play();
    document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
    }, false);
    document.addEventListener('YixinJSBridgeReady', function() {
        audio.play();
    }, false);
}
audioAutoPlay('Jaudio');

解決了么？

總結：關於音樂自動播放有三種情況：

1：支持audio的autoplay，大部分安卓機子自帶的瀏覽器和微信，部分的ios微信（不用解決）

2:不支持audio的autoplay,部分的ios微信（解決方案以提供）

3：不支持audio的autoplay，部分的安卓機子自帶的瀏覽器（例：小米）和全部的ios Safari（這種只能做用戶觸屏時播放代替自動播放）

根據上面三種情況解決方案如下：

function audioAutoPlay(id){
    var audio = document.getElementById(id),
        play = function(){
            audio.play();
            document.removeEventListener("touchstart",play, false);
        };
    audio.play();
    document.addEventListener("WeixinJSBridgeReady", function () {
        play();
    }, false);
    document.addEventListener('YixinJSBridgeReady', function() {
        play();
    }, false);
    document.addEventListener("touchstart",play, false);
}
audioAutoPlay('Jaudio');