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

cuiyonglv

2025 年 05 月 11 日

14 次浏览

暂无评论

1451字数

教程

金色浪花

于 2021-07-30 10:46:03 发布

阅读量8.3k
收藏 17

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

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

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

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

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

————————————————

```
                        版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
```

原文链接：https://blog.csdn.net/baidu_36095053/article/details/119238200

最后修改：2025 年 05 月 11 日