Spotify Web Playback SDK快速入门示例无法播放音乐求助

1. 无播放器界面的原因 #

Web Playback SDK本身不提供默认的可视化播放界面，所有播放控制、进度展示、曲目信息等UI组件都需要你自行开发实现，因此当前页面只有你手动编写的切换播放按钮是正常现象。

2. 无法播放音乐的常见遗漏配置 #

• 权限校验：你的OAuth令牌必须提前申请streaming、user-read-playback-state、user-modify-playback-state三个权限，缺少任意权限都会导致播放控制失败。
• 账号要求：Web Playback SDK仅支持Spotify Premium会员使用，免费账号无法调用该SDK实现播放。
• 未切换播放设备：SDK初始化完成后只是在你的Spotify账号下注册了一个新的播放设备，不会自动将当前播放源切换到该Web播放器。你需要在ready事件回调拿到device_id后，调用Spotify的播放接口指定使用该设备播放，同时传入你要播放的曲目URI。
• 浏览器自动播放拦截：现代浏览器默认禁止非用户主动交互触发的有声媒体播放，首次播放必须在用户点击操作（比如点击你页面上的切换播放按钮）的回调中触发，否则会被浏览器直接拦截。

代码修改示例 #

你可以在ready回调中补充设备切换逻辑，或者在点击播放按钮时先判断当前设备是否已激活，示例逻辑如下：

// 放到ready事件回调内部使用
document.getElementById("togglePlay").onclick = async function () {
  // 先获取当前播放状态，确认是否已切到当前Web播放器
  const currentPlayer = await fetch("/v1/me/player", {
    headers: { Authorization: `Bearer ${token}` }
  }).then(res => res.json());
  // 如果当前设备不是我们创建的Web播放器，先切设备并播放指定曲目
  if (!currentPlayer || currentPlayer.device.id!== device_id) {
    await fetch(`/v1/me/player/play?device_id=${device_id}`, {
      method: "PUT",
      headers: { Authorization: `Bearer ${token}` },
      body: JSON.stringify({
        uris: ["spotify:track:替换为你要播放的曲目ID"]
      })
    });
    return;
  }
  // 已切到当前设备，直接切换播放状态
  player.togglePlay();
};

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