controlslist="noprogress"可快速隐藏音频进度条，仅限chrome 74+、edge 79+、safari 13.1+；需同时保留controls属性，且值必须为noprogress而非其他变体。
用 controlsList="noprogress" 最快隐藏进度条
现代浏览器（Chrome 74+、Edge 79+、Safari 13.1+）原生支持这个属性，加在 <audio></audio> 标签里就能只去掉进度条，其他控件（播放/暂停、音量）保留：
<audio controls controlslist="noprogress"><source src="sound.mp3" type="audio/mpeg"></source></audio>
注意两点：
-
controls属性不能少，否则整个控件都消失，controlsList就失效 -
noprogress是标准值，别写成notimeline或hideprogress—— 那些不生效 - 部分旧版 Safari（
完全隐藏控件后用 JS 控制播放/暂停
如果要彻底精简、只留一个按钮，就得移除 controls，靠 JS 手动接管：
<audio id="player"><source src="sound.mp3" type="audio/mpeg"></source></audio><button id="playBtn">▶</button>
关键逻辑：
- 监听
playBtn的 click，调用player.play()或player.pause() - 必须处理
play()返回的 Promise，失败时捕获错误：player.play().catch(e => console.warn("play failed:", e)) - 移动端首次播放需用户手势触发，单纯
autoplay基本无效；加muted可提升成功率，但有声播放仍需显式点击
CSS 伪元素强制隐藏（兼容老浏览器）
对不支持 controlsList 的环境（比如旧版 Safari、Firefox），可用 CSS 隐藏进度条区域：
audio::-webkit-media-controls-timeline {
display: none !important;
}
audio::-moz-media-controls-timeline {
display: none !important;
}
audio::-ms-media-controls-timeline {
display: none !important;
}
但要注意：
- 这些是私有伪元素，仅 WebKit/Blink（Chrome/Safari）、Gecko（Firefox）、EdgeHTML（旧 Edge）各自实现，无法跨引擎统一
-
!important很可能需要，否则浏览器默认样式权重太高 - 即使隐藏了 timeline，拖动区域可能仍占位，导致布局异常；建议配合
width: 0; overflow: hidden;进一步收紧
为什么去掉 controls 后音频不能播？
常见误解是“删掉 controls 就能自定义”，结果点了按钮没反应。根本原因是：
-
<audio></audio>元素本身不自动响应用户交互，没有controls就等于没有内置事件绑定 -
play()方法在多数浏览器中被策略限制：未静音 + 无用户手势 = 拒绝执行，控制台报DOMException: play() failed because the user didn't interact with the document first - 音频加载状态未就绪就调
play()，也会失败；应监听loadedmetadata事件后再允许操作
真正极简的落地方式，其实是先用 controlsList 快速验证效果，再根据目标浏览器覆盖率决定是否降级到 JS + CSS 方案。别一上来就全手动，容易卡在 mute 状态或 Promise 拒绝里出不来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
