如何通过Spotify Web API播放歌曲，spotify-web-api-node及SDK实现求助

spotify-web-api-node 是用来调用 Spotify REST 接口的通用工具库，本身不承载音视频播放能力，播放功能必须结合 Spotify 官方的 Web Playback SDK（前端运行）实现，完整流程如下：

1. 前期准备 #

• 前往 Spotify 开发者后台创建应用，将你个人网站的域名同时添加到重定向URI白名单和跨域资源共享(CORS)白名单
• 确认你使用的 Spotify 账号为 Premium 订阅，Web Playback SDK 不支持免费账号使用
• 确保后续授权环节包含streaming、user-read-playback-state、user-modify-playback-state三个核心权限

2. 后端用 spotify-web-api-node 生成授权凭证 #

你可以直接复用已有的 spotify-web-api-node 依赖完成授权流程，示例代码如下：

const SpotifyWebApi = require('spotify-web-api-node');

// 初始化实例
const spotifyApi = new SpotifyWebApi({
  clientId: '你的Spotify应用Client ID',
  clientSecret: '你的Spotify应用Client Secret',
  redirectUri: '你网站的授权回调地址'
});

// 生成带播放权限的授权链接，引导用户点击授权
const authUrl = spotifyApi.createAuthorizeURL(
  ['streaming', 'user-read-playback-state', 'user-modify-playback-state'],
  '自定义随机字符串用于防CSRF校验'
);

// 用户授权回调后拿到code，交换为access token返回给前端
async function getToken(code) {
  const data = await spotifyApi.authorizationCodeGrant(code);
  return {
    accessToken: data.body.access_token,
    refreshToken: data.body.refresh_token,
    expiresIn: data.body.expires_in
  }
}

3. 前端集成 Web Playback SDK 初始化播放器 #

在前端页面引入SDK并完成播放器初始化，示例代码如下：

<!-- 引入Web Playback SDK脚本 -->
<script src="https://sdk.scdn.co/spotify-player.js"></script>
<script>
// SDK加载完成后会自动触发该全局回调
window.onSpotifyWebPlaybackSDKReady = () => {
  const accessToken = '从后端拿到的用户access token';
  // 初始化播放器实例
  const player = new Spotify.Player({
    name: '自定义播放器名称（会在Spotify的可用设备列表里显示）',
    getOAuthToken: callback => { callback(accessToken); },
    volume: 0.5
  });

  // 播放器就绪监听，拿到设备ID后续用来指定播放
  player.addListener('ready', ({ device_id }) => {
    console.log('播放器就绪，设备ID为', device_id);
    // 可将device_id传给后端，用于后续发起播放请求
  });

  // 错误监听，方便排查问题
  player.addListener('initialization_error', ({ message }) => console.error('初始化失败：', message));
  player.addListener('authentication_error', ({ message }) => console.error('认证失败：', message));
  player.addListener('account_error', ({ message }) => console.error('账号权限不足：', message));
  player.addListener('playback_error', ({ message }) => console.error('播放失败：', message));

  // 建立播放器连接
  player.connect();
};
</script>

4. 调用 spotify-web-api-node 触发播放 #

拿到前端播放器的设备ID后，就可以通过spotify-web-api-node发起播放请求：

// 给实例设置用户的access token
spotifyApi.setAccessToken('用户的有效access token');

// 指定设备播放指定歌曲
spotifyApi.play({
  device_id: '前端传回的播放器设备ID',
  uris: ['spotify:track:目标歌曲的Spotify ID，例：4cOdK2wGLETKBW3PvgPWqT']
}).then(() => {
  console.log('播放指令发送成功');
}).catch(err => {
  console.error('播放失败：', err);
});

常见问题排查 #

• 若报认证错误，优先检查授权时是否添加了streaming权限，以及access token是否在有效期内
• 若提示找不到设备，检查前端播放器是否成功连接，域名是否已经加入CORS白名单
• access token有效期为1小时，过期后需要用refresh token刷新后重新传入播放器

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