在使用 html 中 audio 标签给页面加背景音乐时,使用以下代码:

<audio id="backGround" autoplay ="autoplay" loop="loop" preload ="auto" src ="music/background.mp3">你的浏览器不支持audio标签</audio>

用 chorme 打开页面加载完成后没有自动播放,移动端需做页面交互后才可播放没有达到想要的效果。

通过百度后,找到三种解决方法:

# 第一种:添加控制属性(controls)

原理:直接使用行内式添加 controls 属性,显示控制按钮,让用户手动触发音频播放

<audio id="backGround" autoplay ="autoplay" loop="loop" controls="controls" preload ="auto" src ="music/background.mp3">你的浏览器不支持audio标签</audio>

# 第二种:创建页面监听(WeixinJSBridgeReady)

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

<audio id="backGround" autoplay ="autoplay" loop="loop" controls="controls" preload ="auto" src ="music/background.mp3">你的浏览器不支持audio标签</audio>
 
<script>
// 将以下代码添加到 js 入口函数内即可
// 这里使用了微信自带的 WeixinJSBridgeReady 事件
document.addEventListener('WeixinJSBridgeReady', function() {
    document.getElementById('backGround').play()
})
 
</script>

# 第三种:创建触摸监听(touchstart)

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

<audio id="backGround" autoplay ="autoplay" loop="loop" controls="controls" preload ="auto" src ="music/background.mp3">你的浏览器不支持audio标签</audio>
 
<script>
// 将以下代码添加到 js 入口函数内即可
document.addEventListener('touchstart', function() {
    document.getElementById('autoplay').play()
})
 
</script>

参考:
(https://blog.csdn.net/PY0312/article/details/90349386)