如何使用 Spotify Web API 制作音频播放器？

Posted 2023-04-15

【中文标题】如何使用 Spotify Web API 制作音频播放器？

【英文标题】：How do I make an audio player with the Spotify Web API?

【发布时间】：2019-04-02 08:04:05

【问题描述】：

我试图从播放按钮开始制作音频播放器。在我的 html 代码中，我制作了一个按钮：

<a href="#" id="play"  class="btnstyle">Play</a>

然后我用这段代码让它播放一首歌，但它似乎不起作用。

document.getElementById('play').addEventListener('click', function() 
  $.ajax(
    url: 'https://api.spotify.com/v1/me/player/play',
    type: 'PUT',
    headers: 
      'Authorization': 'Bearer ' + access_token
    ,
    dataType: "json",
    contentType: "application/json",
    data: JSON.stringify(
        "uris": ["spotify:track:"] + apiData.item.id,
        "position_ms": apiData.progress_ms
    )
  );
); 

apiData.item.id 指当前播放曲目的id apiData.progress_ms 指当前播放曲目的进度，以毫秒为单位。

当我运行我的代码并单击播放按钮时，没有任何反应。我不知道我做错了什么。

但我尝试通过首先制作一个 ID 为“暂停”的按钮来制作暂停按钮。然后我做了以下事情：

document.getElementById('pause').addEventListener('click', function() 
  $.ajax(
    url: 'https://api.spotify.com/v1/me/player/pause',
    type: 'PUT',
    headers: 
      'Authorization': 'Bearer ' + access_token
    ,
    dataType: "json",
    contentType: "application/json",
    data: JSON.stringify(
      "uris": ["spotify:track:"] + apiData.item.id,
      "position_ms": apiData.progress_ms
    )
  );
);

这确实有效！但我不明白为什么播放按钮不起作用而暂停按钮起作用。 这是我用于两个按钮的文档： https://developer.spotify.com/documentation/web-api/reference/player/start-a-users-playback/ https://developer.spotify.com/documentation/web-api/reference/player/pause-a-users-playback/

对于播放按钮，我在控制台日志中收到此错误： error 400

有人可以帮帮我吗？

【问题讨论】：

400 错误是一个错误的请求，因此在 RESTful API 设计中，它通常表明您的请求在某种程度上不符合 API 的预期。在浏览器的网络选项卡中查看 a) 检查您的请求的实际外观以及它是否符合您的预期，是否符合文档要求，以及 b) 检查来自服务器的响应是否包含有关内容的更多信息错误实际上是。

【参考方案1】：

tl;dr：在这个答案的底部工作 sn-ps！

---

uris 字段采用包含 Spotify uris 的数组。这个"uris": ["spotify:track:"] + apiData.item.id 不会解析为数组，而是解析为不是端点等待的字符串。因此，使用[`spotify:track:$id`] 将起作用。

Thissn-p 显示两者的区别。

console.log(["spotify:track:"] + id);
// Output with id = 1234: "spotify:track:1234" -> String

console.log([`spotify:track:$id`]);
// Output with id = 1234: ["spotify:track:1234"] -> Array of strings

---

停止按钮起作用的原因是 Spotify 的 pause 端点不使用您传入的任何数据。pause 端点只有一个可选的查询参数，称为 device_id。因此，您与它一起传递的数据会被忽略。因此，可以简化 Ajax 暂停调用，如下面的 sn-ps 所示。

---

这里有两个有效的 sn-ps，假设使用了具有 user-modify-playback-state 范围授权的访问令牌。

播放

$.ajax(
  url: 'https://api.spotify.com/v1/me/player/play',
  type: 'PUT',
  headers: 
    'Authorization': 'Bearer ' + access_token
  ,
  dataType: "json",
  contentType: "application/json",
  data: JSON.stringify(
    "uris": [`spotify:track:$apiData.item.id`],
    "position_ms": apiData.progress_ms
  )
);

暂停

$.ajax(
  url: 'https://api.spotify.com/v1/me/player/pause',
  type: 'PUT',
  headers: 
    'Authorization': 'Bearer ' + access_token
  
);