audio标签仅写src属性不会报错但必然失败：Firefox跳过、iOS Safari不触发canplay、Chrome可能静音；必须用<source>多格式兜底，如<source src="a.mp3" type="audio/mpeg"><source src="a.ogg" type="audio/ogg">，且type不可简写、服务器Content-Type须严格匹配。
audio 标签只写 src 属性就报错？必须用 多格式兜底
单靠 <audio src="a.mp3"> 几乎必然失败——Firefox 会跳过，iOS Safari 可能加载但不触发 canplay，Chrome 有时播一半静音。浏览器不会报错，只是沉默。
真正能落地的写法是显式声明至少两组 <source>：
<audio controls> <source src="a.mp3" type="audio/mpeg"> <source src="a.ogg" type="audio/ogg"> 您的浏览器不支持音频播放。 </audio>
-
type值不能简写：audio/mp3是错的，必须是audio/mpeg -
.ogg文件必须用 Vorbis 编码（不是 Opus），用ffprobe a.ogg确认输出含Audio: vorbis - 别加
.wav作主力 fallback：Chrome 对 IEEE Float 编码的 WAV 直接拒绝，Firefox 虽支持但体积大、加载慢
Network 面板里音频请求返回 200 却没声音？检查 Content-Type 响应头
即使路径对、格式对，如果服务器没配 MIME 类型，浏览器就把音频当纯文本扔掉——连解码器都不调用。
在 Network 面板里点开音频请求，确认响应头中 Content-Type 是 audio/mpeg、audio/ogg 或 audio/wav，不是 text/plain 或空着。
立即学习“前端免费学习笔记（深入）”；
- Apache 用户：在
.htaccess或虚拟主机配置里加AddType audio/mpeg .mp3和AddType audio/ogg .ogg - Nginx 用户：在
types块里补audio/mpeg mp3;和audio/ogg ogg; - 本地开发别双击 HTML：用
python3 -m http.server 8000启服务，file://协议下 Chrome/Firefox 会直接屏蔽音频加载
JS 调用 play() 报 The play() request was interrupted？用户手势没到位
这不是代码 bug，是浏览器策略强制拦截。现代浏览器（含微信 iOS）要求首次有声播放必须由真实用户操作触发，否则 Promise 被 reject。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
以下写法 100% 失败：
document.addEventListener('DOMContentLoaded', () => {
audio.play(); // ❌
});
// 或
window.onload = () => audio.play(); // ❌
- 可靠做法：绑定一次用户事件，比如
button.addEventListener('click', () => audio.play().catch(e => {}), { once: true }) - iOS Safari 更严：元素必须在视口内、未被
display: none或opacity: 0遮挡，否则点过也静音 - 想静音自动播？
autoplay muted在多数桌面浏览器可行；想有声自动播？只能等用户第一次交互后再调一次play()
控制台报 MEDIA_ERR_SRC_NOT_SUPPORTED (code: 4)？格式被判死刑
这个错误不是路径错、不是网络挂，是浏览器打开文件后当场判了死刑——解码器不认这个编码。
常见诱因：
- Safari 拒绝某些 MP3：用
ffprobe your-audio.mp3查 Stream 行，若含fltp（浮点）就容易失败 - Firefox 不支持旧版 MP3 解码器，却能稳定播
.ogg（Vorbis） - Chrome 对
.wav支持有限，尤其带 IEEE Float 编码的
最稳的兼容组合仍是 <source src="a.mp3" type="audio/mpeg"> + <source src="a.ogg" type="audio/ogg">，顺序不能颠倒——MP3 兼容性最广，放第一位。
别指望用 canPlayType() 动态判断再插入 source，它返回的 "probably" 不等于“一定能播”，静态 fallback 更可靠。
