React音频播放器设置HTMLAudioElement的currentTime重置为0求助

可能的原因 #

你遇到的问题是：尽管newTime日志输出正确，但设置currentTime后音频回到0，大概率是以下原因之一：

• 闭包变量捕获问题：handleMouseUp中的newTime可能未捕获到最新的拖动值（虽日志显示正确，但极端情况下闭包可能存在延迟）。
• 音频重新加载：组件中可能存在其他逻辑（比如监听currentTrack变化的useEffect）在设置currentTime时重新加载了音频源，导致currentTime被重置为0。
• 音频就绪状态不足：设置currentTime时音频未加载到足够数据，浏览器无法定位到指定时间点。

具体修复步骤 #

1. 用useRef保存newTime避免闭包问题 #

将局部变量newTime替换为useRef，确保handleMouseUp能获取到最新的拖动值：

// 组件顶部添加
const newTimeRef = useRef<number>(0);

// 修改handleMouseDown函数
const handleMouseDown = (e: React.MouseEvent<HTMLDivElement, MouseEvent>): void => {
    if (audioRef.current && progressRef.current) {
        audioRef.current.pause();
        setIsPlaying(false);

        const width = progressRef.current.clientWidth;
        const clickX = e.nativeEvent.offsetX;
        const duration = audioRef.current.duration;
        // 用ref保存初始计算值
        newTimeRef.current = (clickX / width) * duration;

        setProgress((newTimeRef.current / duration) * 100);

        const handleMouseMove = (e: MouseEvent) => {
            const newX = e.clientX - progressRef.current!.getBoundingClientRect().left;
            // 更新ref中的最新值
            newTimeRef.current = (newX / width) * duration;
            setProgress((newTimeRef.current / duration) * 100);
        };

        const handleMouseUp = () => {
            window.removeEventListener("mousemove", handleMouseMove);
            window.removeEventListener("mouseup", handleMouseUp);
            console.log(newTimeRef.current);
            const audio = audioRef.current!;
            // 使用ref中的最新值设置currentTime
            audio.currentTime = newTimeRef.current;
            audio.play().then(() => setIsPlaying(true));
        };

        window.addEventListener("mousemove", handleMouseMove);
        window.addEventListener("mouseup", handleMouseUp);
    }
};

2. 检查音频重新加载逻辑 #

查看组件中是否存在类似以下的useEffect：

useEffect(() => {
  if (audioRef.current) {
    audioRef.current.src = currentTrack.src;
  }
}, [currentTrack]);

如果有，确保拖动进度条时不会触发currentTrack变化，或者在设置currentTime前等待音频加载完成：

const handleMouseUp = async () => {
    // 移除监听事件
    window.removeEventListener("mousemove", handleMouseMove);
    window.removeEventListener("mouseup", handleMouseUp);
    
    const audio = audioRef.current!;
    // 等待音频加载到可定位状态
    if (audio.readyState < 2) {
        await new Promise(resolve => audio.addEventListener("loadedmetadata", resolve, { once: true }));
    }
    audio.currentTime = newTimeRef.current;
    await audio.play();
    setIsPlaying(true);
};

3. 验证进度条坐标计算 #

确认progressRef确实指向进度条容器，且newX计算无偏移：

// 在handleMouseMove中添加日志验证
console.log("newX:", newX, "容器宽度:", width, "音频时长:", duration);

确保newX在0到width之间，避免newTime超出音频时长范围（浏览器虽会自动修正，但极端情况可能导致异常）。

额外建议 #

• 给<audio>元素添加preload="metadata"属性，确保音频元数据（如时长）提前加载完成：

  <audio ref={audioRef} preload="metadata" />
  

• 监听音频的error事件，排查是否有加载错误导致currentTime设置失败：

  useEffect(() => {
    if (audioRef.current) {
      audioRef.current.addEventListener("error", (e) => {
        console.error("音频加载错误:", e);
      });
    }
  }, []);
  

内容的提问来源于stack exchange，提问作者Jonathan.M