html 标签需用 多格式 fallback，按 mp3→ogg 顺序并显式声明 type，firefox 不支持 mp3 解码器，safari 不支持 ogg；autoplay 必须加 muted 且依赖用户手势激活，ios safari 要求 https 和 preload="metadata"。
HTML <audio></audio> 标签原生支持 MP3、OGG、WAV 三种格式，但浏览器解码能力不一致，只提供单一格式大概率会失效。
为什么只写 src="xxx.mp3" 在 Firefox 或旧 Edge 上播不了
Firefox（直到最新版）默认不内置 MP3 解码器，它依赖系统或开源编解码库；而 Safari 不支持 OGG；IE9+ 才开始支持 WAV。这意味着：
- 仅用
<audio src="song.mp3"></audio>：Chrome / Safari / Edge 可播，Firefox 大概率静音或报错DOMException: Unable to decode audio data - 仅用
<audio src="song.ogg"></audio>：Firefox / Chrome / Opera 可播，Safari 直接跳过、不加载 - WAV 文件体积大、无压缩，现代项目基本不用，仅作兜底或调试用
<source></source> 多格式 fallback 的正确写法
浏览器按 <source></source> 出现顺序尝试解码，遇到第一个能支持的就停，后续忽略。关键点：
- 必须为每个
<source></source>显式声明type属性，例如type="audio/mpeg"，不能省略——部分浏览器（如 Safari）不解析无type的<source></source> - 推荐顺序：
.mp3放第一（覆盖最多设备），.ogg放第二（保 Firefox 和隐私浏览器） - 不要把
.wav放前面，否则 Chrome 会优先加载这个大文件，拖慢首帧
<audio controls><source src="music.mp3" type="audio/mpeg"><source src="music.ogg" type="audio/ogg"> 您的浏览器不支持音频播放。 </source></source></audio>
autoplay 要加 muted 才生效
所有主流浏览器（Chrome 66+、Safari 11+、Edge 79+）都实施了“有声自动播放拦截策略”，即：
-
autoplay单独存在 → 被静音或完全阻止 - 必须同时带
muted属性，play()才可能成功触发 - 即使加了
muted，首次播放仍需用户手势（click/touchstart）激活媒体上下文，iOS Safari 尤其严格
所以真实可用的自动播放写法是：<audio autoplay muted controls></audio>，且 JS 中调用 play() 前确保已响应过用户交互。
移动端和 iOS 的特殊限制
iOS Safari 是最严的环境，容易被忽略的细节：
- 音频文件必须托管在 HTTPS 或
localhost下，file://协议直接拒绝加载 - 即使有
muted，首次play()仍可能失败，建议先用muted=true播一次，再unmute并play() -
preload="none"在移动端常导致点击后长时间白屏，推荐设为preload="metadata"（只加载头信息，快且省流量）
兼容性不是靠堆格式解决的，而是靠顺序 + type + muted + 用户手势这四点卡死。漏掉任意一个，都可能在某个设备上彻底无声。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
