浏览器禁止未经用户交互自动播放音频，必须在用户点击等手势上下文中调用play()；预加载audio元素，用mp3/wav格式，短时高频音效，手动监听ended事件循环播放，注意移动端限制及路径/CORS校验。
用 Audio 元素播放报警音，但别指望自动响铃
浏览器禁止未经用户交互就播放音频——这是硬性限制，不是代码写错。哪怕你写了 autoplay，现代 Chrome/Firefox/Safari 都会静音或直接阻断。真正能“紧急触发”的前提是：页面已获得用户焦点，且至少有一次合法的用户操作（比如点击按钮、按键、触摸）。
所以实际做法是：把报警音加载好，等事件触发时再调用 play()。
- 用
<audio id="alarm">预加载音频，preload="auto"提前缓冲，避免点击后卡顿 - 音频格式优先选
.mp3或.wav（兼容性最好），避免.ogg在部分 iOS 版本上不支持 - 别用
loop属性控制连续报警——它可能在某些安卓 WebView 里失效；改用ended事件手动重播更可靠
JavaScript 触发播放必须在用户手势上下文中
所谓“用户手势上下文”，是指事件回调函数必须直接由 click、touchstart、keydown（且非 meta/ctrl 等修饰键）等原生事件触发。不能包一层 setTimeout，不能放在 fetch 回调里，也不能通过 dispatchEvent 模拟点击。
- ✅ 正确：
button.addEventListener('click', () => audio.play()) - ❌ 错误：
fetch('/api/alarm').then(() => audio.play())—— 浏览器判定为非手势上下文，静音 - ⚠️ 注意：iOS Safari 要求音频元素在 DOM 中且已
load完成，否则play()会抛NotAllowedError
报警音效本身要短、高频、有辨识度
别用 30 秒长的警笛 MP3。真实场景下，用户需要的是“立刻感知异常”，不是听完整段音效。推荐使用 1–3 秒的 .wav 文件（无压缩、启动快），采样率 44.1kHz，单声道即可。
立即学习“前端免费学习笔记（深入）”；
- 可用 Audacity 导出为
WAV (Microsoft) signed 16-bit PCM，体积小、解码快 - 避免使用带元数据（如 ID3）的 MP3，某些旧版 Android WebView 会因解析失败导致
play()拒绝执行 - 如果需循环报警，监听
audio.onended = () => audio.currentTime = 0; audio.play();，比纯loop更可控
移动端和 WebView 的额外限制
Android WebView 和 iOS WKWebView 对音频策略更严。即使用户点过一次，下次页面刷新后仍需重新“激活”音频上下文。有些 Hybrid 容器还会全局禁用 Web Audio API，导致 Audio 元素也受限。
- 测试时务必在真机上验证，模拟器/桌面浏览器结果不可靠
- 若嵌入 App，建议让客户端提供原生报警接口（如
bridge.playAlarm()），绕过 Web 音频限制 - 备用方案：用 CSS 动画 + 高对比色闪烁（如红黑交替）配合文字提示，确保信息可达性不依赖声音
最常被忽略的一点：报警音文件路径 404 或 CORS 报错时，play() 不会报明显错误，而是静默失败。务必检查 Network 面板确认音频是否成功加载，再排查播放逻辑。
