最常见原因是标签未闭合、src路径404或浏览器未加载资源导致静默不渲染控件；需检查三件事：确认写法为而非自闭合、Network面板中文件状态码为200且MIME类型正确（如audio/mpeg）、避免file://协议，改用本地HTTP服务。
为什么加了 controls 还是没播放按钮
最常见原因是标签未闭合、src 路径 404 或浏览器根本没加载到资源——它不会报错，只是静默不渲染控件。
检查三件事：
- 确认写了 <audio controls></audio>，不是自闭合写法 <audio controls></audio>（部分浏览器不识别）
- 打开开发者工具的 Network 面板，看音频文件返回状态码是不是 200，MIME 类型是否匹配（如 audio/mpeg）
- 双击 HTML 文件直接打开时，file:// 协议下 Chrome/Firefox 会拒绝加载音频，必须用本地服务（比如 python -m http.server）
controls 属性必须显式写出，不能省略
不加 controls，音频就“隐身”：没有界面、无法点击、autoplay 和 loop 都无效——不是静音，是彻底不可操作。
最小可用结构只有这一种写法：<audio src="./audio/intro.mp3" controls></audio>
注意：
- src 必须是相对路径（如 "./audio/intro.mp3"）或绝对 URL（如 "https://example.com/sound.ogg"）
- 不能只写 "intro.mp3"，也不能用 file:/// 开头的本地路径
- 文件名大小写必须完全一致，Linux 服务器和 macOS 对大小写敏感
多格式回退时 <source></source> 的 type 必须写对
只放一个 .mp3 文件，Firefox 就播不了；只放 .ogg，Safari 可能卡住。浏览器靠 type 属性判断能否解码，写错就跳过该源。
正确写法示例：<audio controls></audio> <source src="song.mp3" type="audio/mpeg"></source> <source src="song.ogg" type="audio/ogg"></source> 您的浏览器不支持 audio 元素。
关键点：
- type="audio/mp3" 是无效值，必须是 "audio/mpeg"
- type="audio/ogg" 不可简写为 "ogg" 或 "audio/oga"
- fallback 文本（如“您的浏览器不支持…”）必须放在所有 <source></source> 之后、 之前
JS 控制播放时控件不同步的典型原因
去掉 controls 改用 JS 自定义按钮后，经常出现“点了播放但按钮没变暂停”“进度条不动”——问题不在逻辑，而在状态监听时机不对。
立即学习“前端免费学习笔记（深入）”；
常见坑：
- 用 audio.paused === false 判断是否正在播放，但播放结束时 ended 为 true，paused 仍为 false，导致误判
- 更可靠的是：!audio.paused && !audio.ended
- timeupdate 事件每 200–250ms 触发一次，直接在里面更新 DOM 文本会卡顿，应节流或用 requestAnimationFrame 包裹
- 设置 currentTime 前没等 loadedmetadata 事件，可能读不到 duration，设值也无效
真正难的不是写对标签，而是理解浏览器什么时候愿意把音频交给你控制——路径、MIME、用户交互、加载状态，漏掉任一环，控件就“消失”得理直气壮。
