不加controls属性时audio元素默认隐形且轻量兼容；禁用display:none或visibility:hidden，应改用width:1px;height:1px;opacity:0;overflow:hidden安全隐藏。
audio 标签不加 controls 就是隐形的，但别直接 display: none
不加 controls 属性，<audio></audio> 元素默认不渲染任何 UI，这是最轻量、最兼容的“隐藏”方式。但很多人误用 display: none 或 visibility: hidden，结果音频加载中断、play() 失败、甚至 loadeddata 事件不触发——因为浏览器会暂停资源加载或丢弃解码上下文。
真正安全的 CSS 隐藏方式是压尺寸 + 裁剪：
width: 1px; height: 1px;opacity: 0;overflow: hidden;- 避免
position: absolute移出视口（部分旧版 Safari 会因此拒绝 autoplay）
controlslist="nodownload" 只在 Chrome/Edge 有效，Safari/Firefox 完全忽略
如果你只是想隐藏下载按钮、全屏按钮这类控件项，而不是整个控件栏，controlslist 是唯一原生方案。但它有硬性前提：必须和 controls 同时存在，否则无效。
合法值只有三个：nodownload、nofullscreen、noremoteplayback。写错如 nomute 或 nocontrols 不报错，但也不起作用。
常见失效场景：
- Safari 中加了
controlslist没反应 → 正常，它根本不支持 - 只写
controlslist="nodownload"没写controls→ 控件栏根本没出现，自然无从隐藏 - 想靠它禁右键“另存为” → 它只影响控件按钮，不影响上下文菜单；Firefox/Safari 下需服务端配合（如不返回
Accept-Ranges: bytes）
JS 调用 play() 失败？检查是否在用户手势中触发
Chrome 94+、Safari 17+、Firefox 120+ 都强制要求：首次 play() 必须发生在用户交互回调内（click、touchstart、keydown 等），否则抛 DOMException: play() failed because the user didn't interact with the document first。
这意味着这些写法都不可靠：
document.addEventListener('DOMContentLoaded', () => audio.play())setTimeout(() => audio.play(), 100)-
audio.autoplay = true（即使加了muted，无交互后仍可能被拦截）
可靠做法是绑定一次用户操作，比如：
button.addEventListener('click', () => {
audio.play().catch(e => console.warn('play failed:', e));
});
自定义控件时，timeupdate 和 seeking 的坑比想象中多
去掉 controls 后，进度条、当前时间、拖拽跳转都得自己实现。最容易被忽略的是：
-
timeupdate事件不是每帧触发，尤其低码率音频下可能几百毫秒才一次，不适合做高精度同步 - 用户拖动
<input type="range">时，要先audio.pause()再设currentTime，否则某些浏览器（特别是 iOS Safari）会在 seek 完成前继续播放旧位置 -
seeking和seeked事件必须监听：前者表示开始跳转，后者表示跳转完成；仅靠timeupdate无法区分“正在跳”和“已跳完” - 移动端 touchmove 触发频繁，range 输入框要防抖，否则反复 set currentTime 会卡顿或触发错误
隐藏控件本身很简单，但保持脚本调用兼容的关键不在 CSS，而在对浏览器策略、事件生命周期和用户交互时机的尊重——稍一松懈，play() 就静默失败，currentTime 就跳不准，连静音开关都可能失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
