通过按钮发送命令播放曲目

Question

我目前正在从事一个学校项目，在该项目中，当按下网站上的按钮时，我想让 Spotify 在特定位置播放特定歌曲，并且我创建了一个按钮，按下时播放以下事件：

document.getElementById('play-song').addEventListener('click', function() {      
  $.ajax({
    POST: 'https://api.spotify.com/v1/me/player/play',
    headers: {
      'Authorization': 'Bearer ' + access_token
    },
    data: {
      'context_uri' : 'spotify:track:2iCcqggir1VUNIHfKDYKX9',
      'position_ms' : 5000 
    }
  })
}, false);

但是每当我按下按钮时，什么都没有发生，控制台中没有错误，我的 Spotify 也没有播放歌曲。我在这里做错了吗？

此代码的文档可在此处找到：https://developer.spotify.com/documentation/web-api/reference/player/start-a-users-playback/

Answer 1

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

---

您使用 $.ajax() 的方式与 Spotify 端点的工作方式不对应。您的 sn-p 正在生成 GET 请求。文档虽然声明您要使用的端点需要PUT。正如您在 sn-p 中看到的，这是通过使用 type: 'PUT' 修复的。为了传递 URL，使用了 url 键。

---

使用data 是正确的选择，尽管缺少一些东西。如果您像发布的那样使用它，则数据将作为 formdata 传输。这不是 Spotify 的端点所期望的。您实际上需要在请求有效负载中传输数据。这是通过使用dataType: "json" 和contentType: "application/json" 实现的。对数据使用JSON.stringify() 也解决了与此问题相关的一些问题。

---

在请求负载中，您使用了context_uri 字段。这就是 Spotify 描述context_uri 字段的方式。

可选。要播放的上下文的 Spotify URI。有效的上下文是专辑、艺术家、播放列表。

因此，曲目不是上下文。因此，如果您想播放曲目，这不是您想要使用的领域。在您的情况下，需要uris。这就是 Spotify 描述uris 字段的方式。

可选。要播放的 Spotify 曲目 URI 的 JSON 数组。

当只播放一首曲目时，仍然需要一个数组，如您在 sn-p 中看到的那样。

---

在这里您可以找到我修复了您的 AJAX 调用的工作 sn-p。此 sn-p 中使用的访问令牌必须至少包含 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:2iCcqggir1VUNIHfKDYKX9"],
    "position_ms": 5000
  })
});

Answer 2

我认为 .then() 对你有用

document.getElementById('play-song').addEventListener('click', function() {      
   $.ajax({
     POST: 'https://api.spotify.com/v1/me/player/play',
     headers: {
       'Authorization': 'Bearer ' + access_token
     },
     data: {
        'context_uri' : 'spotify:track:2iCcqggir1VUNIHfKDYKX9',
        'position_ms' : 5000 
     }}).then(function(data) {
          if (data) {
              // do other stuff
          } else {
              // do other stuff
          }});
     }, false);