自定义HTML5音频播放器问题：进度滑块不跟随、当前时间显示异常

我来帮你解决这两个头疼的问题！先拆解一下问题根源，再给你完整的修复代码：

问题1：范围滑块无法同步音频进度 #

这个问题通常是因为没给滑块绑定音频的timeupdate事件，没法实时获取音频当前播放进度；同时也没处理滑块的拖动事件，没法让音频跟着滑块跳转。

问题2：时间显示持续叠加零字符 #

这大概率是因为你更新时间时一直在追加内容，而不是替换原有内容，导致每次更新都把新的时间字符串加在后面，就出现了不断叠加的零。

完整修复后的代码示例 #

HTML部分

<div class="player">
  <audio id="HAE" controls>
    <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/b/b1/Haussperling2008.ogg/Haussperling2008.ogg.mp3" type="audio/mpeg">
  </audio>
  <!-- 进度滑块 -->
  <input type="range" id="progressSlider" min="0" max="100" value="0">
  <!-- 时间显示区域 -->
  <div>
    当前时间：<span id="currentTime">00:00</span>
  </div>
</div>

JavaScript部分

const audio = document.getElementById('HAE');
const progressSlider = document.getElementById('progressSlider');
const currentTimeSpan = document.getElementById('currentTime');

// 格式化时间：把秒数转成 mm:ss 格式
function formatTime(seconds) {
  const mins = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  // 补零处理，确保是两位数
  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}

// 音频加载完成后，设置滑块的最大值为音频总时长
audio.addEventListener('loadedmetadata', () => {
  progressSlider.max = audio.duration;
});

// 实时更新滑块和时间显示
audio.addEventListener('timeupdate', () => {
  // 更新滑块位置
  progressSlider.value = audio.currentTime;
  // 更新当前时间：用textContent替换原有内容，而不是追加
  currentTimeSpan.textContent = formatTime(audio.currentTime);
});

// 拖动滑块时，让音频跳转到对应位置
progressSlider.addEventListener('input', () => {
  audio.currentTime = progressSlider.value;
});

关键修复点说明 #

• 时间显示修复：用currentTimeSpan.textContent = xxx替换掉你之前可能用的innerHTML += xxx或者类似的追加写法，确保每次更新都是覆盖原有内容。
• 滑块同步修复：
  1. 监听音频的loadedmetadata事件，获取音频总时长后设置滑块的max值（因为音频加载前duration是NaN）。
  2. 监听timeupdate事件，实时把音频的currentTime赋值给滑块的value。
  3. 监听滑块的input事件，拖动时把滑块的value赋值给音频的currentTime，实现跳转。

这样修改后，滑块就能和音频进度完美同步，时间显示也不会再叠加零字符啦！

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