React开发音频seekbar 拖动至近末尾处时长显示异常如何解决

• 浏览器加载MP3等流式音频时，初始阶段拿到的时长是基于文件头元数据的估算值，并不完全精确。当你执行跳转（seek）操作，尤其是跳到接近音频末尾的位置时，浏览器会读取对应位置的音帧数据校准真实总时长，这个校准动作会触发onDurationChange事件。
• 原代码存在三个直接触发问题的逻辑缺陷：
  • 直接将格式化后的时长字符串存在state中，无法对新返回的时长做差值校验，只要onDurationChange事件触发就无条件覆盖总时长显示值，校准产生的微小数值波动就会导致显示跳变。
  • 没有处理进度条拖动状态，拖动过程中onTimeUpdate事件返回的进度值会覆盖用户拖动的位置，容易出现进度条回弹、时间显示不同步的问题。
  • 当前播放时间直接读取ref值渲染，ref值变化不会触发React重渲染，会导致当前时间显示卡顿、跳帧。

• 调整duration存储逻辑：state中存原始的秒数数值，渲染阶段再做格式化，方便做差值校验。
• 给时长更新加阈值判断：首次加载拿到有效时长直接赋值，后续触发onDurationChange时，只有当新时长和已存储时长的差值超过1秒（用户可感知的变动）才更新state，过滤seek操作触发的微小校准波动。
• 新增进度条拖动状态标记：用户拖动进度条过程中，暂停onTimeUpdate对进度值的自动更新，等拖动结束后再统一执行seek跳转，避免进度条回弹。
• 将当前播放时间存入state，在onTimeUpdate事件中同步更新，保证时间显示和进度条联动一致。

import { useRef, useState } from 'react';
import podcast from './你的音频文件路径.mp3'; // 替换为实际音频路径

function App() {
  const seekSlider = useRef(null);
  const myAudio = useRef(null);
  const button = useRef(null);
  const [value, setValue] = useState(0);
  // 存储原始秒数，不直接存格式化字符串
  const [duration, setDuration] = useState(0);
  const [currentTime, setCurrentTime] = useState(0);
  const [isDragging, setIsDragging] = useState(false);

  function convertMinute(x) {
    if (!x || isNaN(x)) return '0:00';
    const min = Math.floor(x / 60);
    const sec = Math.floor(x % 60);
    return `${min}:${sec < 10 ? `0${sec}` : sec}`;
  }

  const clickButton = () => {
    if (button.current.className === "fa-solid fa-play") {
      button.current.className = "fa-solid fa-pause";
      myAudio.current.play();
    } else {
      button.current.className = "fa-solid fa-play";
      myAudio.current.pause();
    }
  }

  const changeSeek = () => {
    // 拖动过程中不自动更新进度，避免回弹
    if (isDragging) return;
    const progress = (myAudio.current.currentTime / myAudio.current.duration) * 100;
    setValue(progress);
    setCurrentTime(myAudio.current.currentTime);
  }

  const handleSeekMove = (e) => {
    setValue(e.target.value);
  }

  // 拖动结束后再执行实际跳转，减少频繁操作
  const handleSeekEnd = () => {
    const seekTime = (value / 100) * myAudio.current.duration;
    myAudio.current.currentTime = seekTime;
    setIsDragging(false);
  }

  const onDurationChangeHandler = (e) => {
    const newDuration = e.target.duration;
    // 过滤无效时长
    if (!newDuration || isNaN(newDuration)) return;
    // 首次加载直接赋值，后续仅当时长偏差超过1秒才更新，过滤微小校准波动
    if (!duration || Math.abs(newDuration - duration) > 1) {
      setDuration(newDuration);
    }
  }

  return (
    <div className="App">
      <div className='button' onClick={clickButton}>
        <span><i ref={button} className="fa-solid fa-play"></i></span>
      </div>

      <div className='seekBar'>
        <span>{convertMinute(currentTime)}</span>

        <input
          type='range'
          className='seekSlider'
          min='0'
          max='100'
          value={value}
          step='0.01'
          ref={seekSlider}
          onInput={(e) => {
            setIsDragging(true);
            handleSeekMove(e);
          }}
          onMouseUp={handleSeekEnd}
          onTouchEnd={handleSeekEnd}
        />

        <span>{convertMinute(duration)}</span>
      </div>

      <audio
        ref={myAudio}
        onTimeUpdate={changeSeek}
        onDurationChange={onDurationChangeHandler}
        onLoadedMetadata={onDurationChangeHandler}
      >
        <source src={podcast} type="audio/mp3" />
      </audio>
    </div>
  );
}

export default App;

补充说明：如果使用的是部分存在VBR头错误的老旧MP3文件，可能出现校准后时长偏差超过1秒的情况，这种情况可以把判断阈值调整到3秒，基本可以覆盖绝大多数场景的显示异常问题。

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