audio标签无控件显示大概率是漏写controls属性；必须显式写controls或controls=""，controls="false"会被当真值处理而错误显示控件；Network中200响应但无声需检查Content-Type是否匹配音频MIME类型。
audio 标签没控件显示，大概率是漏了 controls 属性
不写 controls，浏览器就默认隐藏所有界面元素，哪怕音频在后台播着你也看不到按钮。这不是样式被覆盖，而是规范行为。
常见错误：
-
controls="false"—— 浏览器把它当真值处理，反而强制显示控件 - 用 JS 动态设置
audio.controls = false后又想“恢复”，但属性已存在，DOM 不会自动同步回隐藏状态
可靠写法只有两种：controls（空属性）或 controls=""。别加任何值。
Network 面板显示 200 却没声音，先查 Content-Type 响应头
HTTP 状态码 200 只代表文件传到了，不代表浏览器认它为音频。如果响应头里 Content-Type 是 text/plain、application/octet-stream 或为空，Chrome/Safari/Firefox 全部静默放弃解码——连错误都不抛。
立即学习“前端免费学习笔记（深入）”；
实操确认步骤：
- 打开 DevTools → Network → 找到音频请求 → 点开 → 切到 Headers 标签页
- 检查
Response Headers中的Content-Type是否匹配后缀：audio/mpeg（MP3）、audio/ogg（OGG）、audio/wav（WAV） - Apache 用户在
.htaccess加：AddType audio/mpeg .mp3；Nginx 用户在types块加：audio/mpeg mp3;
本地双击 HTML 文件？file:// 协议下所有主流浏览器都会屏蔽音频加载，必须起 HTTP 服务，比如 python3 -m http.server 8000。
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
只写 src 属性，Safari/iOS 直接跳过加载
Safari（尤其 iOS）对 <source></source> 的 type 值极其严格：没写 type，就当不存在；写错 type（比如 audio/mp3），也直接忽略。它不会像 Chrome 那样“碰巧猜中”。
正确写法必须带标准 MIME 类型：
- MP3 →
type="audio/mpeg"（不是audio/mp3） - OGG（Vorbis 编码）→
type="audio/ogg"（用ffprobe a.ogg确认编码，别信后缀） - WAV →
type="audio/wav"（避开 IEEE Float 编码，Chrome 会拒）
顺序不能乱：<source src="a.mp3" type="audio/mpeg"></source> 必须放最前，因为浏览器按 DOM 顺序逐个尝试，遇到第一个 canPlayType() 返回非空字符串就停。
点了播放按钮 still 没反应，检查是否触发了 autoplay 策略拦截
现代浏览器（Chrome ≥70、Firefox ≥66、Safari ≥12.1）把有声播放视为高权限操作，audio.play() 必须由用户手势（click、touchstart、keydown）同步触发，且该元素需处于可见状态。
典型失败场景：
-
window.onload或DOMContentLoaded里直接调audio.play()→ 报NotAllowedError或静默失败 - 按钮绑了事件，但点击时
audio元素被display: none或visibility: hidden覆盖 - 微信 iOS 内置浏览器还要等
WeixinJSBridgeReady，否则play()返回空 Promise
最小可靠模式：button.addEventListener('click', () => audio.play().catch(e => {}), { once: true })。别封装多层 Promise，也别依赖 autoplay + muted 组合去绕——它在部分 Safari 版本仍不稳定。
