audio标签需用source多格式兜底，MP3（audio/mpeg）放首位、Opus次之、WAV最后；type值须精确匹配，避免静默失败；本地开发须HTTP服务；首次播放需用户手势触发；服务器Content-Type必须正确。
只写 src 属性的 <audio></audio> 标签，在 Safari（尤其 iOS）、旧版 Firefox 和部分企业内网环境里基本等于“没写”——它不会报错，但也不会播。
必须用 <source></source> 多格式兜底，且顺序不能乱
浏览器从上到下尝试每个 <source></source>，遇到第一个 canPlayType() 返回非空字符串的就停。JS 动态插入、条件判断再加源，反而增加失败概率。
-
<source src="sound.mp3" type="audio/mpeg"></source>：放第一位，兼容最广；注意避开 VBR 编码（Firefox 可能卡住） -
<source src="sound.opus" type="audio/opus"></source>：放第二位，Chrome/Firefox 支持好、体积比 MP3 小 30%～50%，但 Safari 完全不认 -
<source src="sound.wav" type="audio/wav"></source>：放最后，仅作短提示音兜底；别用 IEEE Float 编码（Chrome 直接拒） - 别把
.ogg放最后——Firefox/Chrome 能播，Safari 会跳过，等于白写
type 值写错是静默失败主因
省略 type 或写错（比如 audio/mp3），Safari 就当没这回事，连加载都不发起，控制台也无报错。
- MP3 必须写
type="audio/mpeg"，不是audio/mp3 - OGG 必须确认是 Vorbis 编码（用
ffprobe a.ogg查，输出含Audio: vorbis），再写type="audio/ogg" - WAV 类型固定为
type="audio/wav"，仅限 PCM 编码（别用浮点）
本地开发时音频路径 404？不是路径问题，是协议问题
双击 HTML 文件走 file:// 协议，Chrome/Firefox 会直接屏蔽音频加载，Network 面板甚至不显示请求。
立即学习“前端免费学习笔记（深入）”；
- 必须起本地 HTTP 服务：
python3 -m http.server 8000，或 VS Code 安装 Live Server 插件 - 路径统一用相对 URL，如
src="audio/click.mp3"，不要写./或绝对file://路径 - 文件名禁用中文、空格、括号、emoji——
src="点击音.mp3"在 Safari 和部分 Chrome 版本会静默失败
play() 报 NotAllowedError？不是 JS 写错了，是手势没触发
现代浏览器（含微信 iOS）强制要求：首次有声播放必须由真实用户操作触发，DOMContentLoaded、setTimeout、甚至 click 冒泡到 document 都不算数。
- 删掉
autoplay属性 - 绑定明确的用户动作，例如：
button.addEventListener('click', () => audio.play().catch(e => console.warn('play rejected:', e))) - iOS 还额外要求：元素不能被
display: none、opacity: 0或视口外遮挡，否则即使点过也静音
最容易被忽略的一点：服务器返回的 Content-Type 响应头必须匹配格式。哪怕路径对、type 对、编码对，如果响应头是 text/plain 或为空，浏览器就把音频当文本扔了——连解码器都不调用。真机测试前，务必打开 Network 面板确认音频请求的 Response Headers 里 Content-Type 准确无误。
