audio标签必须显式闭合且带controls属性才显示控件；src路径需合法，autoplay须配合muted，且需监听loadedmetadata事件后再操作时长等属性。
audio 标签写法必须闭合且带 controls 才能显示控件
很多“没声音”“按钮不出现”的问题，其实不是音频没加载，而是 <audio> 标签没正确闭合或漏了 controls。浏览器（尤其是 Safari）遇到 <audio src="a.mp3"> 这种自闭合写法会直接忽略整个元素，控件自然不渲染。
正确写法必须显式闭合，并带上 controls：
<audio id="bgm" controls> <source src="music.mp3" type="audio/mpeg"> <source src="music.ogg" type="audio/ogg"> 您的浏览器不支持 audio 元素。 </audio>
-
<source>必须带type属性，Safari 和旧 Edge 不识别无type的源 - MP3 是兼容性最广的格式，
type="audio/mpeg"而不是audio/mp3（后者无效） - fallback 文字虽少用，但保留它能让控制台报错更明确（比如提示“no supported source”时知道是格式问题）
autoplay 失效不是代码错，是浏览器策略强制拦截
加了 autoplay 却没声音？这不是 bug，是 Chrome ≥66、Firefox ≥66、Safari ≥11、Edge ≥79 的默认行为——带声音的自动播放必须由用户手势触发，否则静默失败，且不抛 JS 错误。
两种合规绕过方式：
立即学习“前端免费学习笔记（深入）”；
- 加
muted：<audio autoplay muted controls>—— 桌面端基本都放行，但 iOS 微信 WebView 常仍需首次触摸才恢复音频上下文 - 等用户交互后调用
play()：button.addEventListener('click', () => audio.play().catch(e => console.warn('play blocked:', e)))
别在 DOMContentLoaded 或 setTimeout 里直接 play()，那不算用户手势。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
src 404 或 file:// 协议会导致静默失败
音频文件路径错误或本地双击 HTML 打开（file:// 协议），浏览器会拒绝加载音频资源，同时不渲染控件、不报错、不触发 error 事件——你只看到一片空白。
排查步骤：
- 打开 DevTools → Network 面板，看音频请求是否返回
200；若为404或0状态，说明路径错或服务器没配 MIME 类型 - 检查响应头
Content-Type是否为audio/mpeg（MP3）、audio/ogg（OGG）等合法类型；Nginx/Apache 需显式配置 - 开发阶段别用
file://，起个本地服务（如npx serve或 VS Code Live Server）
JavaScript 控制播放前必须等 loadedmetadata
想一上来就设置 audio.currentTime = 30 或读 audio.duration？不行。这些属性只有在元数据加载完成后才有效，否则值是 NaN 或 0，且不会报错。
正确时机是监听 loadedmetadata 事件：
const audio = document.getElementById('bgm');
audio.addEventListener('loadedmetadata', () => {
audio.currentTime = 15; // 此时才安全
console.log('时长:', audio.duration); // 才有值
});
- 别用
canplay或canplaythrough替代——它们触发更晚，且不保证元数据已就绪 - 移动端尤其敏感，iOS Safari 经常在
canplay时duration还是NaN
跨浏览器音频最麻烦的从来不是写几行 HTML，而是搞清哪个环节被浏览器策略卡住：是标签没闭合？是路径 404？是没等 loadedmetadata 就读时长？还是以为 autoplay 是“一定会响”？每个点都容易漏，且失败时几乎不报错——得靠 Network 面板和事件监听一点点对齐预期。
