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></source> 标签支持多格式，避免因浏览器不支持某编码导致控件灰掉

Chrome/Firefox 播放条显示异常？注意 autoplay 和用户交互限制

即使写了 controls，某些情况下播放条仍不可用：灰色、拖动失效、时间显示为 “0:00 / NaN”。这通常不是代码问题，而是浏览器策略干预。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 未触发用户手势（如点击）前，autoplay 被静音且部分媒体元数据不加载 → 播放条缺总时长
• 移动端 Safari 强制要求用户主动点击才能初始化音频上下文 → 初次加载后需点一次控件才“活”起来
• 若音频文件跨域，且服务端未返回 Access-Control-Allow-Origin，Chrome 会静默失败，控件看似正常但无法拖动

自定义播放条样式？原生控件基本不能 CSS 覆盖

想改进度条颜色、按钮图标或高度？直接对 <audio></audio> 写 CSS 几乎无效。各浏览器用私有伪元素（如 Chrome 的 ::-webkit-media-controls）封装控件，且兼容性极差。

• <audio></audio> 的控件是 UA shadow DOM，普通选择器无法穿透
• appearance: none 对播放条内部滑块（input[type="range"]）在部分浏览器中可有限定制，但整体布局无法重构
• 真要深度定制，得放弃原生控件，用 AudioContext + HTMLCanvasElement 或第三方库（如 Howler.js）自己画 UI

为什么加了 controls 还是没反应？优先排查三件事

控件不出现，别急着重写 HTML，先确认底层是否通：

• 打开浏览器开发者工具 Network 标签页，看音频文件状态码是不是 200；404 或 CORS 错误会静默禁用控件
• 右键检查 <audio></audio> 元素，确认 DOM 中确实存在 controls 属性（不是拼错成 control）
• 在控制台执行 document.querySelector('audio').duration，返回 NaN 表示元数据未加载，加 preload="metadata" 或监听 loadedmetadata 事件再操作

原生 <audio controls></audio> 的边界很清晰：它只负责把浏览器支持的解码能力转成界面，不处理网络、权限或格式兜底。复杂需求从一开始就该考虑是否绕过它。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！