如何通过Spotify Web API/Playback SDK检测曲目播放结束？

我之前在做无播放列表的Spotify web应用时，也遇到过同样的问题——player_state_changed事件看似信息多，但直接用来判断曲目结束不太顺手。下面分享几个经过验证的可靠方案，适合你这种需要临时决定下一首的场景：

方案一：结合player_state_changed事件与进度追踪 #

这是最推荐的方法，利用SDK原生事件，不需要额外定时器，稳定性高。核心思路是从事件返回的state对象里提取当前播放位置和曲目总时长，通过判断两者的差值来检测结束。

你可以设置一个合理的阈值（比如500毫秒），当播放位置接近总时长时，判定曲目即将结束，同时通过跟踪当前曲目ID避免重复触发：

let currentTrackId = null;
let isTrackEnding = false;

player.addListener('player_state_changed', (state) => {
  // 容错：如果状态无效直接返回
  if (!state || !state.track_window || typeof state.position !== 'number') return;

  const { track_window, position, duration } = state;
  const currentTrack = track_window.current_track;

  // 切换曲目时重置标记
  if (currentTrack.id !== currentTrackId) {
    currentTrackId = currentTrack.id;
    isTrackEnding = false;
  }

  // 当播放位置接近总时长，且未触发过结束逻辑时
  if (!isTrackEnding && position >= duration - 500) {
    isTrackEnding = true;
    // 这里执行你的核心逻辑：临时确定下一首并播放
    handleTrackCompletion();
  }
});

方案二：主动定时检查播放进度 #

如果player_state_changed的触发频率不够稳定（比如某些网络环境下），可以用定时器主动轮询播放状态。这种方法要注意及时清理定时器，避免内存泄漏：

let progressCheckInterval;
let currentTrackId = null;

function startProgressChecker() {
  // 先清理已有定时器，避免重复创建
  if (progressCheckInterval) clearInterval(progressCheckInterval);

  progressCheckInterval = setInterval(async () => {
    try {
      const state = await player.getCurrentState();
      if (!state || !state.track_window) return;

      const { current_track, position, duration } = state;

      // 切换曲目时重置追踪ID
      if (current_track.id !== currentTrackId) {
        currentTrackId = current_track.id;
        return;
      }

      // 判定播放完成
      if (position >= duration - 100) {
        clearInterval(progressCheckInterval);
        handleTrackCompletion();
        // 下一首启动后重新开始检查
        setTimeout(startProgressChecker, 1000);
      }
    } catch (err) {
      console.error('获取播放状态失败:', err);
    }
  }, 100); // 每100毫秒检查一次
}

// 在播放器初始化或开始播放时启动检查
startProgressChecker();

方案三：结合暂停状态与进度判断 #

当无后续曲目时，Spotify播放器通常会在曲目结束后自动暂停。你可以结合这个特性，在player_state_changed事件里监听暂停状态，同时验证播放位置是否接近曲目结尾，过滤掉用户手动暂停的情况：

let currentTrackId = null;

player.addListener('player_state_changed', (state) => {
  if (!state || !state.track_window) return;

  const { current_track, position, duration, paused } = state;

  if (current_track.id !== currentTrackId) {
    currentTrackId = current_track.id;
    return;
  }

  // 只有当播放器暂停且播放位置接近结尾时，判定为曲目完成
  if (paused && position >= duration - 500) {
    handleTrackCompletion();
  }
});

额外注意事项 #

• 阈值设置：不要把阈值设得太小（比如小于100毫秒），避免因为网络缓冲或播放器进度更新延迟导致误判。
• 状态重置：一定要跟踪当前曲目ID，否则切换曲目后可能会触发上一首的结束逻辑。
• 错误处理：对播放器状态获取失败的情况做容错，避免报错阻塞应用逻辑。

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