controls属性缺失不会导致音乐无法播放，但会使用户无法触发播放；它仅控制原生播放控件是否显示，不控制播放能力本身。
controls 属性缺失不会直接导致“音乐无法播放”，但会让用户完全无法触发播放——它不控制能否播，只控制有没有按钮可点。
为什么加了 src 却看不到播放控件
这是最常见误判：以为“没声音=没播”，实际是控件根本没渲染出来，用户连点哪儿都不知道。
-
controls是布尔属性，只看是否存在，不接受任何值；写成controls=""或controls="false"都无效，浏览器仍当它存在 - 删掉整个
controls属性，控件就彻底消失；加回去，原生 UI 立刻出现（前提是路径、格式、网络都 OK） - Vue/React 中用
:controls="showControls"时，确保showControls是true/false，不是字符串"true"
加了 controls 还是没反应？先查这三处
控件显示了但点不动，大概率不是代码问题，而是环境或加载异常。
- CSS 隐藏了：检查是否有
audio { display: none; }或visibility: hidden，哪怕只作用于父容器也会影响点击穿透 - JS 动态关掉了：
audio.controls = false执行后没重置，尤其在组件销毁/重挂载后容易漏恢复 - iOS Safari 限制：控件能显示，但进度条拖拽、音量滑块灰掉不可操作——这是系统级限制，改不了，别白调样式
controls 和 autoplay/muted 的关系别搞混
它们各管各的：controls 只决定 UI 是否可见；autoplay 和 muted 决定是否自动开始、是否静音。
立即学习“前端免费学习笔记（深入）”；
- 可以同时写
autoplay muted controls：页面一开就加载元数据、静音自动播，用户点一次音量图标就能开声 - 去掉
muted单写autoplay，Chrome/Safari 直接拦截，控件点了也没反应 -
loop开启后，currentTime不会归零，JS 读出来仍是结束时刻值（比如 180 秒音频播完后audio.currentTime === 180）
真正容易被忽略的是：没有 controls 时，你写的 JS 播放逻辑可能根本没机会执行——因为用户不知道该点哪，页面上什么都没有。调试阶段千万别省这个属性，它是验证路径、格式、MIME 类型是否正确的最快方式。
