html 标签需配合多源（如mp3+ogg）、正确mime类型配置（audio/mpeg、audio/ogg）、用户交互触发播放，才能解决跨浏览器兼容问题。
HTML <audio></audio> 标签本身不能“解决”兼容问题，它只是提供了一个标准化的容器；真正起作用的是你如何用它——特别是多源 fallback、MIME 配置和用户交互时机。
为什么只写一个 src 就会挂掉
浏览器对音频格式的支持是碎片化的：Safari 认 MP3，Firefox 拒绝 MP3（除非系统装了解码器），Chrome 对 WAV 有编码限制，iOS Safari 还挑 AAC-LC 编码。只写 <audio src="a.mp3"></audio>，等于把播放权全押在一种格式上。
- Firefox 或旧版 Opera 加载后静默失败，控制台可能只显示
MediaError {code: 4}（MEDIA_ERR_SRC_NOT_SUPPORTED） - 不加
controls属性，连播放按钮都不显示，用户根本不知道该点哪 - 没写
<source></source>fallback，浏览器不会自动降级，而是直接放弃
必须写的 <source></source> 组合与 type 值
最稳的双格式组合是 MP3 + OGG，但 type 值不能乱填——它不是文件后缀，而是真实 MIME 类型：
-
<source src="a.mp3" type="audio/mpeg"></source>—— 不是audio/mp3，后者无效 -
<source src="a.ogg" type="audio/ogg"></source>—— 不是audio/vorbis，也不要用.oga后缀混搭 - WAV 可作为第三备选：
<source src="a.wav" type="audio/wav"></source>，但注意 Chrome 对 IEEE Float 编码的 WAV 会拒绝解码
别信文件后缀，用 ffprobe a.mp3 看真实编码，比如输出里含 fltp（浮点 PCM）就容易被 Safari 拦住。
服务器 MIME 类型配置错，<audio></audio> 直接变哑巴
即使路径对、格式对，如果服务器返回的 Content-Type 是 text/plain 或空着，浏览器会拒绝解析音频流——这不是前端能绕过的。
- Apache：在
.htaccess或主配置里加AddType audio/mpeg .mp3、AddType audio/ogg .ogg - Nginx：在
types块里补audio/mpeg mp3;、audio/ogg ogg; - 本地开发用
file://协议？Chrome 直接禁音频加载，必须起服务：python3 -m http.server 8000
检查方法：打开开发者工具 → Network 面板 → 找音频请求 → 看 Response Headers 里的 Content-Type 是否匹配。
点了播放按钮却没声音，大概率是策略在拦你
现代浏览器（包括微信 iOS 内置浏览器）默认禁止无用户手势的有声播放，autoplay 和 muted 是两回事：
- 写了
autoplay muted，可能静音播成，但去掉muted就 100% 被拒 -
window.onload或DOMContentLoaded里调audio.play()？Promise 必 reject，控制台报"The play() request was interrupted" - 可靠触发方式：绑定一次
click或touchstart，且加{ once: true }，例如：document.body.addEventListener('click', () => audio.play().catch(() => {}), { once: true }); - iOS Safari 更苛刻：元素必须在视口内、不能
display: none、不能被opacity: 0遮挡
真正的难点不在怎么写标签，而在于理解浏览器不是“执行你的指令”，它是在执行一套策略——你得顺着它的规则去唤醒、去降级、去声明，而不是指望一个标签自动兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
