移动端H5音频自动播放解决方案

IOS跟Android以及微信自带的浏览器为了用户体验，默认是已经屏蔽了autoplay属性。在这中情况下可以有几种曲线救国的方法。

1、触摸监听（touchstart）播放

严格意义上来讲，这不是自动播放，而是“仿真”、“模拟”、“虚假”的自动播放。原理是当用户触碰到屏幕就开始播放音频，以达到看起来好像是自动播放的假象。但如果用户就是打开页面，并没有触屏的话，那就不会播放了

<audio autoplay="autopaly" loop="loop" id="audios">
    <source src="音频地址" type="audio/mp3" />
</audio>
 
<script>
document.addEventListener('touchstart', function() {
    document.getElementById('audios').play()
})
 
</script>

2、微信浏览器自动播放方案：WeixinJSBridgeReady

微信的内置浏览器内置了一个 WeixinJSBridgeReady 事件，类似于jquery的ready方法。这个方法亲测有效（最新版本的安卓不行），能兼容大部分的移动设备。代码：

<audio autoplay="autopaly" loop="loop" id="audios">
    <source src="音频地址" type="audio/mp3" />
</audio>
 
<script>
// 使用微信自带的WeixinJSBridgeReady事件
document.addEventListener('WeixinJSBridgeReady', function() {
    document.getElementById('audios').play()
})
 
</script>

然后将两种方法写在一起，就可以实现性能比较好的自动播放交互。

<audio src="音频地址" id="audios" autoplay preload loop="loop"></audio>  
<script>
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('audios');
 
</script>