浏览器禁止在非用户交互事件（如focus）中播放音频，必须在click、keydown（Enter）等真实用户操作后调用play()并捕获Promise拒绝；audio需preload且src路径合法、Content-Type正确；静音autoplay仅作兜底且兼容性差。

focus 事件触发 audio.play() 为什么常失败

直接在 input 的 focus 事件里调用 audio.play()，大概率会抛出 DOMException: play() failed because the user didn't interact with the document first。这不是代码写错了，而是浏览器策略强制要求：**有声媒体的首次播放必须发生在用户显式交互（如 click、touchstart）之后**。而 focus 可由 JS 主动触发（比如 input.focus()），不被视为可信交互源。

正确做法：focus + 用户手势后延迟调用 play()

必须把播放逻辑“挂”在真实用户操作之后。常见可靠路径是：先让 input 获得焦点（可用 autofocus 或 JS 调用），再等用户**点击/按回车/触屏确认**，此时再调用 play()。

• 不要监听 focus，改监听 input 的 click 或 keydown（过滤 Enter）
• audio 元素需提前加载，推荐用 preload="metadata" 或 preload="auto"
• play() 返回 Promise，必须 .catch() 捕获拒绝，否则静默失败
• 示例：

  <input type="text" id="search">
  <audio id="beep" src="beep.mp3" preload="metadata"></audio>
  
  <script>
  const input = document.getElementById('search');
  const audio = document.getElementById('beep');
  
  input.addEventListener('click', () => {
    audio.play().catch(e => console.warn('播放被阻止:', e));
  });
  input.addEventListener('keydown', e => {
    if (e.key === 'Enter') {
      audio.play().catch(e => console.warn('播放被阻止:', e));
    }
  });
  </script>

想“聚焦即播”？只能静音 autoplay + 后续解除

如果 UI 确实需要输入框获得焦点时立刻发声（比如表单校验提示音），唯一绕过策略的方式是：让 audio **初始静音播放**，再在焦点后立即取消静音并播放。但注意：这仅适用于极短提示音，且需满足两个硬条件：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• audio 标签必须带 muted 和 autoplay 属性（<audio muted autoplay src="...">）
• 解除静音和播放必须在同一个用户交互回调中完成（不能跨 setTimeout 或 Promise.then）
• 部分 iOS Safari 仍可能拦截，不建议用于关键反馈

音频文件与路径容易被忽略的坑

即使逻辑写对，audio 加载失败也会导致 play() 报错或无声。排查优先看这三点：

立即学习“前端免费学习笔记（深入）”；

• src 必须是 HTTP(S) 协议路径，file:// 或本地绝对路径（如 C:\audio.mp3）在现代浏览器中一律无效
• 服务端必须返回正确的 Content-Type 响应头，MP3 是 audio/mpeg，OGG 是 audio/ogg；GitHub Pages、Python http.server 默认不设，需额外配置
• 用 <source> 多格式兜底时，type 属性不能省——Safari 会跳过没写 type 的 <source>，哪怕文件本身能打开

实际项目里，最稳的方案不是“聚焦即播”，而是把音频作为**用户主动行为的反馈**：点击搜索框、按下回车、切换选项卡——这些才是浏览器认可的播放许可时刻。强行绕过只会增加兼容性负担和调试成本。