javascript - 如何使用 Spotify Web API 制作音频播放器?
问题描述
我试图从播放按钮开始制作音频播放器。在我的 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 是指当前播放曲目的进度,单位为毫秒。
当我运行我的代码并单击播放按钮时,没有任何反应。我不知道我做错了什么。
但我尝试通过首先制作一个名为“暂停”的按钮来制作一个暂停按钮。然后我做了以下事情:
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/
对于播放按钮,我在控制台日志中收到此错误: 错误 400
有人可以帮帮我吗?
解决方案
tl; dr:此答案底部的工作片段!
该uris
字段采用包含 Spotify uris 的数组。这"uris": ["spotify:track:"] + apiData.item.id
不会解析为数组,而是解析为不是端点等待的字符串。因此,使用[`spotify:track:${id}`]
将起作用。
这个片段显示了两者之间的区别。
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 暂停调用,如下面的片段所示。
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
}
});
推荐阅读
- node.js - 如何使用node.js每5分钟左右使用不同的渲染参数自动更新带有路由“/”的索引页面?
- selenium - 如何在 Cucumber Capybara 测试期间切换到不同的浏览器?
- r - 如何根据 R 中的条件获取下个月或当前月份
- ocaml - Ocaml中最长的递增子数组
- sql - sql oracle中的数据透视表,没有聚合和常量表达式
- c# - 将自定义唯一属性添加到我的 IdentityUser
- javascript - 滚动到 DIV 元素的中心 - Angular 7
- django - 使用 Django 测试日志的有效方法
- r - 单因素预测
- python - 字符串转换为干净的 int 列表