Web音频播放器Seekbar：同步Input滑块且不阻塞用户输入的实现方案

你的问题核心在于两点：一是未同步range滑块的value与播放进度，导致hover时位置错误；二是直接在播放循环中强制更新range的value会干扰用户拖拽操作。

解决思路是区分用户交互状态：当用户正在拖拽滑块时，暂停播放进度对滑块的同步；用户操作完成后，再同步播放进度到滑块，同时让播放进度跳转到用户选择的位置。具体实现步骤：

1. 添加状态变量标记用户是否正在拖拽滑块
2. 监听滑块的mousedown/mouseup事件切换状态，同时监听input事件实时响应拖拽操作
3. 在播放进度更新的循环中，仅当用户未拖拽时才同步滑块的value

修改后的完整代码如下：

HTML（无需改动） #

<div id="seekbar">
  <progress id="progress" max="100" value="0"></progress>
  <input id="input" type="range" min="0" max="100" value="0">
</div>

CSS（无需改动） #

#seekbar {
  width: 100%;
  height: 24px;
  position: relative;
}

#seekbar progress {
  width: 100%;
  height: 100%;
  padding: 8px 0;
}

#seekbar input {
  width: 100%;
  height: 100%;
  z-index: 100000;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

#seekbar:hover input {
  display: block;
}

JavaScript（核心修改） #

var p = document.getElementById("progress");
var r = document.getElementById("input");
var i = 0;
var isDragging = false; // 标记用户是否正在拖拽滑块

// 监听滑块拖拽开始，暂停同步
r.addEventListener("mousedown", function() {
  isDragging = true;
});

// 监听滑块拖拽结束，恢复同步并更新播放进度
r.addEventListener("mouseup", function() {
  isDragging = false;
  i = parseInt(r.value);
  p.value = i;
});

// 实时响应滑块拖拽（提升交互体验）
r.addEventListener("input", function() {
  if (isDragging) {
    p.value = parseInt(r.value);
  }
});

function playSecond(n) {
  if (i < n && !isDragging) { // 仅当用户未拖拽时更新进度和滑块
    i++;
    p.value = i;
    r.value = i; // 同步滑块位置
    setTimeout(playSecond, 500, n);
  } else if (isDragging) {
    // 用户拖拽时，保持循环监听，等待拖拽结束后继续
    setTimeout(playSecond, 500, n);
  }
}
playSecond(101);

关键说明： #

• isDragging状态变量：避免在用户拖拽时强制更新滑块位置，彻底解决输入被忽略/阻塞的问题
• input事件监听：让滑块拖拽时progress实时同步，给用户即时的视觉反馈
• 播放循环的条件判断：用户拖拽时暂停进度自动增长，拖拽结束后从用户选择的位置继续

内容的提问来源于stack exchange，提问作者Scerno