登录页直接嵌入音频需用标签并配controls才可见控件；autoplay须配合muted才可能静音自动播，有声播放必须在用户点击等手势后调用play()，推荐用于表单失败提示音，配合preload="auto"和多格式确保兼容与响应速度。

登录页面直接嵌入音频用 <audio></audio> 标签就行

不需要 JavaScript 也能播放，但得注意浏览器策略：现代浏览器默认禁止自动播放带声音的音频。如果想一打开登录页就响，大概率会被静音或阻塞。

• autoplay 属性单独使用基本无效，必须配合 muted（静音）才可能触发自动播放
• 用户首次交互（比如点击输入框、按钮）后，才能调用 play() 播放有声音频
• 推荐把音频作为可选提示音，比如提交失败时播放 error.mp3，而不是页面加载就强播

怎么让登录失败时播放提示音

这是更合理也更可靠的用法：监听表单提交失败事件，然后调用音频对象的 play() 方法。关键点是音频资源要提前加载好，避免点击后卡顿。

• 在 HTML 底部或 里加：

  <audio id="errorSound" preload="auto">
    <source src="sound/error.mp3" type="audio/mpeg">
  </audio>

• JS 中（例如 fetch 失败后）：

  document.getElementById('errorSound').play().catch(e => console.log('播放被阻止:', e));

• preload="auto" 能提升响应速度，但别用 preload="metadata" 或不写——否则第一次播放会明显延迟

Chrome/Firefox 里 play() 报错 “NotAllowedError” 怎么办

这是最常遇到的坑：浏览器认为当前上下文没获得用户手势授权，拒绝播放。不是代码写错了，是调用时机不对。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 确保 play() 是在真实用户事件回调里执行的，比如 click、keydown、input，不能在 setTimeout 或 API 回调里直接调
• 如果是在表单 submit 事件里调，要先 event.preventDefault()，否则页面跳转会导致音频中断
• 可以加兜底逻辑：

  const audio = document.getElementById('errorSound');
  audio.play().catch(() => {
    // 播放失败时，至少给个视觉反馈
    showErrorToast('登录失败');
  });

音频文件路径和格式怎么选才兼容

别只丢一个 .mp3 进去。不同浏览器对编码支持有差异，尤其 Safari 对某些 MP3 的 AAC 封装不友好。

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

• 提供至少两种格式：.mp3（通用） + .ogg（Firefox 更稳），用多个 <source></source> 让浏览器自己选
• 路径建议用相对路径，比如 ./audio/login-fail.ogg；避免绝对路径或跨域资源，否则控制台报 CORS 错误
• 文件别太大，提示音控制在 100KB 以内，否则 preload="auto" 反而拖慢首屏

实际用的时候，多数人卡在“为什么点按钮没声音”，其实八成是没走用户手势链路，或者音频还没加载完就调了 play()。把 preload 和事件绑定时机盯住，问题就解决大半。