优先用 MP4/AAC（.m4a）+ OGG 双源 fallback，HTML5 才真能跨浏览器跑通；因 Safari 对 MP3 自动播放限制更严，Firefox 120+ 默认禁用 MP3 解码器，而 .m4a（AAC 编码）全平台原生支持、体积更小，.ogg（Vorbis）是 Firefox 和旧 Chrome 刚需，且必须按 、 顺序声明。
直接结论：别只转 MP3，优先用 MP4/AAC（.m4a）+ OGG 双源 fallback，HTML5 才真能跨浏览器跑通。
为什么单靠 MP3 在 Safari 和 Firefox 上会挂？
MP3 在 Safari（macOS/iOS）虽支持，但 iOS Safari 17+ 开始对自动播放限制更严；Firefox 则从 120 版本起默认禁用 MP3 解码器（需手动开启 media.mp3.enabled），实际用户几乎不会去改。而 .m4a（本质是 MP4 容器装 AAC 音频）被所有现代浏览器原生支持，解码效率高、体积比同质 MP3 小 15–20%。
-
.m4a文件必须用 AAC 编码（不是 Apple Lossless 或 ALAC），可用ffmpeg -i input.wav -c:a aac -b:a 128k output.m4a - 不要用
.mp4后缀装纯音频——部分 Android WebView 会拒绝加载，.m4a是明确语义 - Chrome/Edge 对
.m4a支持稳定，但旧版 Edge（≤18）不认，得靠.ogg兜底
OGG 不是备选，是 Firefox 和旧 Chrome 的刚需
Firefox 全系强制依赖 libvorbis，不装插件就只认 .ogg（Vorbis 编码）或 .opus；Chrome 63–89 也仅支持 OGG，不支持 Opus。别信“现在都用 Opus”的说法——国内大量企业内网仍跑着 Chrome 74。
- 生成标准 OGG：用
ffmpeg -i input.wav -c:a libvorbis -q:a 4 output.ogg（-q:a 4≈ 128kbps VBR） - 避免用
-c:a copy直拷贝，原始音频采样率/位深不匹配会导致 Firefox 静音 - 不要混用
.oga和.ogg——虽然 MIME 类型相同（audio/ogg），但 Safari 会忽略.oga
HTML
顺序决定 fallback 行为：浏览器按 .m4a 放最前，.ogg 放第二，MP3 垫底（仅照顾极老 IE11 兼容层）。
<audio controls preload="metadata"><source src="talk.m4a" type="audio/mp4"><source src="talk.ogg" type="audio/ogg"><source src="talk.mp3" type="audio/mpeg"></source></source></source></audio>
-
preload="metadata"是关键——只预加载时长、封面等元数据，不拉音频流，避免移动端误触发下载 - 别写
type="audio/aac"：audio/mp4才是规范值，audio/aac被所有浏览器无视 - 如果用 Webpack/Vite 构建，确保
.m4a和.ogg被正确识别为静态资源（检查构建后 dist 目录是否存在）
真正麻烦的不是格式转换，而是音频元数据（尤其是封面图）在不同容器里解析行为不一致——m4a 用 MP4Box 写入的封面，Firefox 会丢；ogg 里嵌封面得用 vorbiscomment，且必须是 PNG 格式。这块没银弹，得单独测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
