加controls属性即可显示原生控件；不显示主因是src路径错误、MIME类型未正确返回或file://协议被浏览器拦截，而非语法问题。
直接用 <audio> 标签加 controls 属性就能显示原生播放控件，不需要 JavaScript 或额外库。
为什么加了 controls 却没显示按钮？
常见原因不是语法写错，而是资源加载失败或浏览器策略拦截：
-
src路径错误（比如相对路径写成./audio.mp3但实际在/static/audio.mp3） - 音频文件 MIME 类型未被服务器正确返回（Nginx/Apache 需配置
.mp3对应audio/mpeg） - 本地双击 HTML 文件打开时，Chrome 会因安全策略拒绝加载
file://下的音频（改用http-server或 Live Server 启动） - 部分 iOS Safari 要求用户手势触发（如点击按钮后才调用
play()），但controls自带的播放按钮本身不受限
controls 属性要不要写值？
不用。它是布尔属性，只存在即生效：
<audio controls src="song.mp3"></audio>
写成 controls="controls" 或 controls="" 也合法，但冗余；写成 controls="false" 不会禁用——它只看是否存在，不解析值。
想自定义样式但保留原生功能，能只隐藏控件再自己画按钮吗？
可以，但得手动绑定事件和状态同步，容易漏掉细节：
- 去掉
controls，用play()/pause()控制播放 - 监听
timeupdate事件更新进度条，否则拖拽无效 -
volume、muted、loop等状态需自行维护并反映到 UI - 移动端要处理
webkit-playsinline和playsinline才能在页面内播放（否则跳全屏）
除非设计强约束，否则优先用原生 controls —— 它自动适配系统无障碍、键盘操作（空格/回车播放）、快捷键（k 播放暂停）。
真正麻烦的不是加 controls，而是音频路径、MIME 类型、跨域头（CORS）这三处静默失败点，调试时先开 Network 面板看请求是否 200、响应头有没有 Content-Type。
