關於微信H5頁面開發中音樂不自動播放的解決方法

　　我想應該有很多人在做H5場景應用、H5微刊、H5微雜志的時候加入背景音樂吧（客戶需求），相信很多人一定碰過不能自動播放的時候，即使是相同的iPhone 5s也有不播放的時候，很蛋疼吧！？

之前我的解決方案：

<audio id="bgm" src="media/bgm.mp3" autoplay="autoplay" loop="" style="display: none; width: 0; height: 0;"></audio>

<script type="text/javascript">
//方法一
var firstTouch = true;
$("body").bind("touchstart",function(e) {
    if ( firstTouch ) {
        firstTouch = false;
        document.getElementById('bgm').play();
    }else{
        return;
    }
});
//方法二
$("body").one("touchstart",function() {     
    document.getElementById('bgm').play();
});
</script>

　　原理就是若遇到禁止自動播放的手機，用戶第一次觸摸屏幕的時候就執行播放事件，我試過很多什么window.onload = function(){}，預加載圖片后回調執行播放事件，插件jquery.imgpreload.min.js 圖片加載完畢回調都然並卵......沒有辦法的辦法只能用上面方法。

我最近在瞎逛前端BLOG淘淘經驗偶遇這個解決方案，至於哪個網站我忘記了，但是我做了摘錄：

原理就是通過new一張圖片，監聽一張圖片的onload事件，結束后回調執行音頻播放audio.play()即可，原理估計是動了dom結構，相當於執行了一次交互。

PS：

1. 音樂不宜過長，30s為佳，而且音樂要加上漸現漸隱效果，方便循環播放；
2. 音樂體積要小，音質和流量，在手機上還是優先考慮流量吧。

一般背景音樂體積可以接受的范圍是200K以下，若太大，可以使用格式工廠等軟件，降低它的比特率和聲道來改變體積。