audio标签必须加controls属性才可见，否则在移动端无UI；多格式source需按兼容性排序并显式声明type；iOS Safari autoplay需用户手势触发且首次播放须静音；本地file://协议下音频被禁用，须用HTTP服务。
audio 标签必须带 controls 属性才可见
不加 controls，<audio> 在移动端就是隐形的——它可能已加载、甚至能用 JS 播放，但用户完全没入口触发。iOS Safari 和 Android Chrome 都不会渲染任何 UI，连 loading 状态都不显示。
常见误写：<audio controls="true"> 是合法但无效的（布尔属性不写值才生效）；正确写法只有 <audio controls>。
如果想隐藏控件、自定义 UI，可以去掉 controls，但必须自己监听 click、检查 audio.paused、手动调 play() / pause()，否则交互链就断了。
多格式 <source> 必须按顺序 + 显式声明 type
只写一个 src 属性，在 iOS Safari 或旧版 Android WebView 上基本播不了。浏览器不会“猜”你给的 MP3 文件是不是真含 AAC 封装，它只认 type 值匹配。
立即学习“前端免费学习笔记（深入）”；
正确写法是：
<audio controls> <source src="sound.mp3" type="audio/mpeg"> <source src="sound.ogg" type="audio/ogg"> <source src="sound.wav" type="audio/wav"> 您的浏览器不支持音频播放。 </audio>
注意三点：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
type="audio/mpeg"不是audio/mp3（后者 Safari 直接跳过） - MP3 放最前——兼容性最广，Chrome/Firefox/Safari/Edge 全支持
- OGG 放第二——Firefox/Chrome 可靠，Safari 完全不支持，所以不能只靠它
iOS Safari 的 autoplay 限制比你想的更严
加了 autoplay muted ≠ 自动响。iOS WebKit 要求两个条件同时满足：页面已有用户手势（比如点过任意地方），且该 <audio> 元素此前从未成功播放过。
实操建议：
- 放弃纯 HTML 的
autoplay，改用 JS 绑定用户事件，例如button.addEventListener('click', () => audio.play()) - 首次播放务必加
muted="true"，等play()Promise resolve 后再设audio.muted = false（iOS 对“静音后开声”更宽容） - 别在
canplay或loadeddata回调里直接play()，iOS 不认这种上下文
本地开发时 file:// 协议会直接禁用 audio
用 VS Code Live Server 或双击 HTML 打开，走的是 file:// 协议。Chrome 从很早开始就禁止所有自动播放行为，连 play() 都抛 DOMException: play() failed because the user didn't interact with the document first。
解决办法只有一个：起个本地 HTTP 服务。
- Python 3：
python3 -m http.server 8000 - Node.js：
npx http-server - VS Code 插件：Live Server（它起的就是
http://）
不换协议，Network 面板里看请求全是 200，但音频就是不动——这不是代码问题，是浏览器策略硬限制。
真正容易被忽略的点是：MIME 类型必须由服务器返回，不是你写了 type="audio/mpeg" 就算数。GitHub Pages、Netlify 默认配对了常见类型，但 Python http.server 不配，得手动加响应头或换工具。
