如何通过Spotify Web API实现点击播放指定曲目？

核心问题：Client Credentials Flow不支持用户播放操作 #

你当前用的Client Credentials Flow获取的是应用级token，没有关联具体Spotify用户，所以无法调用/me/player这类需要用户上下文的接口（会返回401/403错误）。要实现用户播放操作，必须使用用户授权类的认证流程，推荐前端友好的Implicit Grant Flow（无需后端）。

步骤1：切换到Implicit Grant Flow获取用户授权token #

1. 在Spotify开发者后台的应用设置里，添加你的前端域名到Redirect URIs（比如本地开发的http://localhost:3000）。
2. 修改认证逻辑，自动跳转授权页面获取token：

useEffect(() => {
  // 检查URL hash里是否已有token
  const hash = window.location.hash;
  let token = window.localStorage.getItem("spotify_token");

  if (!token && hash) {
    token = hash
      .substring(1)
      .split("&")
      .find(elem => elem.startsWith("access_token"))
      .split("=")[1];

    window.location.hash = "";
    window.localStorage.setItem("spotify_token", token);
    setAccessToken(token);
  } else if (!token) {
    // 没有token则自动跳转到授权页面
    const clientId = "你的CLIENT_ID";
    const redirectUri = "你的跳转URI（需和后台配置一致）";
    const scope = "user-modify-playback-state user-read-playback-state user-read-currently-playing";
    window.location.href = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${encodeURIComponent(scope)}`;
  } else {
    setAccessToken(token);
  }
}, []);

• scope必须包含播放相关权限，否则调用播放接口会报错。
• 用localStorage存token，避免每次刷新都重新授权。

步骤2：获取专辑的曲目列表 #

原来的搜索只拿到了专辑信息，需要在点击专辑时获取对应曲目：

// 新增获取专辑曲目的函数
const fetchAlbumTracks = async (albumId) => {
  if (!accessToken) return;
  const params = {
    method: "GET",
    headers: {
      Authorization: `Bearer ${accessToken}`
    }
  };
  const res = await fetch(`https://api.spotify.com/v1/albums/${albumId}/tracks`, params);
  const data = await res.json();
  setMusics(data.items); // 存储曲目列表
};

// 渲染专辑时添加点击事件触发获取曲目
{albums.map(album => (
  <div key={album.id} onClick={() => fetchAlbumTracks(album.id)}>
    <img src={album.images[0].url} alt={album.name} />
    <p>{album.name}</p>
  </div>
))}

步骤3：实现点击曲目播放功能 #

有两种方式实现播放：

方式1：调用Spotify播放接口（要求用户已打开Spotify客户端） #

const playTrack = async (trackUri) => {
  if (!accessToken) return;
  const params = {
    method: "PUT",
    headers: {
      Authorization: `Bearer ${accessToken}`,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      uris: [trackUri] // 曲目Spotify URI，格式为spotify:track:xxxxxx
    })
  };
  try {
    await fetch("https://api.spotify.com/v1/me/player/play", params);
  } catch (err) {
    console.error("播放失败：", err);
    alert("请先打开Spotify客户端并保持活跃");
  }
};

// 渲染曲目时添加点击事件
{musics.map(track => (
  <div key={track.id} onClick={() => playTrack(track.uri)}>
    <p>{track.name}</p>
    <p>歌手：{track.artists[0].name}</p>
  </div>
))}

方式2：使用Spotify Web Playback SDK（网页内直接播放） #

如果想让用户不需要打开Spotify客户端，直接在网页播放，可以集成Web Playback SDK：

1. 引入SDK脚本：

<script src="https://sdk.scdn.co/spotify-player.js"></script>

2. 初始化播放器并实现播放：

useEffect(() => {
  if (!accessToken) return;
  window.onSpotifyWebPlaybackSDKReady = () => {
    const player = new window.Spotify.Player({
      name: "你的网页播放器",
      getOAuthToken: cb => { cb(accessToken); },
      volume: 0.5
    });

    player.addListener('ready', ({ device_id }) => {
      console.log('播放器已就绪，设备ID：', device_id);
      // 存储device_id，调用播放接口时指定该设备
    });

    player.connect();
  };
}, [accessToken]);

// 修改播放函数，指定Web播放器设备
const playTrack = async (trackUri, deviceId) => {
  const params = {
    method: "PUT",
    headers: {
      Authorization: `Bearer ${accessToken}`,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      uris: [trackUri],
      device_id: deviceId
    })
  };
  await fetch("https://api.spotify.com/v1/me/player/play", params);
};

关键注意事项 #

• 所有用户播放相关接口必须使用用户授权的token，Client Credentials Flow完全不适用。
• Implicit Grant Flow的token有效期为1小时，需处理过期刷新（可监听token过期时间，或接口返回401时重新授权）。
• Web Playback SDK需要HTTPS环境（localhost除外），部署时需注意。

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