浏览器自动播放策略限制首次播放需用户手势同步触发，异步调用会报NotAllowedError；短音效应使用new Audio()动态创建避免堆积；移动端需满足preload、src预设及touchstart/click触发条件。
直接用 <audio> 标签 + play() 就能触发音效，但多数失败不是因为写法错，而是被浏览器的自动播放策略拦住了——用户没和页面交互过，play() 会静默拒绝。
为什么点击按钮后 play() 报错 "NotAllowedError"
这是现代浏览器（Chrome、Edge、Safari）的强制限制：音频首次播放必须由用户手势（click/touchstart）同步触发，不能异步延迟（比如 setTimeout）、不能在 load 事件里调、也不能靠 Promise.then 链式调用绕开。
- 错误写法：
button.addEventListener('click', () => setTimeout(() => audio.play(), 100))→ 触发时已脱离用户手势上下文 - 正确写法：必须在事件回调函数体内**直接调用**
audio.play()，中间不能有异步跳转 - 如果音效要复用多次，首次调用成功后，后续
play()就不再受限制（哪怕在定时器里）
如何让短音效（如按钮点击声）不卡顿、不堆积
短音效最怕连续猛点导致多个实例同时播放，听起来像破音或延迟。用 Audio 构造函数动态创建是最稳妥的方式，每次播放都新建一个干净实例：
function playClickSound() {
const audio = new Audio('sounds/click.mp3');
audio.volume = 0.6;
audio.play().catch(e => console.warn('音效播放被拒:', e));
}- 不用提前声明全局
<audio>元素，避免currentTime = 0重置不及时的问题 -
new Audio()创建的实例播完自动释放，不会残留占用 - MP3 文件务必是“无头”格式（即不含 ID3v2 标签），否则 Safari 可能加载失败；可用 ffmpeg 去标签：
ffmpeg -i in.mp3 -c copy -map_metadata -1 out.mp3
移动端点击没声音？检查这三个硬性条件
iOS 和 Android 对自动播放限制更严，即使用户点了按钮，也得满足以下全部条件才能响：
立即学习“前端免费学习笔记（深入）”；
- 音频文件必须是
preload="auto"或至少preload="metadata"（放在<audio>标签上，new Audio()不支持该属性） - 首次播放前，
audio.src必须已赋值（不能在play()前一秒才设） - 不能在
touchend里调play()—— iOS 要求必须是touchstart或click（且元素需有cursor: pointer或role="button"才能触发 click）
要不要用 Web Audio API？看这三点再决定
对纯按钮音效来说，<audio> + new Audio() 已足够。Web Audio API 的优势只在以下场景才真正必要：
- 需要毫秒级精确调度（比如节奏游戏里音效必须严格对齐 16 分音符）
- 要实时加混响、低通滤波等效果（
<audio>不支持） - 同一时刻要叠加 >5 个不同音效（
<audio>在低端安卓机上容易爆内存或卡顿）
一旦引入 Web Audio API，就得自己管理 AudioContext 生命周期、处理 suspend/resume、兼容旧版 Safari 的 webkitAudioContext —— 多数按钮音效真没必要卷这个。
