IOS部分机型的H5场景不能自动播放背景音乐

先看下平时使用audio标签插入背景音乐的代码：

<audio id="Jaudio" class="media-audio" src="http://game.163.com/weixin/gfxm3_gc/images/bg.mp3" autoplay preload loop="loop"></audio>

正常来说，上面的写法在安卓和大部分IOS机子的微信是可以播放的（safari这里就忽略讨论），可以扫一扫demo测试下你的手机：

如果上面的demo，你的ios微信可以播放，说明你的是大部分正常的手机。如果不能播放，哈哈，你成为了少部分不能正常播放的幸运者。。。
那代码有办法解决这少部分用户呢？如何解决呢？
答案的关键就是微信的WeixinJSBridgeReady事件。这个是微信自带提供的事件，测试发现，上面说的少部分的机子微信只要做微信ready后执行播放，就可以用代码实现自动播放功能了！具体代码请看下面：

<audio id="Jaudio" class="media-audio" src="http://game.163.com/weixin/gfxm3_gc/images/bg.mp3" preload loop="loop"></audio>
function audioAutoPlay(id){
    var audio = document.getElementById(id);
    audio.play();
    document.addEventListener("WeixinJSBridgeReady", function () {
        audio.play();
    }, false);
}
audioAutoPlay('Jaudio');

刚才如果你第一个demo不能播放的童鞋可以再扫一扫测试下（如果第一个demo已经测试正常的，这个肯定是正常的啦）

是不是听到声音了呢？！！解决方案就是这么简单。

后语
总结下吧，关于音乐自动播放的问题，现在可以分为三种：
1-支持audio的autoplay，大部分安卓机子的自带浏览器和微信，大部分的IOS微信（无需特殊解决）
2-不支持audio的autoplay，部分的IOS微信（本文提供的解决方案）
3-不支持audio的autoplay，部分的安卓机子的自带浏览器（比如小米，开始模仿safari）和全部的ios safari（这种只能做用户触屏时就触发播放了）
那么针对已知的三种情况，关于自动播放背景音乐的问题，我们来总结一下综合解决方案代码吧：

<audio id="Jaudio" class="media-audio" src="http://game.163.com/weixin/gfxm3_gc/images/bg.mp3" preload loop="loop"></audio >
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');

另一篇：
http://www.cnblogs.com/wmhuang/p/5452259.html