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

时间:2018-10-29 11:34:26

标签: javascript json api audio spotify

我试图从播放按钮开始制作音频播放器。在我的HTMl代码中,我做了一个按钮:

<a href="#" id="play" alt="animate" 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为“ pause”的按钮来制作暂停按钮。然后我做了以下事情:

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

有人可以帮我吗?

1 个答案:

答案 0 :(得分:1)

tl; dr:此答案底部的有效摘要!


df1 <- data.frame(ID = c("BBRG", "BBGR"), stringsAsFactors = FALSE) 字段采用包含Spotify uris的数组。 uris不能解析为数组,而是不能解析为端点等待的字符串。因此,可以使用"uris": ["spotify:track:"] + apiData.item.id

This代码段显示了两者之间的区别。

[`spotify:track:${id}`]

停止按钮起作用的原因是Spotify的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 端点不使用您传入的任何数据。pause端点只有一个名为pause的可选查询参数。因此,您随其传递的数据将被忽略。因此,如下面的代码片段所示,可以简化Ajax的暂停调用。


如果使用已授权device_id范围的访问令牌,这里有两个工作片段。

播放

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
  })
});