关于微信网页中audio标签不兼容iOS系统的解决方法

就这两天，公司一客户需要在自己的微信网页上添加一个背景音乐并且自动播放，本来按照正常流程走，自动播放完全没问题，然而在手机端测试过程中，发现万恶的iOS却不支持autoplay，其他Android系统都正常支持，对于小白来说，这一问题的出现就像发现了新大陆一样，心中那个憋屈啊（捂脸）。好了，废话不多说，以下贴解决方法。

首先介绍下audio标签的几个常用属性：

如以上所说，加入autoplay属性就可以在网页中正常播放，为了方便测试，我们添加controls属性让其显示在页面中，如以下代码，正常来说，加入页面就可以自动播放。

<audio controls="controls" autoplay="autoplay">
  <source src="https://dl.stream.qqmusic.qq.com/M80000368C8r4XfJ18.mp3?vkey=F538BCFDC771241D7D325C8CF815BAB7AE953709072FD00757037ED1512053F5979881A172ED76C9DA7D8E8ACADEFC4121785651780C4CE7&guid=680967469&uid=0&fromtag=30" type="audio/mpeg">
</audio>

介绍就到这里，现在切入正题，在微信网页中，要想audio标签在iOS中实现自动播放，就凭着以上几行代码是实现不了的，所以我们就必须用js来控制audio的播放。

代码如下：

<div id="audio_btn" class="" style="display:none;">//用于点击播放与暂停
    <div id="yinfu" class="rotate">
    </div>
</div>

首先我们引入jquery库，不然下面的代码会报错

<script src="http://video.zbpnice.cn/video/assets/js/jquery.min.js"></script>

js核心代码：

var video = $("<audio loop='loop'></audio>").appendTo('body');//设置视频文件地址    
video.attr('src', "https://dl.stream.qqmusic.qq.com/M80000368C8r4XfJ18.mp3?vkey=F538BCFDC771241D7D325C8CF815BAB7AE953709072FD00757037ED1512053F5979881A172ED76C9DA7D8E8ACADEFC4121785651780C4CE7&guid=680967469&uid=0&fromtag=30");    
video.attr('id', 'bgaudio');//创建临时使用的a标签    
var tmpA = tmpA || $("< a href=' '></ a>").appendTo('body');//给标签绑定事件,在标签中播放视频    
tmpA.unbind('bind').bind('click', function (e){        
    e.preventDefault(); //  通过先暂停，再播放的方式实现在ios中自动播放的效果        
    video[0].play(); //播放       
    video[0].pause();//暂停       
    video[0].play();    
}).click();    
$(function(){        
    $("#audio_btn").click(function(){//点击播放            
        if($(this).hasClass('off')){                
        video[0].play();                
        $(this).removeClass('off');                
        $("#yinfu").addClass("rotate");            
        }else{                
        video[0].pause();                
        $(this).addClass('off');                
        $("#yinfu").removeClass("rotate");            
        };        
    })    
});    
document.addEventListener("WeixinJSBridgeReady",function(){ //监听事件       
    document.getElementById('bgaudio').play();    
},false);

以上就是，js控制音频播放的代码，但是你以为就这样就可以了么？ No，No，No，在微信页面中，我们还得必须引入一下微信官方的js代码

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>//将此js放到页面头部即

至此已经完美解决了自动播放的问题，其实对于不允许音频视频自动播放的问题来说不一定就是坏事，因为你想毕竟大家流量那么贵，一个音频视频动辄就几MB甚至十几MB、几十MB，自动播放流量瞬间就出去了，哭都来不及，所以如果不是必要情况还是不要自动播放的好，听不听看不看交给用户来选择。