复用单个 Audio 实例并在用户手势内同步调用 play() 是唯一稳定跨平台方案；需避免反复 new Audio()、autoplay 及在非直接事件回调中调用 play()。
用单个 Audio 实例复用 + 用户手势内同步调 play()，是目前唯一能稳定跨平台（含 iOS Safari、Android Chrome、桌面 Edge/Firefox）的方案。别碰 <audio> 标签配 autoplay 或反复 new Audio()，90% 的静音/报错/点两次才响都源于此。
为什么 new Audio() 必须复用，不能每次点击都新建
高频点击（比如键盘、游戏按钮）下，反复 new Audio('sound.mp3') 会触发重复网络请求、解码、内存分配——弱网设备上明显卡顿，低端 Android 可能直接卡死。更关键的是，iOS Safari 对未激活上下文的每个新实例都单独校验播放权限，首次失败后后续实例也容易连锁失败。
- 提前声明：
const clickSound = new Audio('click.mp3'); - 每次点击只做两件事：
clickSound.currentTime = 0;然后clickSound.play().catch(...) - 不要在
DOMContentLoaded里预设src后调load()——new Audio()不支持load()方法，那是<audio>标签的
iOS Safari 播放失败的三个硬性条件必须同时满足
不是“点了没声音”，而是控制台明确报 NotAllowedError: play() failed because the user didn't interact with the document first？说明你漏了其中一条：
- 触发
play()的函数，必须在click或touchstart事件回调的**最内层作用域**里，不能包在setTimeout、Promise.then、fetch().then里 - 音频文件必须已加载就绪；小体积（.mp3 最稳；避免
.wav（体积大、无压缩、iOS 解码慢） - 首次播放前，需用一个极短静音文件（如 0.1 秒
silence.mp3）占位激活上下文：页面加载完立刻new Audio('silence.mp3').play().then(() => this.pause())，后续真实音效才能成功
如何让表格行、按钮、任意元素都能播音效而不冲突
别给每个 <tr> 或 <div> 塞一个 <audio> 标签——DOM 膨胀、资源浪费、状态混乱。统一用一个全局 Audio 实例，靠数据属性分发音效：
立即学习“前端免费学习笔记（深入）”；
- HTML 中写：
<button data-audio-src="beep.mp3">确认</button>、<tr data-audio-src="select.wav"></tr> - JS 用事件委托监听：
document.addEventListener('click', e => { const btn = e.target.closest('[data-audio-src]'); if (btn) { audio.src = btn.dataset.audioSrc; audio.currentTime = 0; audio.play().catch(() => {}); } }); - 移动端注意：加
role="button"或cursor: pointer，否则某些 WebView 不认该元素为可交互目标，手势上下文不成立
真正难的不是写那几行 JS，而是理解「浏览器只认第一次用户手势」这个前提——所有播放逻辑必须围绕它组织，而不是绕开它。静音文件占位、实例复用、事件委托、路径预检，每一步都是为了不让那个 play() 调用掉进策略黑洞里。
