controls 属性必须显式写在 标签中才显示播放控件，它是布尔属性，仅依赖存在与否，不接受字符串值；错误写法如 controls="" 或 controls="false" 语义不符，框架中需确保绑定布尔值。
controls 属性必须显式写在 <audio></audio> 标签里，不写就看不到播放按钮——哪怕你用 JS 调了 play()，用户也点不了。
controls 是布尔属性，不是开关配置项
它只认“存在与否”，不接受字符串值或赋值逻辑。浏览器解析时，只要标签里出现了 controls 这个词，就显示控件；没出现，就不显示。
- ✅ 正确：
<audio src="song.mp3" controls></audio> - ❌ 错误：
<audio src="song.mp3" controls=""></audio>（空字符串在部分解析器中仍被当 true，但语义错误） - ❌ 错误：
<audio src="song.mp3" controls="false"></audio>（写了就生效，“false”只是个无意义的字符串） - ⚠️ 框架中注意：Vue/React 里用
:controls="showControls"时，确保showControls是布尔值true或false，别传字符串"true"或"false"
加了 controls 却没显示控件？先查这三处
常见原因不是浏览器不支持，而是被覆盖、误删或环境限制。
- 检查是否被 CSS 隐藏了：
audio { display: none; }或visibility: hidden会让控件不可见 - 检查 JS 是否动态关掉了：
audio.controls = false后没再设回true，尤其在组件销毁/重渲染后容易漏恢复 - iOS Safari 下控件会显示，但进度条拖拽、音量滑块可能灰掉——这是系统级限制，HTML 和 JS 都改不了，不用白调样式
controls 和 autoplay/muted 的关系很直接，但行为不直觉
它们可以共存，但作用域完全不同：controls 只管 UI 显示，autoplay 和 muted 管播放策略。用户第一次点击播放按钮，就完成了“用户交互”，之后所有 play() 调用都解除静音限制。
- ✅ 推荐组合：
<audio src="bgm.mp3" controls autoplay muted></audio>（静音自动播 + 用户可点音量图标开声） - ⚠️ 注意：
loop生效时，currentTime不会重置为 0，JS 读出来仍是结束时刻值（比如 180 秒音频播完后audio.currentTime === 180） - ⚠️
muted是硬静音开关，优先级高于volume；设muted = true后改volume = 1也没声音
不加 controls 就等于放弃用户控制权
没有 controls，音频元素对用户完全不可见、不可操作。即使你用 JS 绑定 click 调 play()，用户也不知道该点哪——除非你自己画一套 UI。
- 调试阶段千万别省
controls：它是验证音频路径、格式、MIME 类型是否正确的最快方式 - 真要隐藏控件？用
controls+ CSS：audio { width: 0; height: 0; opacity: 0; position: absolute; }，比不写更可控 - 跨域音频（如 CDN）若没配
crossorigin，某些浏览器会静默失败，连error事件都不触发——这时有controls才能第一时间发现“按钮点了没反应”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
