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

博主： cuiyonglv
发布时间：2025 年 05 月 11 日
1685 次浏览
暂无评论
1451字数
分类：教程

金色浪花

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

阅读量8.3k
收藏 17

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

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

<source src="音频地址" type="audio/mp3" />

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

<source src="音频地址" type="audio/mp3" />

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

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

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

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

最后修改：2025 年 05 月 11 日

© 允许规范转载

如果觉得我的文章对你有用，请随意赞赏

发表评论
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱

地址

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

cuiyonglv • 2025 年 05 月 11 日

<p>金色浪花</p><p>于 2021-07-30 10:46:03 发布</p><p>阅读量8.3k<br>收藏 17</p><p>点赞数 4<br>版权<br>IOS跟Android以及微信自带的浏览器为了用户体验，默认是已经屏蔽了autoplay属性。在这中情况下可以有几种曲线救国的方法。</p><p>1、触摸监听（touchstart）播放<br>严格意义上来讲，这不是自动播放，而是“仿真”、“模拟”、“虚假”的自动播放。原理是当用户触碰到屏幕就开始播放音频，以达到看起来好像是自动播放的假象。但如果用户就是打开页面，并没有触屏的话，那就不会播放了</p><p><audio autoplay="autopaly" loop="loop" id="audios"></p><pre><code>&lt;source src=&quot;音频地址&quot; type=&quot;audio/mp3&quot; /&gt;</code></pre><p></audio></p><script>
document.addEventListener('touchstart', function() {
    document.getElementById('audios').play()
})
 
</script><p>2、微信浏览器自动播放方案：WeixinJSBridgeReady<br>微信的内置浏览器内置了一个 WeixinJSBridgeReady 事件，类似于jquery的ready方法。这个方法亲测有效（最新版本的安卓不行），能兼容大部分的移动设备。代码：</p><p><audio autoplay="autopaly" loop="loop" id="audios"></p><pre><code>&lt;source src=&quot;音频地址&quot; type=&quot;audio/mp3&quot; /&gt;</code></pre><p></audio></p><script>
// 使用微信自带的WeixinJSBridgeReady事件
document.addEventListener('WeixinJSBridgeReady', function() {
    document.getElementById('audios').play()
})
 
</script><p>然后将两种方法写在一起，就可以实现性能比较好的自动播放交互。</p><p><audio src="音频地址" id="audios" autoplay preload loop="loop"></audio></p><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><p>————————————————</p><pre><code>                        版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。</code></pre><p>原文链接：<span class="external-link"><a class="no-external-link" href="https://blog.csdn.net/baidu_36095053/article/details/119238200" target="_blank"><i data-feather="external-link"></i>https://blog.csdn.net/baidu_36095053/article/details/119238200</a></span></p>