HTML5 audio标签需用户交互后才能播放，通过click等事件触发play()并捕获Promise拒绝；preload="auto"预加载、currentTime=0重播、muted=true绕静音限制；iOS需空play()唤醒音频上下文。
audio 标签能直接播放音效，但默认不自动触发
HTML5 的 标签本身支持加载和播放音效（如 .mp3、.wav），但浏览器策略限制了自动播放：除非用户已与页面交互（如点击、触摸），否则调用 play() 会失败并抛出 NotAllowedError。这意味着不能在页面加载完就直接 audio.play()，必须等用户主动触发。
如何用 JS 控制 audio 播放/暂停/重播
把 元素设为 preload="auto" 并隐藏控件，再用 JS 绑定事件。关键操作都通过元素的原生方法完成：
-
play()启动播放（需在用户手势上下文中调用） -
pause()暂停当前播放 -
currentTime = 0重置到开头（配合play()实现重播） -
muted = true可绕过部分静音策略（但仅适用于无声音干扰场景）
常见错误是把 play() 放在 window.onload 或 DOMContentLoaded 里——这仍属于非交互上下文，必失败。
点击按钮触发音效的最小可行代码
注意：play() 返回 Promise，务必用 .catch() 捕获拒绝；preload="auto" 提前加载音频资源，避免点击后卡顿；beep.wav 路径需确保可访问（推荐放在同目录或使用相对路径）。
立即学习“前端免费学习笔记（深入）”；
多个音效切换时要注意资源复用和内存
频繁创建/销毁 元素或反复设置 src 容易引发延迟或内存残留。更稳妥的做法是：
- 预加载所有音效到不同
元素（用preload="auto"） - 或复用同一个元素，动态改
src后调用load()再play() - 避免在循环中连续调用
play()—— 浏览器可能丢弃后续请求 - 移动端对并发音频数有限制（通常 ≤ 1），多音效需串行或混音预处理
真正容易被忽略的是：iOS Safari 对 autoplay 和 play() 的限制比桌面 Chrome 更严格，即使有用户交互，首次播放仍可能失败，建议加一次空 play() + pause() “唤醒”音频上下文。
