解决移动端浏览器 HTML 音频不能自动播放的三种方法

由于Android，IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验，规定不自动播放音频视频，默认屏蔽了autoplay，如果要想达到自动播放效果，需要单独处理，方法有以下几种：

---

第一种：添加控制属性（controls）

• 原理：直接使用行内式添加controls属性，显示控制按钮，让用户手动触发音频播放

<audio autoplay="autopaly" loop="loop" controls="controls" id="audios">
    <source src="music/bg.mp3" type="audio/mp3" />
</audio>

第二种：创建页面监听（WeixinJSBridgeReady）

• 原理：对页面加载进行监听，等待微信客户端页面加载完毕后，自动触发音频播放 

<audio autoplay="autopaly" loop="loop" id="audios">
    <source src="music/bg.mp3" type="audio/mp3" />
</audio>

<script>
// 将以下代码添加到js入口函数内即可
// 这里使用了微信自带的WeixinJSBridgeReady事件
document.addEventListener('WeixinJSBridgeReady', function() {
    document.getElementById('audios').play()
})

</script>

第三种：创建触摸监听（touchstart）

• 原理：当浏览器打开页面时，通过触摸屏幕事件，来触发音频播放 

<audio autoplay="autopaly" loop="loop" id="audios">
    <source src="music/bg.mp3" type="audio/mp3" />
</audio>

<script>
// 将以下代码添加到js入口函数内即可
document.addEventListener('touchstart', function() {
    document.getElementById('audios').play()
})

</script>

---

第四种：综合以上自定义Func实现交互触发play() 

• 不推荐此方法，上面三种方法足以解决日常问题

<audio src="bg.mp3" 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>

 

完结。。。。。。看完点个赞吧。。。。。。✌  ✌  ✌