audio元素不支持value/max属性控制进度条，需用input[type="range"]手动绑定currenttime与duration，注意loadedmetadata事件初始化、timeupdate更新及移动端兼容性问题。
audio 元素本身不支持 value/max 直接映射进度条
直接给 <audio></audio> 标签加 value 或 max 属性没用——它不是表单控件，这些属性会被忽略。浏览器默认的进度条是内置 UI，无法通过 HTML 属性直接控制。真要自定义，必须用 <input type="range"> 手动绑定播放时间。
用 input[type="range"] 同步 audio.currentTime 和 duration
核心逻辑是：把 audio.duration 当作 max，把 audio.currentTime 当作 value，双向同步。注意两个关键点：
-
duration初始为NaN，得等loadedmetadata事件触发后才能读取 - 拖拽
input时要手动设置audio.currentTime，并防止音频自动播放（除非你有意为之） - 播放中需用
timeupdate持续更新input.value，否则进度条会卡住
简单示例：
<audio id="my-audio" src="song.mp3"></audio><input type="range" id="progress" min="0" max="100"><script>
const audio = document.getElementById('my-audio');
const progress = document.getElementById('progress');
audio.addEventListener('loadedmetadata', () => {
progress.max = audio.duration || 100; // 防 NaN
});
audio.addEventListener('timeupdate', () => {
progress.value = audio.currentTime;
});
progress.addEventListener('input', () => {
audio.currentTime = parseFloat(progress.value);
});
</script>
拖拽松手瞬间 audio 可能跳回原位置
这是常见错觉，实际原因是：拖拽过程中频繁触发 timeupdate，而 input.input 事件还没结束，导致 currentTime 被反复覆盖。解决方法只有两个：
- 把
timeupdate更新逻辑改成节流（例如用requestAnimationFrame包一层） - 更稳妥的做法：只在
input.change（而非input）时才设currentTime，同时监听seeked事件再恢复进度条同步 - 别依赖
progress.valueAsNumber—— 它可能因四舍五入丢失精度，老老实实用parseFloat(progress.value)
移动端 range 输入框滑动不灵敏或跳变
iOS Safari 和部分安卓 WebView 对 input[type="range"] 的 touch 支持较弱，表现为滑动延迟、跳帧或无法拖到末尾。应对策略：
- 加 CSS 强制启用硬件加速：
transform: translateZ(0)或will-change: transform - 避免在
touchmove中直接操作currentTime，改用requestAnimationFrame批量更新 - 不要设过小的
step值（如step="0.01"），移动端解析能力有限，容易卡死 - 某些 Android 机型需要监听
touchstart+touchend来主动触发seeked后的校准
真正麻烦的从来不是怎么写，而是怎么让不同设备上都“看起来像一个进度条”。duration 的精度、timeupdate 的触发频率、以及 touch 事件和 media events 的竞态关系，才是实际落地时最耗时间的部分。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
