H5微信端在IOS上不能播放音乐解决方案

前言
在做各种HTML5场景页面的时候，插入背景音乐是一个很普遍的需求。我们都知道，iOS下的safari是无法自动播放音乐的，以至一直以来形成了一种认知，iOS是无法自动播放媒体资源的。直到微信火爆起来，发现iOS的微信里面打开的页面却可以实现自动播放。这种情况颠覆了之前的认知。但是，但是。。。最近的项目，又发现了一个头疼的问题。部分的iOS微信，打开有自动播放背景音乐的页面没有声音！最头疼的是这个问题出现做同款机子，相同的iOS系统，相同的微信版本！没错，前端就是要经常这么折腾的，同一个问题，你以为找到了最终的解决方案，但是各种浏览器更新快速，昨天没问题，也许今天就有问题了。还好，这个问题暂时找到原因和解决方案了，详情请看下文。
解决方案
先看下平时使用audio标签插入背景音乐的代码：

<audio src="bg.mp3" id="Jaudio" class="media-audio" autoplay preload loop="loop"></audio>

那代码有办法解决这少部分用户呢？如何解决呢？
答案的关键就是微信的WeixinJSBridgeReady事件。这个是微信自带提供的事件，测试发现，上面说的少部分的机子微信只要做微信ready后执行播放，就可以用代码实现自动播放功能了！具体代码请看下面：
<audio src="bg.mp3" id="Jaudio" class="media-audio" autoplay 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'); 
是不是听到声音了呢？！！解决方案就是这么简单。
后语
总结下吧，关于音乐自动播放的问题，现在可以分为三种：
1-支持audio的autoplay，大部分安卓机子的自带浏览器和微信，大部分的IOS微信（无需特殊解决）
2-不支持audio的autoplay，部分的IOS微信（本文提供的解决方案）
3-不支持audio的autoplay，部分的安卓机子的自带浏览器（比如小米，开始模仿safari）和全部的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');