controls属性必须显式写在audio标签中才显示控件，它是布尔属性，只认存在与否；controls="false"会被当作真值处理，仍显示控件，漏写则完全不显示。

audio 标签不显示 controls 控件？检查 controls 属性写法

浏览器不会把 controls="false" 当作关闭控件，而是当成真值处理——它等价于 controls，所以控件照样出现。更糟的是，如果漏写这个属性，控件直接消失，用户连播放按钮都看不到。

• 必须显式写 controls 或 controls=""（空字符串也生效）
• 别写 controls="false"、controls="0" 或 controls=false（JS 中赋值除外）
• 如果用 JS 动态控制，设为 audio.controls = true 才生效；设 false 会移除控件，但无法再通过 HTML 属性恢复

音频文件加载了但没声音，可能是 MIME 类型错配

服务器返回的 Content-Type 响应头和 <source></source> 的 type 属性必须严格匹配，否则 Safari 和 Firefox 会静默跳过该源，不报错也不加载。

• .mp3 对应 type="audio/mpeg"，不是 audio/mp3
• .ogg 对应 type="audio/ogg"，且推荐用 Vorbis 编码（ffprobe a.ogg 看输出是否含 Audio: vorbis）
• Apache 配置加：AddType audio/mpeg .mp3、AddType audio/ogg .ogg
• Nginx 配置加：audio/mpeg mp3;、audio/ogg ogg;
• 本地开发别双击 HTML，用 python3 -m http.server 8000 启服务，否则 file:// 协议下 Chrome 直接禁音频

多个 source 标签按顺序尝试，但顺序错了就白写

浏览器从上到下逐个尝试 <source></source>，遇到第一个能解码的就停。顺序不合理会导致兼容性倒退：

Article To Html

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

下载

• MP3 放第一位：Chrome/Firefox/Edge 普遍支持，解码快，适合首载
• OGG 放第二位：覆盖老版 Firefox 和部分 Linux 浏览器
• WAV 或 OPUS 放最后：WAV 兼容 Safari（尤其 iOS），但体积大；OPUS 文件小、Chrome/Firefox 已支持，适合内网或可控环境
• 别把 WAV 放前面——它加载慢，且 Chrome 对 IEEE Float 编码的 WAV 会直接拒绝

JS 调用 play() 仍失败？错误类型决定修复方向

audio.play() 返回 Promise，拒绝原因不同，处理方式完全不同：

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

• NotAllowedError：用户未交互就调用，或未满足 muted + autoplay 组合；修复是绑定点击事件后再播
• NotSupportedError：所有 <source></source> 的 type 都不被当前浏览器支持；检查 MIME 和编码
• AbortError：网络中断或资源被取消；需监听 error 事件并读取 audio.error?.code（4 表示全部 source 失败）
• 别依赖 canplay 事件判断“能播了”——它只表示元数据就绪，音频体可能还没到；真正稳妥的是 canplaythrough 或监听 playing

真实项目里最常被忽略的，是服务器 MIME 配置和 type 值的一致性。写对了标签、加全了格式，却因为响应头是 text/plain，整段音频在 Safari 里彻底隐身。