所有浏览器中audio标签autoplay自动播放功能失效问题求助

核心原因 #

现在所有主流浏览器都有强制的媒体自动播放限制策略，默认禁止未经用户主动交互的非静音音频自动播放，哪怕给<audio>标签加了autoplay属性也会被拦截，这是浏览器为了避免未经用户许可的音频骚扰设计的强制规则，没有直接绕过的方法。
另外你当前的代码还存在音频MIME类型配置错误的问题：你的音频是m4a格式，但是<source>标签的type属性写的是audio/ogg，格式不匹配也会导致音频加载失败，无法正常播放。

修复步骤 #

第一步：修正音频标签配置 #

首先把<source>标签的type属性修改为匹配m4a格式的正确值：

<audio id="audio_play">
    <source src="voice/Story 2_A.m4a" type="audio/mp4" />
</audio>

第二步：选择符合浏览器策略的自动播放方案 #

你可以根据自己的业务场景选择以下任意一种方案：

• 方案1：静音自动播放（无用户交互也可触发）
  如果静音播放是可接受的，给<audio>标签添加muted属性即可正常触发自动播放，后续可以在用户交互后再取消静音：

  <audio id="audio_play" autoplay muted>
      <source src="voice/Story 2_A.m4a" type="audio/mp4" />
  </audio>
  

• 方案2：首次用户交互触发播放（无感知最稳妥）
  浏览器允许在用户主动触发的交互事件（点击、触摸、按键）回调中调用音频播放方法，你可以绑定全局一次性交互事件，只要用户点击页面任意位置就立刻播放音频，几乎不会影响用户体验。
  把以下脚本添加到页面</body>标签之前即可：

  window.addEventListener('load', () => {
    const audio = document.getElementById('audio_play');
    const interactionEvents = ['click', 'touchstart', 'keydown'];
    
    const playAudio = () => {
      audio.play().catch(err => console.log('播放拦截:', err));
      // 触发一次后移除所有监听
      interactionEvents.forEach(evt => window.removeEventListener(evt, playAudio));
    };
    
    // 绑定一次性交互监听
    interactionEvents.forEach(evt => window.addEventListener(evt, playAudio, { once: true }));
  });
  

• 方案3：前置交互页引导
  如果你的站点有前置引导页/首页，可以让用户在前置页完成点击操作后再跳转到当前音频页，此时当前域名已经有用户交互记录，非静音音频也可以正常自动播放。

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