如何利用React Context实现音频进度滑块实时更新

核心问题是进度状态仅在暂停时同步，未实时监听播放中的时间变化。直接在Context里统一处理进度更新逻辑即可，不用在组件里单独维护setTimeout，具体步骤如下：

1. 在Music Context中统一维护进度状态 #

在Context的状态中添加currentTime（当前播放时间）和duration（音频总时长），并通过音频原生事件实时更新这两个值：

import { createContext, useContext, useState, useRef, useEffect } from 'react';

const MusicContext = createContext();

export const MusicProvider = ({ children }) => {
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(0);
  const audioRef = useRef(null);

  // 更新播放进度与总时长
  const updateProgress = () => {
    if (!audioRef.current) return;
    setCurrentTime(audioRef.current.currentTime);
    // 音频加载完成后再更新总时长（避免NaN）
    if (!isNaN(audioRef.current.duration)) {
      setDuration(audioRef.current.duration);
    }
  };

  // 初始化音频实例并绑定监听事件
  useEffect(() => {
    audioRef.current = new Audio();
    // 监听timeupdate事件，播放时自动触发进度更新
    audioRef.current.addEventListener('timeupdate', updateProgress);

    // 组件卸载时清理资源，防止内存泄漏
    return () => {
      if (audioRef.current) {
        audioRef.current.removeEventListener('timeupdate', updateProgress);
        audioRef.current.pause();
        audioRef.current = null;
      }
    };
  }, []);

  // 你的播放方法
  const playmusic = (audioUrl) => {
    if (audioRef.current.src !== audioUrl) {
      audioRef.current.src = audioUrl;
      // 切换音频时重置进度状态
      setCurrentTime(0);
      setDuration(0);
    }
    audioRef.current.play();
  };

  // 你的暂停方法
  const pausemusic = () => {
    if (audioRef.current) {
      audioRef.current.pause();
      // 暂停时手动同步一次进度，确保滑块位置精准
      updateProgress();
    }
  };

  return (
    <MusicContext.Provider value={{ currentTime, duration, playmusic, pausemusic }}>
      {children}
    </MusicContext.Provider>
  );
};

export const useMusic = () => useContext(MusicContext);

2. 在滑块组件中直接使用Context状态 #

在AudioController组件中从Context获取currentTime和duration，直接绑定到滑块的属性上即可：

import { useMusic } from './MusicContext';

const AudioController = () => {
  const { currentTime, duration, playmusic, pausemusic } = useMusic();

  // 处理滑块拖动调整播放进度
  const handleSliderChange = (e) => {
    const newTime = parseFloat(e.target.value);
    if (audioRef.current) {
      audioRef.current.currentTime = newTime;
    }
  };

  return (
    <div className="audio-controller">
      <button onClick={() => playmusic('你的音频文件URL')}>播放</button>
      <button onClick={pausemusic}>暂停</button>
      <input
        type="range"
        min="0"
        max={duration || 0}
        value={currentTime}
        onChange={handleSliderChange}
        step="0.1"
      />
      <span>{Math.floor(currentTime)}/{Math.floor(duration || 0)}</span>
    </div>
  );
};

export default AudioController;

关键说明 #

• 用音频原生的timeupdate事件替代setTimeout，该事件会在播放位置变化时自动触发（每秒4-6次），精准且性能更优
• 所有进度逻辑统一放在Context中，确保播放、暂停、进度更新的状态一致，避免组件间状态冲突
• 切换音频时重置进度状态，防止旧音频的时长和时间残留
• 组件卸载时必须移除事件监听，避免内存泄漏

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