audio标签默认进度条无法用CSS重构，因原生controls控件位于UA Shadow DOM中；需移除controls属性，用input[type="range"]手动实现，并通过JS绑定currentTime与duration，同时适配click和touch事件。
audio 标签默认进度条不能直接用 CSS 重构
HTML5 的 <audio> 元素自带的 controls 属性渲染出的原生控件（包括进度条）是浏览器 UA Shadow DOM 内部实现的，无法用常规 CSS 选中或样式化。你写的 .audio::-webkit-slider-thumb 这类伪元素只对 <input type="range"> 生效，对原生 <audio controls> 中的进度条完全无效。
所以「重构」不是改样式，而是：隐藏原生控件 + 手动实现一个可交互的进度条容器 + 用 JS 绑定 currentTime 和 duration。
必须先禁用原生 controls 才能自定义
保留 controls 属性就等于交出控制权，浏览器会强制渲染整套 UI，你的自定义进度条只能叠在上面，无法真正接管行为。正确做法是：
- 移除
controls属性，让<audio>变成“静默播放器” - 用
<div class="progress-container">搭建外层容器 - 用
<div class="progress-bar">表示已播放部分（宽度由 JS 动态设置） - 用
<input type="range">或纯 div + 事件模拟拖拽 —— 推荐前者，语义清晰、无障碍支持好
注意：<input type="range"> 的 max 要设为 audio.duration（需等 loadedmetadata 事件后才能读），value 绑定 audio.currentTime。
立即学习“前端免费学习笔记（深入）”；
点击进度条跳转的核心 JS 逻辑
用户点击进度条任意位置，需要把视口坐标换算成时间点。关键不是“获取鼠标 x 坐标”，而是用 getBoundingClientRect() 算相对容器的百分比：
progressContainer.addEventListener('click', (e) => {
const rect = progressContainer.getBoundingClientRect();
const percent = (e.clientX - rect.left) / rect.width;
audio.currentTime = percent * audio.duration;
});常见错误：
- 直接用
e.offsetX—— 在缩放、iframe 或滚动后不准 - 没监听
loadedmetadata就读audio.duration，此时值为NaN，导致跳转失败 - 没处理
audio.duration === Infinity（如流媒体、无总长音频），需加 guard 判断
拖拽时防止 audio 自动播放或卡顿
拖拽过程中频繁设置 currentTime 可能触发重缓冲，尤其在低网速或大文件下。优化要点：
- 监听
input事件而非change，保证拖拽实时响应 - 在拖拽开始（
mousedown）时调用audio.pause()，结束（mouseup）再恢复播放 - 避免在
timeupdate里反向更新 range 的value，否则会和用户拖拽冲突；应只在播放中被动同步 - CSS 上给
.progress-container加user-select: none，防止文字选中干扰
最易被忽略的一点：移动端 touch 事件未适配。仅写 click 会导致 iOS/Android 点击无响应，必须同时监听 touchstart 和 touchend，并用 e.touches[0].clientX 替代 e.clientX。
