如何在HTML中实现音频自动播放？Chrome浏览器新方案求助

Chrome的自动播放政策一直在收紧，目前核心规则是：只有静音媒体，或者媒体播放触发自用户主动交互（点击、触摸等）时，才允许自动播放。以下是当前有效的解决办法：

一、静音自动播放（最稳妥且合规的方案） #

Chrome允许静音状态的媒体自动启动播放，无需用户提前交互。实现代码如下：

<audio autoplay muted loop>
  <source src="your-audio-file.mp3" type="audio/mpeg">
</audio>

如果需要播放声音，可以后续通过用户交互解除静音，比如添加一个开启声音的按钮：

<button id="unmuteBtn">开启音频</button>
<audio id="bgAudio" autoplay muted loop>
  <source src="your-audio-file.mp3" type="audio/mpeg">
</audio>
<script>
  document.getElementById('unmuteBtn').addEventListener('click', () => {
    const audio = document.getElementById('bgAudio');
    audio.muted = false;
  });
</script>

二、基于用户交互触发非静音播放 #

如果必须非静音自动播放，只能在用户与页面发生第一次交互后触发。这种方式完全符合Chrome政策，不会被拦截：

<audio id="myAudio">
  <source src="your-audio-file.mp3" type="audio/mpeg">
</audio>
<script>
  function startAudio() {
    const audio = document.getElementById('myAudio');
    audio.play().catch(err => {
      console.error('播放失败:', err);
    });
    // 移除监听，避免重复触发
    document.removeEventListener('click', startAudio);
    document.removeEventListener('touchstart', startAudio);
  }
  // 监听用户的点击或触摸交互
  document.addEventListener('click', startAudio);
  document.addEventListener('touchstart', startAudio);
</script>

三、检查站点权限设置 #

如果上述方案仍不生效，可能是用户给当前站点设置了禁止声音的权限：

• 点击地址栏左侧的锁形图标
• 在弹出的菜单中找到「声音」选项，设置为「允许」
• 刷新页面后重试

四、避开常见误区 #

• 不要单独使用autoplay属性（非静音），现在Chrome会直接拦截这类请求
• 不要尝试模拟用户交互的 hack 手段，这类方法会被浏览器检测并拦截，且政策更新后会失效
• 确保音频文件路径正确，避免因文件不存在导致播放失败

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