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

https://blog.csdn.net/PY0312/article/details/90349386

 

由于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>
 

https://www.cnblogs.com/viphchok/p/5315031.html

 

图片加载完成:

https://blog.csdn.net/hbiao68/article/details/52683322

 

posted @ 2019-08-19 21:16  小小强学习网  阅读(3318)  评论(0编辑  收藏