只写src属性音频在safari或firefox不播放，是因为浏览器严格按type声明的mime类型匹配解码，而非依赖文件后缀；漏写type会导致safari直接跳过source、firefox不触发canplay事件，且服务器content-type不匹配时整条source被忽略。
为什么只写 src 属性音频在 Safari 或 Firefox 里不播
浏览器不是靠文件后缀猜格式，而是严格按 type 值匹配 MIME 类型。漏写 type，Safari（尤其 iOS）直接跳过该 <source></source>，Firefox 可能连 canplay 事件都不触发，控制台也静默——你看到的“没声音”，其实是“没加载”。
必须用 <source></source> 显式声明，且至少覆盖两类：
-
<source src="a.mp3" type="audio/mpeg"></source>—— MP3 是兼容性最广的底线 -
<source src="a.ogg" type="audio/ogg"></source>—— Ogg 必须是 Vorbis 编码（ffprobe a.ogg确认含Audio: vorbis），不能是 Opus
别加 .wav 作 fallback：Chrome 对 IEEE Float 编码的 WAV 直接拒绝，Firefox 虽支持但体积大、加载慢。
type="audio/mp3" 为什么是错的
所有主流浏览器（Chrome、Safari、Firefox、Edge）只认标准 MIME 类型，audio/mp3 是常见手误，实际应为：
- MP3 →
audio/mpeg - OGG (Vorbis) →
audio/ogg - WebM (Opus) →
audio/webm（仅限现代浏览器，iOS Safari 不支持）
写错 type 的后果不是报错，而是整条 <source></source> 被忽略——Network 面板里能看到请求发出去了，但响应头 Content-Type 若不匹配，浏览器压根不进解码流程。
服务器没配 MIME 类型，前端再怎么写都没用
即使 <source></source> 全对、路径全对，如果服务器返回的响应头里 Content-Type 是 text/plain 或空着，浏览器就当它是个普通文本文件扔掉。
- Apache：
AddType audio/mpeg .mp3、AddType audio/ogg .ogg加到.htaccess或虚拟主机配置 - Nginx：在
types块里补audio/mpeg mp3;、audio/ogg ogg; - 本地开发：别双击 HTML 文件用
file://协议打开，Chrome/Firefox 会屏蔽音频加载；改用python3 -m http.server 8000启服务
检查方式：打开开发者工具 → Network 面板 → 找音频请求 → 看 Response Headers 里的 Content-Type 是否准确对应后缀和编码。
移动端反复 reload 后音频断掉，怎么保状态
页面刷新 = <audio></audio> 实例销毁，时间点、播放状态全丢。靠 localStorage 同步 currentTime 和 paused 状态，看似可行，实则易丢（比如用户强制关闭标签页、崩溃、或跨域 iframe 场景下 localStorage 不可用）。
真正稳定的解法是服务端兜底 + 客户端轻量协同：
- 首次加载时，服务端下发一个带时间戳的音频 URL（如
bgm.mp3?t=1623456789），避免 CDN 缓存干扰 - 客户端在
beforeunload里存一次currentTime，但只作为 fallback；主逻辑依赖服务端 session 记录最后播放位置 - 不要在多页间靠 JS 传递
Audio实例——它无法序列化，也不跨上下文
最常被忽略的一点：iOS Safari 的 Audio 实例在后台标签页中会被系统强制 suspend，即使你存了时间点，切回来时也得重新调 play() 并捕获 Promise rejection。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
