移除controls后需用JS手动控制播放并自定义UI：必须在用户手势中调用play()，监听loadedmetadata再读取duration，用position: absolute隐藏audio元素且保留交互。
audio标签加了controls但不想显示默认控件
直接删掉 controls 属性是最简单的办法，但这样用户完全没法播放/暂停/调节音量。真要隐藏控件又保留可操作性，得用 CSS 隐藏 + 自己写 JS 控制逻辑。
常见错误是只加 display: none 或 visibility: hidden 到 <audio></audio> 元素本身——这会让整个音频实例不可交互，play() 可能静默失败（尤其在移动端），且部分浏览器会直接禁用自动播放策略。
- 正确做法：保留
<audio controls></audio>，再用 CSS 选中内部 shadow DOM 的控件区域（但多数浏览器不支持稳定选择）→ 实际不可靠 - 更稳妥路径：移除
controls，用document.querySelector('audio').play()等 API 手动控制，配合自定义按钮 - 必须加
preload="metadata"或preload="auto"，否则首次play()可能因未加载元数据而报错DOMException: The element has no supported sources
用JS控制audio播放却提示NotAllowedError
这是现代浏览器的自动播放策略限制：非用户手势（如 click、touchend）触发的 play() 会被拒绝，错误信息通常是 NotAllowedError: play() failed because the user didn't interact with the document first。
- 必须把
play()放在显式的用户事件回调里，比如button.addEventListener('click', () => audio.play()) - 不能在
DOMContentLoaded、setTimeout或Promise.then中调用，哪怕延迟 0ms 也不行 - 移动端尤其严格：iOS Safari 要求事件必须是
touchend，且不能有preventDefault()干扰；Android Chrome 对click接受度稍高，但仍建议用touchstart+click双绑定 -
audio.muted = true后首次play()通常能绕过限制（即使后续再取消静音）
隐藏controls后如何实现进度条和音量调节
浏览器原生控件被移除后，所有 UI 都得自己实现，核心依赖 currentTime、duration、volume 这三个属性和对应事件。
立即学习“前端免费学习笔记（深入）”；
- 进度条更新靠监听
timeupdate事件：audio.addEventListener('timeupdate', () => range.value = audio.currentTime) - 拖动进度条时，先
audio.pause()，再赋值audio.currentTime = range.value，最后audio.play()（注意：iOS 上可能需再次用户手势） - 音量用
<input type="range" min="0" max="1" step="0.01">，绑定input事件：audio.volume = range.value - 务必监听
loadedmetadata事件后再读取audio.duration，否则初值为NaN，导致进度条计算异常
audio元素隐藏后仍占用页面布局空间
即使 controls 移除了，<audio></audio> 默认是 inline 元素，会在行内占位，尤其在 flex 或 grid 容器中容易撑开高度。
- 最简方案：
audio { display: none; }—— 但会彻底禁用交互，不可取 - 推荐：
audio { position: absolute; width: 0; height: 0; overflow: hidden; }，既不占流式布局空间，又能正常调用 API - 若需保留在文档流但视觉不可见，用
audio { opacity: 0; width: 1px; height: 1px; }，避免被屏幕阅读器跳过（如需无障碍，应加aria-hidden="true"） - 注意：某些旧版 Android WebView 对
position: absolute下的audio元素事件响应不稳定，可改用transform: scale(0)作为备选
真正麻烦的不是隐藏控件，而是处理 iOS 上 touch 事件链、自动播放策略、以及 loadeddata 和 canplay 的触发时机差异——这些点不实测很容易漏掉。
