audio标签不显示控件是因为缺少controls属性；必须显式添加controls才能渲染播放条、音量滑块和时间轴，且需配合preload="metadata"确保元数据加载，避免NaN显示。
audio 标签不显示控件？检查 controls 属性是否漏写
HTML 音频默认不显示任何界面，必须显式加 controls 属性才会渲染播放条、音量滑块和时间轴。常见错误是只写了 <audio src="xxx.mp3"></audio>，结果页面一片空白——不是没加载，是根本没启用控件。
正确写法：
<audio controls src="song.mp3"></audio>或者更规范地补上
preload 和备用格式：
-
controls是唯一触发 UI 渲染的必需属性 -
preload="metadata"可让播放条提前显示总时长（否则可能初始为“NaN”） - 建议包裹
<source>标签支持多格式，避免因浏览器不支持某编码导致控件灰掉
Chrome/Firefox 播放条显示异常？注意 autoplay 和用户交互限制
即使写了 controls，某些情况下播放条仍不可用：灰色、拖动失效、时间显示为 “0:00 / NaN”。这通常不是代码问题，而是浏览器策略干预。
- 未触发用户手势（如点击）前，
autoplay被静音且部分媒体元数据不加载 → 播放条缺总时长 - 移动端 Safari 强制要求用户主动点击才能初始化音频上下文 → 初次加载后需点一次控件才“活”起来
- 若音频文件跨域，且服务端未返回
Access-Control-Allow-Origin，Chrome 会静默失败，控件看似正常但无法拖动
自定义播放条样式？原生控件基本不能 CSS 覆盖
想改进度条颜色、按钮图标或高度？直接对 <audio> 写 CSS 几乎无效。各浏览器用私有伪元素（如 Chrome 的 ::-webkit-media-controls）封装控件，且兼容性极差。
立即学习“前端免费学习笔记（深入）”；
-
<audio>的控件是 UA shadow DOM，普通选择器无法穿透 -
appearance: none对播放条内部滑块（input[type="range"]）在部分浏览器中可有限定制，但整体布局无法重构 - 真要深度定制，得放弃原生控件，用
AudioContext+HTMLCanvasElement或第三方库（如 Howler.js）自己画 UI
为什么加了 controls 还是没反应？优先排查三件事
控件不出现，别急着重写 HTML，先确认底层是否通：
- 打开浏览器开发者工具 Network 标签页，看音频文件状态码是不是 200；404 或 CORS 错误会静默禁用控件
- 右键检查
<audio>元素，确认 DOM 中确实存在controls属性（不是拼错成control） - 在控制台执行
document.querySelector('audio').duration，返回NaN表示元数据未加载，加preload="metadata"或监听loadedmetadata事件再操作
原生 <audio controls> 的边界很清晰：它只负责把浏览器支持的解码能力转成界面，不处理网络、权限或格式兜底。复杂需求从一开始就该考虑是否绕过它。
