controls属性必须显式存在才能显示控件，错误写法如controls="false"或controls=""会导致失效；autoplay需配合muted才大概率生效，且受用户交互限制。
controls 属性必须显式写上，否则用户看不到播放/暂停按钮——哪怕你用 JavaScript 控制了 play()，没这个属性，用户也点不了。
为什么加了 controls 却没显示控件？
最常见原因是：属性写法错误或被覆盖。HTML 中 controls 是布尔属性，只存在即生效，不能写成 controls="false" 或 controls=""（空字符串在部分解析器里会被当 true）。也不要在 JS 里误设 audio.controls = false 后又忘了设回 true。
另外注意 iOS Safari 的限制：即使写了 controls，进度条拖拽、音量调节可能被禁用，这是系统级策略，改不了。
- ✅ 正确写法：
<audio controls src="sound.mp3"></audio> - ❌ 错误写法：
<audio controls="false" ...></audio>、<audio controls="" ...></audio> - ⚠️ 注意：Vue/React 等框架中若用绑定语法如
:controls="showControls"，确保值是布尔型true/false，别传字符串
autoplay 为什么经常不响？
不是代码写错了，是浏览器策略卡住了。Chrome、Edge、Firefox 要求 autoplay 必须配合 muted 才大概率成功；iOS Safari 和多数安卓 Chrome 则直接禁止非静音自动播放，除非用户已点击过页面任意位置。
所以单独写 autoplay 几乎等于摆设；真正可用的组合是：
-
<audio autoplay muted controls src="bgm.mp3"></audio>（静音自动播 + 用户可手动取消静音） - 或用 JS 监听
click后再调用audio.play()，此时不受静音限制 -
preload="metadata"配合autoplay可加快就绪速度，但不解决策略拦截
loop 和 muted 的实际行为差异
loop 很直白：播完立刻重头，但要注意它不会重置 currentTime，JS 读取时仍是结束时刻值（比如 120 秒音频播完后 audio.currentTime === 120，不是 0）。
muted 是个“开关型”属性：设为 true 会强制静音，且优先级高于 volume 设置；但它不影响 play() 调用是否被允许——静音只是绕过自动播放限制的手段，不是音量控制的替代品。
- 想默认静音但允许用户点开声音？用
muted+controls - 想限制最大音量？得靠 JS 动态改
volume，muted不提供数值调节 -
loop在无controls时照样生效，只是用户察觉不到循环点
真正容易被忽略的是 preload 和跨域问题：preload="none" 能省流量，但首次 play() 会有明显延迟；如果音频在 CDN 上且没配 crossorigin，某些浏览器会静默失败，连 error 事件都不触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
