Audio实例不能在页面加载时立即play()，必须由用户点击等交互触发，否则浏览器抛出NotAllowedError；需用<source>声明正确MIME类型并确保服务器返回匹配Content-Type，复用单个实例更可靠。
Audio 实例不能在页面加载时立即 play()
浏览器（Chrome、Safari、Edge）会在 DOMContentLoaded 或 window.onload 里拒绝 play() 调用，抛出 NotAllowedError: play() failed because user gesture is required。这不是代码写错了，是策略强制拦截。
必须把首次 play() 放在用户真实交互之后——比如按钮点击、触摸、空格键按下。哪怕只是创建一个空 Audio 并立刻 play().catch(() => {}) 再 pause()，也能“唤醒”媒体上下文，后续所有音频都可自由控制。
- ✅ 正确做法：在
button.addEventListener('click', () => { new Audio().play() })中触发 - ❌ 错误做法：在
document.addEventListener('DOMContentLoaded', () => { const a = new Audio(); a.play(); }) - iOS Safari 更严：元素必须在视口内、未被
display: none或opacity: 0遮挡，否则点也白点
多格式 fallback 必须按顺序写对 type 属性
只写 <audio src="bg.mp3"> 等于放弃兼容性。Firefox 可能跳过，Safari 可能静音，iOS WebView 直接不触发 canplay —— 浏览器不会报错，只会沉默。
正确写法是用 <source> 显式声明 MIME 类型，且顺序按支持广度降序排列：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<audio> <source src="bg.mp3" type="audio/mpeg"> <source src="bg.m4a" type="audio/mp4"> </audio>
-
type="audio/mpeg"才对，type="audio/mp3"是无效值 - MP3 + M4A 是当前最稳组合，覆盖 99% 有效流量；OGG 在 Safari 中完全不可用
- WAV 体积大、无压缩，仅适合几秒提示音，别当背景音乐 fallback
服务器必须返回正确的 Content-Type 响应头
即使 <source> 写得再全，如果服务器返回 Content-Type: text/plain 或压根没设，浏览器就当普通文本扔掉，连解码器都不调用。
检查方式：打开开发者工具 → Network → 点击音频请求 → 查看 Response Headers 中的 Content-Type 是否匹配后缀与编码。
- Apache：在
.htaccess加AddType audio/mpeg .mp3和AddType audio/mp4 .m4a - Nginx：在
types块中加audio/mpeg mp3;和audio/mp4 m4a; - 本地开发别双击 HTML 文件：用
python3 -m http.server 8000启服务，file://协议下 Chrome/Firefox 会直接屏蔽音频加载
不要依赖 preload="auto" 或 canPlayType() 做播放决策
preload="auto" 在 iOS 上基本无效，且可能触发无意义预加载、浪费带宽；canPlayType() 返回值模糊（如 "probably" 不等于“一定能播”），不如静态 fallback 可靠。
真正关键的是：确保首次 play() 发生在用户手势之后，并复用单个 Audio 实例（避免频繁创建销毁）。
- 小游戏背景音乐建议：用户点击「开始」后，用一个空
Audio调一次play()激活上下文，再加载并播放实际音频 - 复用实例示例：
const bgm = new Audio(); bgm.src = 'bg.mp3'; ... bgm.play();，后续直接bgm.play()/bgm.pause() - 注意：iOS 对
currentTime设置极敏感，未触发canplay前设位置会失败
