audio在ios微信浏览器中不支持自动播放问题

最近在开发微信公众号H5页面的时候，audio标签在ios系统上无法进行自动播放，最后发现audio在ajax回调中无法调用Play，所以查找很多资料终于解决了。

首先html中添加如下代码：

html
<audio id="bg-music" src="<{$Think.const.HIMG_PATH}>s.wav" preload="auto">
    您的浏览器不支持 audio 标签。
audio>

我一开始的js代码：

js
//这是一个点击事件触发的函数
function changeStatus(PostObj) {
    $.ajax({
        url:  PostObj.url,
        type:'post',
        datatype: 'json',
        data:PostObj,
        success: function(data){
            if(data.rel == 1){
                var audio = document.getElementById("bg-music");
                audio.play(); 
                msg(data.msg,function () {
                    window.location.href= window.location.href+'?time='+((new Date()).getTime());
                });
            }else{
                msg(data.msg);
            }
        }
    });
}

发现在iOS系统的微信浏览器中不起作用，查找资料得到第一个解决方案：

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js">script> 
<script> 
 //一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以 
  var audio = document.getElementById("bg-music");
  audio.play(); 
 //微信必须加入Weixin JSAPI的WeixinJSBridgeReady才能生效 
 document.addEventListener("WeixinJSBridgeReady", function () { 
        audio.play(); 
 }, false); 
script>

将上边代码放进回调函数中发现还是不起作用，然后发现在如下情况下可以生效，但我们需要在请求成功返回res.rel==1情况下，才播放音乐，所以这样没有满足自己的需求：

function changeStatus(PostObj) {
     var audio = document.getElementById("bg-music");
     audio.play();
     document.addEventListener("WeixinJSBridgeReady", function () {
       audio.play();
     }, false);

    $.ajax({
        url:  PostObj.url,
        type:'post',
        datatype: 'json',
        data:PostObj，
        success: function(data){
            if(data.rel == 1){
              msg(data.msg,function () {
                    window.location.href= window.location.href+'?time='+((new Date()).getTime());
                });
            }else{
                msg(data.msg);
            }
        }
    });
}

所以我就知道问题出在哪里，是在ajax回调中audio标签不会触发，查找资料得到下面这句话：

为了避免浪费流量，ios手机端浏览器默认规定媒体文件不允许自动加载播放。
必须在由用户直接操作的事件(如click事件)中才能执行加载播放的代码语句。
在XHR的load事件中执行a.play(),是不允许的。

得到一个解决方案，把ajax改成同步方式。让click事件一直不结束。

function changeStatus(PostObj) {
    $.ajax({
        url:  PostObj.url,
        type:'post',
        datatype: 'json',
        data:PostObj,
        async: false,//使用同步方案
        success: function(data){
            if(data.rel == 1){
               var audio = document.getElementById("bg-music");
                audio.play();
                document.addEventListener("WeixinJSBridgeReady", function () {
                    audio.play();
                }, false);
                msg(data.msg,function () {
                    window.location.href= window.location.href+'?time='+((new Date()).getTime());
                });
            }else{
                msg(data.msg);
            }
        }
    });
}

至此bug解决，可能还有一些细节问题没有注意，还要慢慢完善。