直接在<audio>标签中添加controls属性即可显示浏览器原生播放控件，该布尔属性只需存在即生效，正确写法为<audio controls src="music.mp3"></audio>，错误写法如controls="false"仍会显示控件。
直接在<audio>标签中添加controls属性，浏览器就会自动渲染出原生播放控件（播放/暂停、进度条、音量、全屏等），无需额外JS即可实现基础交互。
controls 属性的作用与写法
controls 是一个布尔属性，只要存在就生效，不需要赋值。它告诉浏览器显示默认的音频控制界面。
- 正确写法：
<audio controls src="music.mp3"></audio> - 错误写法：
<audio controls="false">（加了 false 仍会显示控件） - 可与其他属性共存，如
autoplay、loop、muted
提升体验的常用搭配属性
仅靠 controls 能满足基本需求，但配合其他 HTML5 音频属性可增强可用性：
-
preload="metadata"：预加载元数据（时长、封面等），让进度条和时间显示更快就绪 -
poster不适用于<audio>（仅<video>支持），但可用<img>+ CSS 模拟封面图 -
crossorigin：当音频来自跨域资源且需 JS 操作（如分析波形）时才需要
兼容性与基础样式微调
所有现代浏览器（Chrome、Firefox、Safari、Edge）均支持 <audio controls>，iOS Safari 也完全可用。虽然原生控件不可用 CSS 深度定制（如重绘播放按钮），但可通过以下方式优化视觉：
立即学习“前端免费学习笔记（深入）”；
- 用
width和height控制整体尺寸（部分浏览器支持调整高度） - 通过
display: block或margin解决默认行内对齐问题 - 配合
<figure>+<figcaption>提升语义化和可访问性
不依赖 controls 的轻量交互（可选进阶）
若需自定义 UI（如按钮组、进度拖拽、歌词同步），可省略 controls，改用 JS 操作 play()、pause()、currentTime、volume 等属性。此时需手动处理可访问性（aria-label、role="application" 等）。
原生 controls 是最简、最可靠、无障碍友好的起点——适合大多数内容型页面，比如博客配乐、播客嵌入、课件音频。
