HTML中audio标签autoplay自动播放随机失效问题求助

• 你使用的Chrome、Opera均为Chromium内核浏览器，这类浏览器默认禁用非静音、非用户交互触发的音视频自动播放，属于浏览器为避免扰民设置的默认安全策略，你当前的audio标签未加静音属性、也没有绑定用户交互触发逻辑，不符合自动播放规则，被拦截属于预期行为。
• 概率性播放的原因：如果你的站点媒体参与度指数（MEI，浏览器统计的用户在当前站点的音视频播放行为数据）刚好处于阈值附近，或者音频资源加载时机刚好卡在用户首次页面交互之前/之后，就会出现有时候能播、有时候被拦截的情况；同时你同时发起两个非静音audio的自动播放请求，浏览器也可能随机拦截其中一部分。

1. 绑定用户交互触发播放（最稳定，无兼容性问题） #

把音频播放逻辑绑定到点击、触摸等用户主动操作事件上，只要是用户主动触发的事件回调里调用play()，浏览器不会拦截，示例代码：

<!-- 页面上添加引导按钮 -->
<button id="enableAudioBtn">点击开启声音</button>

<audio id="audio1" src="video-copy.mp3"></audio>
<audio id="audio2" src="test5.mp3"></audio>

<script>
document.querySelector('#enableAudioBtn').addEventListener('click', () => {
  document.querySelector('#audio1').play()
  document.querySelector('#audio2').play()
})
</script>

2. 静音自动播放+手动取消静音 #

如果需要进入页面立刻启动播放，给audio标签添加muted属性，和你的video标签逻辑一致，再添加取消静音的入口即可：

<audio autoplay muted> 
    <source src="video-copy.mp3" />
</audio>
<audio autoplay muted> 
    <source src="test5.mp3" />
</audio>
<button id="unmuteBtn">开启声音</button>

<script>
document.querySelector('#unmuteBtn').addEventListener('click', () => {
  document.querySelectorAll('audio').forEach(audio => {
    audio.muted = false
  })
})
</script>

静音状态的媒体自动播放不受浏览器策略限制，可100%自启。

3. 添加异常兜底逻辑 #

不管用哪种方案，都可以添加播放异常捕获，避免控制台报错，也可针对拦截情况做引导：

document.querySelectorAll('audio').forEach(async audio => {
  try {
    await audio.play()
  } catch (err) {
    // 播放被拦截，这里可以弹出提示引导用户点击页面开启声音
    console.log('自动播放被拦截，请点击页面开启声音')
  }
})

内容的提问来源于stack exchange，提问作者JayDev