结论：audio标签全平台兼容必须同时满足三件事：多格式source显式声明type、autoplay与muted共存、用户交互后JS调用play()并捕获错误；缺一即在iOS、微信WebView或旧Android静默失败。

直接说结论：audio 标签想在全平台“正常兼容”，不是靠加一个属性或换一种格式就能解决的，而是必须同时满足三件事：多格式 source 显式声明 + 静音自动播放策略合规 + 用户交互后 JS 补偿触发。漏掉任何一环，iOS、微信 WebView 或旧版 Android 就会静默失败。

为什么只写 src="a.mp3" 必然失败

浏览器不会“猜”你给的文件是否能解码。Chrome 可能碰巧播，但 Safari（尤其 iOS）会跳过整个 audio 元素，不报错、不触发 canplay、duration 为 NaN，控件也不显示。

• 必须用多个 source 标签按兼容性排序：MP3 放第一，OGG 第二，WAV 或 OPUS 最后兜底
• 每个 source 必须带 type 属性：type="audio/mpeg"（不是 audio/mp3），type="audio/ogg"（Vorbis 编码），type="audio/wav"
• 服务器响应头 Content-Type 必须匹配：Apache 加 AddType audio/mpeg .mp3，Nginx 补 audio/mpeg mp3;
• 本地开发别双击 HTML —— file:// 协议下 Chrome/Firefox 直接禁音频加载，要用 python3 -m http.server

autoplay 和 muted 必须一起写，且仍不够

现代浏览器（Chrome ≥66、Firefox ≥66、Safari ≥13.1）强制要求二者共存才能静音自动播放。但写了 autoplay muted 并不等于真能响，尤其在移动端。

• iOS Safari 和微信 iOS WebView 仍要求用户至少触发一次 touchstart 或 click，否则 play() 返回被 reject 的 Promise，控制台报 DOMException: play() failed because the user didn't interact with the document first
• 微信环境还要监听 WeixinJSBridgeReady 事件，否则 play() 被忽略
• 不要用 volume=0 替代 muted —— 浏览器不认，无法绕过策略
• 多个 audio 元素需分别预激活：对每个都执行一次 play().then(() => pause())，iOS 不共享手势上下文

JS 播放必须带 .catch() 并监听真实状态

调用 audio.play() 不等于播放成功。不捕获错误，你就永远不知道是策略拦截、格式不支持，还是网络中断。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

立即学习“前端免费学习笔记（深入）”；

• 必须写 audio.play().catch(e => console.warn('play blocked:', e))，常见错误码：NotAllowedError（策略拦截）、NotSupportedError（格式不支持）、AbortError（网络断）
• 监听 error 事件可确认哪个 source 失败：audio.addEventListener('error', () => console.log(audio.error?.code))，code === 4 表示所有源均不可用
• 别依赖 canplay 判断就绪 —— 它只表示元数据加载完，音频体可能还没到；更稳的是 canplaythrough，但会等更久
• 设置播放位置要分平台：iOS 等 canplay 后再设 currentTime，Android 可直接设后 play()

preload 和 controls 的实际取舍

preload 不是“越早加载越好”，controls 也不是加了就真能用。

• preload="auto" 在移动弱网下会强制下载完整音频，拖慢首屏，iOS 直接忽略；推荐默认用 preload="metadata"（只取时长、采样率）
• controls 必须显式写，空值有效（controls 或 controls=""），但别写 controls="false" —— 浏览器当真值处理
• 原生控件样式不可靠：iOS 是深色圆角，Android 是 Material 扁平，桌面 Safari 带阴影；定制 UI 前先确认是否真需要，否则反而增加维护成本
• 不要在 autoplay 场景下设 preload="none" —— 部分 Android WebView 会直接拒绝播放

真正容易被忽略的点是：每个音频实例都要独立满足用户手势上下文，且服务器 MIME 类型和前端 type 值必须严格一致 —— 差一个字符（比如 audio/mp3 vs audio/mpeg），Safari 就静默跳过。