如何在React音乐播放器中实现曲目连续播放功能

你可以利用HTML5 Audio元素的ended事件监听曲目播放结束，这比用定时器判断进度更可靠。下面是具体修改步骤：

1. 确保audioRef正确初始化 #

先确认你已用useRef创建音频实例的引用：

const audioRef = useRef(null);

2. 添加播放结束事件监听 #

修改你的useEffect，在创建Audio实例后绑定ended事件，同时在组件卸载或依赖变化时移除监听，避免内存泄漏：

useEffect(() => {
  let timeOut = null;

  const onPlaying = () => {
    if (!audioRef.current?.paused) {
      const { duration, currentTime } = audioRef.current;
      setSongProgress((currentTime / duration) * 100);
      setSongLength(duration);
    }
  };

  // 处理曲目播放结束的函数
  const handleTrackEnd = () => {
    nextTrack();
  };

  if (audioRef.current) {
    audioRef.current.pause();
    audioRef.current.removeEventListener('ended', handleTrackEnd); // 移除旧监听
  }

  if (currentTrack?.track_file) {
    audioRef.current = new Audio(currentTrack.track_file);
    audioRef.current.addEventListener('ended', handleTrackEnd); // 添加新监听
    timeOut = setInterval(onPlaying, 100);
    audioRef.current.play();
    audioRef.current.volume = volume / 100;
    setIsPlaying(true);
  }

  return () => {
    if (timeOut) clearInterval(timeOut);
    if (audioRef.current) {
      audioRef.current.removeEventListener('ended', handleTrackEnd);
      audioRef.current.pause();
    }
  };
}, [currentTrack?.track_file, volume]);

注：我把依赖数组里的track改成了currentTrack?.track_file，逻辑上更贴合当前曲目文件变化时重新初始化音频的需求；同时添加volume作为依赖，确保音量调整能实时生效。

3. 完善nextTrack函数 #

你原来的nextTrack仅更新了currentTrack，未同步更新index，会导致后续自动播放逻辑出错。同时可以处理最后一曲的边界情况：

// 循环播放版本：最后一曲结束后回到第一首
const nextTrack = () => {
  const nextIndex = (index + 1) % tracks.length;
  setIndex(nextIndex);
  setCurrentTrack(tracks[nextIndex]);
};

如果不需要循环播放，可改为：

// 非循环版本：最后一曲结束后停止播放
const nextTrack = () => {
  if (index + 1 < tracks.length) {
    const nextIndex = index + 1;
    setIndex(nextIndex);
    setCurrentTrack(tracks[nextIndex]);
  } else {
    setIsPlaying(false);
  }
};

修改完成后，当前曲目播放完毕时会自动触发nextTrack，实现自动播放下一曲的功能。

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