h5 ＜audio＞音乐自动播放，谷歌禁止音乐自动播放处理方法

最新推荐文章于 2025-01-21 09:28:03 发布

原创

最新推荐文章于 2025-01-21 09:28:03 发布 · 2.7k 阅读

收录于

当前文章被以下社区和专栏收录：

在谷歌浏览器中，由于用户行为限制，h5的audio标签默认禁止音乐自动播放。常见的解决方案是在audio标签上设置muted，但在某些情况下可能无效。本文介绍了一种粗暴但有效的方法，即通过添加蒙版，让用户点击蒙版来触发音乐播放。在移动端，特别是微信内部，需要额外的处理方式。同时，提供了一段HTML和JS代码示例，展示如何通过音乐图标控制播放和关闭音乐。

html代码

<a href="javascript:;" class="musicBtn functionBtn2 on" id="mc_play">音乐开
    <audio id="music" loop="loop" autoplay="autoplay" preload="auto" muted>
        <source src="/test/bgMp3.mp3" type="audio/mpeg">
    </audio>
</a>