controls是布尔属性，存在即显示播放控件；默认含播放/暂停、进度条、时间显示、音量调节等；不加则无界面，仅支持js控制；原生样式不可跨浏览器定制。
在 HTML 中，<audio></audio> 标签的 controls 属性是一个布尔属性，只要存在（哪怕没赋值），浏览器就会自动显示播放控制条，包括播放/暂停按钮、进度条、音量调节和时间显示等。
controls 属性的基本写法
只需在 <audio></audio> 标签中添加 controls 即可，不需要写成 controls="true" 或 controls="controls" —— 浏览器只认它是否存在。
<audio src="music.mp3" controls></audio>- 更规范的写法（推荐包含
preload和备用格式）：<audio controls preload="metadata"><br><source src="song.ogg" type="audio/ogg"><br><source src="song.mp3" type="audio/mpeg"><br> 您的浏览器不支持音频播放。<br></source></source></audio>
controls 显示哪些控件？
不同浏览器默认提供的控件略有差异，但通常包含：
- 播放 / 暂停按钮
- 进度滑块（可拖动调整播放位置）
- 当前时间与总时长显示（如 1:23 / 3:45）
- 音量调节滑块（部分移动端可能隐藏，点击后展开）
- 静音开关（常与音量控件合并）
- 全屏按钮（仅当音频为视频上下文或支持时出现，纯 audio 一般无此按钮）
不加 controls 会怎样？
如果不加 controls，<audio></audio> 标签默认是“静默”的 —— 它会加载并能通过 JavaScript 控制播放，但界面上什么也不显示。用户无法直接操作，除非你用 JS 自行实现 UI。
例如：<audio src="alert.wav"></audio> 页面上完全不可见，但可通过 document.querySelector('audio').play() 触发播放。
自定义样式时注意兼容性
原生 controls 的外观由浏览器决定，不能用 CSS 直接修改内部按钮结构（如进度条 thumb）。但你可以：
- 用
::-webkit-media-controls等私有伪元素微调 Chrome/Edge 的样式（不跨浏览器） - 隐藏原生 controls（
controls="false"不合法，应直接移除属性），再用 HTML + JS + CSS 手动构建控件 - 使用第三方库（如 Howler.js、 Plyr）获得统一且可定制的播放器界面
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
