点击进度条无法更新音频currentTime问题求助

你的问题是点击进度条时计算的跳转时间正确，但音频总是从头播放，而非跳转到目标时间。可以从以下几个方向排查解决：

1. 确保音频元数据加载完成后再绑定事件 #

音频的duration属性只有在元数据加载完成后才会返回正确值。如果在音频未就绪时绑定点击事件，可能导致后续设置currentTime时出现异常。可以通过loadedmetadata事件确保元数据加载完成后再处理点击：

audio_Element.addEventListener('loadedmetadata', function() {
  document.querySelector('.range').addEventListener('click', function (event) {
    const newWidth = (event.pageX - progressBar.offsetLeft) / progressBar.parentElement.offsetWidth * 100;
    progressBar.style.width = newWidth + '%';

    let newTime = (newWidth / 100) * audio_Element.duration;
    console.log(newTime);

    // 保存播放状态，设置时间后恢复播放
    const wasPlaying = !audio_Element.paused;
    if (wasPlaying) audio_Element.pause();
    audio_Element.currentTime = newTime;
    if (wasPlaying) audio_Element.play();
  });
});

2. 检查是否有其他代码干扰currentTime设置 #

排查项目中是否有其他监听音频事件的代码（比如timeupdate、play事件），是否存在覆盖currentTime的逻辑。例如某些自动重置播放进度的代码会导致设置后被覆盖。

3. 验证currentTime是否真的被设置成功 #

在设置currentTime后立即打印其值，确认是否生效：

audio_Element.currentTime = newTime;
console.log('实际设置的currentTime:', audio_Element.currentTime);

如果打印值与newTime不符，可能是音频资源不支持跳转（比如部分流媒体），或者资源文件损坏。你的音频来自本地存储，大概率支持跳转，可检查文件完整性。

4. 优化音频元素的预加载设置 #

给音频元素添加preload="metadata"属性，浏览器会提前加载音频元数据，确保duration正确获取：

<audio class="audio" src="{{ url('/storage/' . $song->path) }}" preload="metadata"></audio>

内容的提问来源于stack exchange，提问作者Mohsin Ullah Shah