手机音频播放失败主因是用户手势未触发且 mime 类型不匹配：必须用 touchend/click 同步调用 play()，且 source 的 type 与服务器 content-type 严格一致（如 audio/mpeg）。
为什么手机上 audio.play() 总是静默失败
不是代码漏了 src，也不是路径写错——90% 的情况是浏览器根本没把播放请求当回事。iOS Safari 和 Android Chrome 都强制执行「用户手势驱动」策略：没有真实的点击、触摸或键盘事件触发，play() 会直接被拒绝，Promise 被 reject，控制台只报 The play() request was interrupted 或 NotAllowedError，不抛异常也不提示。连 DOMContentLoaded 里调用都 100% 失败。
必须用用户点击触发，但不能随便绑 click
绑定事件本身不难，难点在于上下文是否“干净”。浏览器只认同步、顶层、无异步延迟的调用链。
- ✅ 正确：
button.addEventListener('click', () => audio.play().catch(e => {})) - ❌ 错误：
button.addEventListener('click', () => setTimeout(() => audio.play(), 0))（异步打断手势上下文） - ❌ 错误：
button.addEventListener('click', async () => { await fetch('/sound.mp3'); audio.play(); })（await 中断同步流） - 移动端建议用
touchend替代click，避免 300ms 延迟导致手势失效
格式和 MIME 类型错一个，就等于没写
手机浏览器比桌面更较真。只写 <source src="a.mp3"></source>，iOS Safari 会跳过；写了 type="audio/mp3"，仍是错的——必须是 type="audio/mpeg"。Ogg 文件必须用 Vorbis 编码（不是 Opus），用 ffprobe a.ogg 确认输出含 Audio: vorbis。
- 服务器必须返回正确
Content-Type：Apache 加AddType audio/mpeg .mp3，Nginx 在types块加audio/mpeg mp3; - 本地开发别双击 HTML，用
python3 -m http.server 8000启服务，否则file://协议下音频加载直接被屏蔽 - Network 面板里点音频请求，看响应头
Content-Type是否匹配后缀和编码
iOS 上 display: none 或滚动后播放会失效
iOS Safari 对音频元素状态极其敏感：如果 audio 元素被 display: none、opacity: 0、或不在当前视口内，即使用户点过，play() 也可能静音或失败。
- 不要隐藏
audio标签，可用position: absolute; left: -9999px;视觉隐藏但保留可访问性 - 避免在页面滚动或切 Tab 后尝试恢复播放——iOS 不允许 JS 主动 resume，只能等下次用户点击
- 首次播放务必在用户点击后立即执行，不要等
canplay或loadeddata回调再调play()
play() 必须落在用户真实触摸/点击的同步回调里；所有 source 必须带准确 type 且服务端返回对应 Content-Type。少一个，手机上就大概率听不见。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
