隐藏audio元素最常用方式是display: none，会暂停播放并释放资源；若需持续播放则用opacity: 0 + position: absolute；注意移动端autoplay限制、用户手势触发要求及readyState判断。
audio 元素加 controls 属性就会显示默认控件；想彻底隐藏、只留后台播放能力，就别加它，再配合 CSS 或属性控制视觉呈现。
用 display: none 隐藏 audio 元素（最常用）
这是最直接、兼容性最好的方式。浏览器会暂停播放、释放解码资源，且语义清晰。
-
display: none会让audio元素完全退出渲染流，触发pause事件，currentTime停止更新 - 适合「需要隐藏、且不介意暂停」的场景，比如页面切换时临时停掉背景音
- 如果后续要恢复播放，得重新调用
play()，注意可能被浏览器拦截（尤其没用户交互过时） - 不要和
hidden属性混用：hidden在audio上等价于display: none，但叠加使用无意义，还可能引发样式冲突
用 opacity: 0 + position: absolute 实现“视觉隐藏但继续播放”
当你要隐藏界面，又必须保持音频持续播放（比如语音导航、在线会议提示音），这个组合是少数可靠方案。
-
opacity: 0不影响播放状态，audio仍处于活跃 DOM 节点中，能响应timeupdate、ended等事件 - 必须配
position: absolute（或fixed），否则透明元素仍占布局空间，可能撑开页面或遮挡按钮 - 移动端 Safari 对静音 autoplay 支持较好，但若未设
muted，首次play()很可能被拒绝——哪怕元素已透明 - 务必监听
play的 Promise 返回：audio.play().catch(e => console.warn('play failed:', e))，某些情况下即使元素可见，也会因策略失败
为什么 hidden 属性在 object 或旧插件里无效？
这不是 bug，是规范设计。Flash、ActiveX、本地 NPAPI 插件这些“插件容器”不响应 DOM 的 hidden 属性。
立即学习“前端免费学习笔记（深入）”；
-
hidden只对原生 HTML 元素（如audio、div）有明确定义的行为 - 对
<object>或<embed>，必须用style="display: none"或visibility: hidden，但后者音频可能照常播放，造成“听得到却看不到”的意外 - IE 下
display: none可能销毁 Flash 实例，再次显示需 reload；Chrome 已彻底禁用 NPAPI，这类标签根本不会加载 - 真要兼容遗留系统，得靠插件自身 API（如 Flash 的
ExternalInterface）先调stop()，再隐藏容器
隐藏后还想控制播放？别漏掉 readyState 和用户手势
自定义按钮控制隐藏的 audio 时，两个条件常被忽略：
-
audio.readyState必须 ≥ 2（HAVE_FUTURE_DATA）才能安全设置currentTime，否则拖动进度条会静默失败 - 首次
play()必须由用户手势（click/touchend）触发，不能由定时器、load事件或DOMContentLoaded自动发起 - 移动端 iOS Safari 尤其严格：即使
muted，若页面从未获得焦点或用户未点击过任何区域，play()仍可能被拒 - 建议在按钮
click回调里统一处理：先检查audio.paused，再调play()或pause()，并捕获 Promise 拒绝
真正难的不是“怎么藏”，而是“藏了之后怎么让它听话地播、停、跳、续”——readyState 判断、用户交互时机、移动端策略差异，三者缺一都会让隐藏方案在真实设备上突然失效。
