解决移动端浏览器 HTML 音频不能自动播放

·
日常 no tag October 24, 2020

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

创建触摸监听(touchstart)

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

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

创建页面监听(WeixinJSBridgeReady)

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

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

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

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

DEMO(方式1):https://joke.typeboom.club/
本人已上传bilibili专栏,UID:157363943

  • 使用Cloudflare Workers搭建静态网页
  • PacificRack曝出惊人Bug,技术水准再刷下限
取消回复

说点什么?

© 2023 Type boom
友链&RSS