必须先用户交互再播放音频，否则被浏览器静音阻止；需复用单个Audio实例、提供多格式fallback、避免异步延迟，并注意iOS Safari的同步调用限制。
点击按钮触发 Audio 播放时被浏览器静音阻止
现代浏览器（Chrome、Edge、Safari）默认禁止自动播放音频，除非用户已与页面产生「交互」——比如点击过某个元素。单纯用 new Audio() 初始化后立刻 play()，会抛出 NotAllowedError: play() failed because user gesture is required。
解决办法不是绕过策略，而是严格遵循「先交互、再播放」的时机链：
- 把
Audio实例创建放在按钮点击事件内，或至少在点击后才调用play() - 避免在
DOMContentLoaded或load时预加载并尝试播放 - 如果需复用音频，可在点击后首次调用
play()，之后用audio.play()/audio.pause()控制
示例关键片段：
<button id="playBtn">播放背景音乐</button>
<script>
const btn = document.getElementById('playBtn');
let audio = null;
btn.addEventListener('click', () => {
if (!audio) {
audio = new Audio('bgm.mp3'); // 路径需相对或绝对有效
audio.loop = true;
}
audio.play().catch(e => console.warn('播放失败:', e.name)); // 必须加 catch，否则报错不提示
});
</script>
Audio 加载失败或格式兼容性问题
不是所有浏览器都支持 .mp3 或 .wav —— 尤其 Safari 对 .wav 支持更稳，但文件体积大；Chrome 对 .mp3 友好，但部分老旧安卓 WebView 可能不认 mpeg 编码。
立即学习“前端免费学习笔记（深入）”；
稳妥做法是提供多源 fallback：
- 优先用
.mp3（压缩比高、兼容广） - 加一个
.ogg或.wav作为备选（Audio不支持<source></source>，得手动检测） - 检查
audio.readyState是否为4（HAVE_ENOUGH_DATA），再调play() - 监听
error事件，而非只靠catch：有些加载失败不会进 Promise reject
简版检测逻辑：
audio.addEventListener('error', () => {
console.error('音频加载失败，请检查路径或格式');
});
audio.addEventListener('canplay', () => {
if (audio.readyState >= 2) audio.play();
});
重复点击导致多个实例同时播放
每次点击都 new Audio()，旧实例没 pause() 或 unload()，就会叠加播放、音量变大、内存泄漏。
必须统一管理单个实例：
- 声明一个全局或模块级
let audio = null，点击时复用 - 点击前先
audio?.pause()，再audio.currentTime = 0重置位置 - 若要切换不同 BGM，可先
audio.src = 'new.mp3'，再play()（注意：改src会重置readyState）
别写成这样（错误）：
btn.addEventListener('click', () => {
const a = new Audio('a.mp3'); // 每次新建 → 内存涨 + 声音叠
a.play();
});
移动端 iOS Safari 的特殊限制
iOS Safari 要求音频必须在用户手势（touchend/click）同步上下文中播放，且不能有异步延迟（比如 setTimeout、Promise.then 里调 play() 就失效）。
这意味着：
- 不能在 fetch 加载完音频后再
play()（网络请求是异步的） - 不能用
async/await等待任何操作后再播 - 最好用
fetch().then(() => audio.play())是无效的——得在 click 回调最顶层直接play() - 如果音频资源较大，可提前用
preload="auto"的<audio></audio>标签加载，但播放仍需用户点击触发
所以最省心的做法：音频文件尽量小（
真要动态加载，得用 AudioContext + fetch + decodeAudioData，但那是另一套复杂流程，普通 BGM 场景没必要。
