Spotify Web Playback SDK全曲播放实现问题咨询

我完全懂你的痛点——刚开始用Spotify Web Playback SDK的时候，很容易误以为它自带直接播放曲目的API，但实际上它的核心是作为一个浏览器端的播放设备，真正的播放控制（包括指定新曲目）需要配合Spotify Web API来完成。下面是具体的实现步骤：

核心逻辑梳理 #

Spotify Web Playback SDK负责的是音频渲染和本地播放状态控制（比如暂停、音量调节），而发起“播放某首特定歌曲”的指令，需要调用Spotify Web API的player/play接口，把你的SDK设备指定为播放目标。

具体实现步骤 #

1. 确保SDK已初始化并获取设备ID #

首先你得成功初始化SDK并建立连接，拿到设备ID，这一步你应该已经完成了（毕竟能控制现有播放状态），代码大概是这样：

const player = new Spotify.Player({
  name: 'Web Playback SDK',
  getOAuthToken: cb => { cb('你的用户授权Token'); }
});

// 监听设备就绪事件，获取设备ID
player.addListener('ready', ({ device_id }) => {
  console.log('设备已就绪，ID:', device_id);
  // 把这个device_id存下来，后面要用
});

player.connect();

2. 调用Web API的player/play端点触发播放 #

拿到设备ID后，就可以通过Web API发送请求，指定要播放的曲目：

const playTrack = async (deviceId, trackUri) => {
  const authToken = '你的用户授权Token'; // 要包含streaming、user-modify-playback-state权限
  try {
    await fetch(`https://api.spotify.com/v1/me/player/play?device_id=${deviceId}`, {
      method: 'PUT',
      headers: {
        'Authorization': `Bearer ${authToken}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        uris: [trackUri] // 这里传入你要播放的曲目URI，比如"spotify:track:4cOdK2wGLETKBW3PvgPWqT"
      })
    });
  } catch (err) {
    console.error('播放请求失败:', err);
  }
};

// 调用示例：传入设备ID和曲目URI
playTrack('你的设备ID', 'spotify:track:4cOdK2wGLETKBW3PvgPWqT');

关键注意事项 #

• 权限要求：你的授权Token必须包含streaming和user-modify-playback-state这两个权限，否则API会返回权限不足的错误
• 用户状态：用户必须处于登录状态，并且你的应用已经获得了相应的授权
• 曲目URI格式：必须是Spotify标准的URI格式，比如spotify:track:[TrackID]，可以通过搜索API获取你想要的曲目URI

这样操作之后，你的Web Playback SDK设备就会开始播放指定的歌曲了，而不是只能控制现有播放状态。

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