全平台高兼容HTML音频需声明方式、加载策略与播放时机协同：必须用多个source按type排序（audio/mpeg优先），服务器Content-Type须匹配，禁用file://协议，autoplay需muted且依赖首次真实交互，play()须捕获Promise错误。
HTML 音频想“全平台高兼容”，不是转换格式就能解决的——关键在声明方式、加载策略和播放时机三者协同。只改文件后缀或用 FFmpeg 转一次 MP3，iOS 和微信 WebView 依然静默失败。
为什么单写 src="a.mp3" 在 iOS 上根本不动
浏览器不会猜测你给的文件能不能播。Safari（尤其是 iOS）遇到没显式声明 type 的 audio 标签，直接跳过整个元素：不触发 canplay，duration 是 NaN，控件也不渲染，控制台还不报错。
- 必须用多个
source标签按兼容性排序：type="audio/mpeg"（MP3）放第一，type="audio/ogg"（Vorbis）第二，type="audio/wav"或type="audio/opus"最后兜底 - 每个
source的type值必须准确：audio/mp3是错的，得写audio/mpeg - 服务器返回的
Content-Type必须匹配，Nginx 配置要加types { audio/mpeg mp3; }，Apache 加AddType audio/mpeg .mp3 - 本地双击 HTML 打开（
file://协议）时 Chrome/Firefox 直接禁音频加载，必须起本地服务，比如python3 -m http.server
autoplay 和 muted 一起写，还是播不了？
现代浏览器（Chrome ≥66、Safari ≥13.1）强制要求二者共存才能尝试静音自动播放，但写了 ≠ 播了。尤其在 iOS Safari 和微信 iOS WebView 中，仍需用户至少一次真实交互（click 或 touchstart）才能解锁 play() 权限。
- 微信环境必须监听
WeixinJSBridgeReady，否则play()调用被忽略 - 不能用
volume=0替代muted——浏览器不认，策略不通过 - 多个
audio元素需分别预激活：对每个都执行一次play().then(() => pause())，iOS 不共享手势上下文
JS 调用 play() 必须带 .catch()，否则永远不知道卡在哪
play() 返回 Promise，失败时不会抛异常，而是 reject。不捕获，就只能干等、刷新、怀疑人生。
- 必须写
audio.play().catch(e => console.warn('play blocked:', e)) - 常见错误码：
NotAllowedError（策略拦截）、NotSupportedError（格式不支持）、AbortError（网络中断） - 监听
error事件可定位具体哪个source失败：audio.addEventListener('error', () => console.log('source failed:', audio.currentSrc))
最容易被忽略的是：**iOS 对首个用户交互的判定极严格——必须是 click 或 touchstart，且目标元素不能是 display: none 或 pointer-events: none；如果播放按钮是 JS 动态插入的，还要确保它在交互发生前已挂载到 DOM 中。**
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
