React实现Spotify克隆：如何检测歌曲播放结束以实现重复功能

基于Spotify Web Playback SDK的方案 #

如果你是用官方Spotify Web Playback SDK开发，它自带播放状态监听机制，可直接用来检测歌曲结束：

• 通过player.addListener绑定player_state_changed事件，该事件会在播放位置、暂停状态等发生变化时触发。
• 在回调函数中，对比当前播放位置state.position和歌曲总时长state.duration，当位置接近总时长（预留几百毫秒误差）且播放器处于暂停状态时，即可判定歌曲播放结束。

示例代码：

import { useEffect } from 'react';

// 假设player是已初始化的Spotify播放器实例，repeatMode为当前重复模式（'track'/'playlist'/'off'）
const PlayerControls = ({ player, repeatMode, playNextTrackOrFirst }) => {
  useEffect(() => {
    if (!player) return;

    const handleStateChange = (state) => {
      if (!state) return;

      // 检测歌曲是否播放结束
      const isTrackEnded = state.position >= state.duration - 500 && state.paused;
      
      if (isTrackEnded && repeatMode !== 'off') {
        if (repeatMode === 'track') {
          // 重复当前曲目：回到开头并播放
          player.seek(0);
          player.resume();
        } else if (repeatMode === 'playlist') {
          // 重复播放列表：切换到下一曲，最后一首则回到第一首
          playNextTrackOrFirst();
        }
      }
    };

    player.addListener('player_state_changed', handleStateChange);

    // 组件卸载时移除监听
    return () => {
      player.removeListener('player_state_changed', handleStateChange);
    };
  }, [player, repeatMode, playNextTrackOrFirst]);

  return <div>/* 你的播放控制组件内容 */</div>;
};

基于Web Audio API的方案 #

如果是用Web Audio API手动处理音频播放（未使用<audio>标签），可以监听AudioBufferSourceNode的ended事件，该事件会在音频播放完成时触发：

示例代码：

import { useEffect, useRef } from 'react';

const AudioPlayer = ({ audioContext, trackBuffer, repeatMode }) => {
  const sourceRef = useRef(null);

  const playTrack = () => {
    // 创建音频源节点
    const source = audioContext.createBufferSource();
    source.buffer = trackBuffer;
    source.connect(audioContext.destination);
    source.start();
    sourceRef.current = source;
  };

  const playCurrentTrackAgain = () => {
    playTrack();
  };

  useEffect(() => {
    const source = sourceRef.current;
    if (!source) return;

    const handleTrackEnd = () => {
      if (repeatMode === 'track') {
        playCurrentTrackAgain();
      }
    };

    source.addEventListener('ended', handleTrackEnd);

    return () => {
      source.removeEventListener('ended', handleTrackEnd);
      source.stop(); // 清理音频资源
    };
  }, [sourceRef.current, repeatMode]);

  return <button onClick={playTrack}>播放</button>;
};

注意事项 #

• 无论使用哪种方案，都要在组件卸载时移除事件监听并清理相关资源，避免内存泄漏。
• 使用Spotify SDK时，需确保播放器已完成初始化，且用户已通过OAuth授权获取播放权限。

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