关键在于用input事件实时拖拽预览、change事件收尾，双向同步audio.currentTime与slider.value，设max="1000"提升精度，并在loadedmetadata后初始化、timeupdate中加isNaN守卫防错。
用 input type="range" 控制音频进度，关键不是“能拖”，而是拖拽时不跳变、松手后精准定位、播放同步不卡顿。核心在于合理处理事件时机、避免重复绑定、手动同步 audio.currentTime 和 input.value，并做好防抖和精度校准。
监听 input 事件而非 change 事件
用户拖拽滑块时，input 事件会持续触发（每像素或每毫秒），而 change 只在松手后触发一次。要实现“边拖边预览”效果，必须用 input：
- 监听
input：实时响应拖拽，立即更新 audio.currentTime，让声音随滑块位置变化 - 同时监听
change：松手后可做清理、记录最终位置或触发额外逻辑（如打点） - 避免两个事件里都写
audio.currentTime = ...，否则可能冲突或重复赋值
双向绑定：拖动滑块 → 更新播放时间，播放前进 → 同步滑块位置
滑块只是控制器，不是单向输出。需建立“拖即播”和“播即动”的闭环：
- 拖动滑块时：
audio.currentTime = slider.value * audio.duration - 音频播放时（用
timeupdate）：slider.value = audio.currentTime / audio.duration（注意：需确保 audio.duration 已知，否则设为 0 或跳过） - 为防抖动，
timeupdate中可加简单判断：if (!isDragging) { slider.value = ... }，其中isDragging用mousedown/touchstart和mouseup/touchend切换
设置 range 的 max 和 step 属性，提升精度与兼容性
input[type="range"] 默认 max=100，但直接映射到秒级时间会导致小范围拖动不灵敏。推荐做法：
- 设
max="1000"（或 10000），用千分之一精度控制，避免整数截断误差 - 设
step="1"，确保每单位对应明确时间（如currentTime = value / 1000 * duration） - 初始化时动态计算：
slider.max = 1000; slider.value = 0;，并在 audio 元数据加载后（loadedmetadata）再设置slider.max和初始value
处理加载延迟与未就绪状态
音频未加载完成时，duration 可能为 NaN 或 Inf，直接计算会出错：
- 在
loadedmetadata事件中初始化滑块范围：slider.max = 1000; slider.value = 0; - 在
timeupdate中加守卫：if (isNaN(audio.duration) || audio.duration - 拖拽时若
duration无效，暂不更新currentTime，或提示“正在加载”
