audio标签需多格式兜底、严格声明type、配对服务器MIME类型，并在用户手势后调用play()，否则iOS静音、Android WebView不触发、Chrome本地拒绝加载、Firefox解码失败。
audio 标签写出来就能播，但“能播”不等于“各端都响”——iOS Safari 静音、Android WebView 不触发 play()、Chrome 本地双击打不开、Firefox 拒绝 MP3 VBR 编码，这些不是 bug，是浏览器按规范执行策略的结果。兼容性问题 90% 出在格式兜底、MIME 声明、触发时机三处，不是代码漏了 controls 或路径写错。
必须用 <source> 多格式兜底，且顺序和 type 要严格匹配
只写 <audio src="a.mp3"> 等于放弃兼容性。Safari（尤其 iOS）会跳过无 type 的 <source>，Firefox 对某些 MP3 编码（如 VBR）解码失败，Chrome 在 file:// 下直接拒绝加载。
-
type必须写准：audio/mpeg（不是audio/mp3），audio/ogg（确认是 Vorbis 编码，用ffprobe a.ogg查） - 顺序按浏览器支持广度排：
<source src="a.mp3" type="audio/mpeg">→<source src="a.ogg" type="audio/ogg">→ （可选）<source src="a.wav" type="audio/wav">（仅短提示音，WAV 体积大、Chrome 对 IEEE Float 编码直接拒） - 别指望 JS 动态判断：
canPlayType()返回"probably"不代表真能播，静态 fallback 更可靠
服务器 MIME 类型必须配对，本地开发不能双击 HTML
即使 <source> 写得再全，如果响应头里 Content-Type 是 text/plain 或空着，浏览器当文本扔掉，连解码器都不调。
- Apache：在
.htaccess或虚拟主机配置加AddType audio/mpeg .mp3、AddType audio/ogg .ogg - Nginx：在
types块补audio/mpeg mp3;、audio/ogg ogg; - 本地开发必须起服务：
python3 -m http.server 8000，别双击打开 ——file://协议下 Chrome/Firefox 会屏蔽音频加载 - 验证方式：打开 Network 面板，点音频请求，确认响应头
Content-Type是audio/mpeg或audio/ogg
自动播放必须由用户手势触发，autoplay muted 也有隐藏条件
写了 autoplay 却没声音？不是代码错，是浏览器策略强制拦截。控制台可能不报错，但 play() 返回被 reject 的 Promise，提示 The play() request was interrupted。
立即学习“前端免费学习笔记（深入）”；
- 带声自动播基本不可行，放弃
autoplay+ 无muted组合 - 静音自动播需同时满足：
autoplay muted（布尔属性，不写值）、volume = 0（JS 别后续改）、元素在视口内、未被display: none或opacity: 0遮挡 - 有声播放只能等用户首次交互后调用：
button.addEventListener('click', () => audio.play().catch(e => {})) - iOS Safari 更严：即使
muted，也常需用户先点过任意区域才放行，别硬刚
JS 控制播放时的时机陷阱：别在 load 或 canplay 里直接 play()
移动端（尤其 iOS）不认非手动触发上下文。在 DOMContentLoaded、window.onload 或 canplay 回调里调 play()，100% 失败。
-
currentTime必须等loadedmetadata后才能设，否则被忽略，duration也读不到 - 判断是否正在播放，别用
audio.paused === false—— 播放结束时ended为true，paused也是true，正确写法是!audio.paused && !audio.ended -
timeupdate触发太密（约 200–250ms 一次），别在里面直接更新 DOM 文本，应节流或用requestAnimationFrame批量处理
真正卡住人的从来不是“怎么写标签”，而是 type 写错一个字母、服务器 MIME 漏配一行、或在错误时机调了 play() —— 这些地方没有报错，只有沉默，排查时最容易绕远路。
