javascript - JavaScript - Spotify API,获取播放列表曲目
问题描述
我正在使用 spotify api 搜索播放列表,然后将它们显示在我的移动应用程序中。我正在使用 Ajax 从 api 获取信息,它工作正常,但我似乎无法用结果填充 div 并使应用程序可以播放音乐片段,因为它不想允许事件听众。您将无法看到所有使用的变量,但此代码之前的所有内容都可以正常工作。
var audioObject = null;
//Spotify page
$(document).on('pagecreate', '#spotify', function(){
console.log("Spotify");
$('#search').on('click', function() {
//e.preventDefault();
searchstring = cweather;
if (!searchstring){
console.log('no input');
return;
}
console.log(searchstring);
searchPlaylist(searchstring);
});
});
var userId;
var searchPlaylist = function () {
$.ajax({
url: 'https://api.spotify.com/v1/search',
headers: {
Authorization: 'Bearer ' + spotifyAccessToken,
},
data: {
q: searchstring,
type: 'playlist',
market: 'GB',
offset: '0',
limit: '5',
},
success: function (response) {
console.log(response);
var items = response.playlists.items;
var resultsintohtml = '';
$.each(items, function(index) {
var id = items[index].id;
var name = items[index].name;
//var image = items[index].image[1].url;
userId = items[index].owner.id;
console.log(id, name, userId);
resultsintohtml += '<div style="backgroundColor="red"" data-album-id="' + id + '" class="cover"></div>';
});
console.log(resultsintohtml);
document.getElementById("results").innerHTML = resultsintohtml;
addclickevents();
}
});
};
var fetchTracks = function (playlistsId, userId, callback) {
$.ajax({
url: 'https://api.spotify.com/v1/users/' + userId + '/playlists/' + playlistsId,
headers: {
Authorization: 'Bearer ' + spotifyAccessToken,
},
success: function (response) {
console.log(response);
callback(response);
}
});
};
var addclickevents = function () {
$('.cover').click(function (e){
console.log('get song');
var target = $(this);
if (target.hasClass('playing')) {
audioObject.pause();
} else {
if (audioObject){
audioObject.pause();
}
fetchTracks(target.data('playlist-id'), function (data) {
audioObject = new
Audio(data.tracks.items[0].preview_url);
audioObject.play();
target.addClass('playing');
});
audioObject.addEventListener('pause', function(){
target.removeClass('playing');
});
}
});
};
使用此代码时,我收到以下错误: 错误 我尝试重命名变量,但我得到了相同的错误。我已经仔细检查了 spotify 中是否缺少任何信息,但我已经使用了所有可用的 ID。提前致谢。
解决方案
更新:更接近您的代码,我刚刚注意到fetchTracks
需要 3 个参数,而您只传递了 2 个。第二个参数应该是userId
,第三个应该是回调。我不知道你userId
是什么,但是,假设123
你应该像这样运行函数:
...
fetchTracks(target.data('playlist-id'), "123", function (data) {
audioObject = new Audio(data.tracks.items[0].preview_url);
audioObject.play();
target.addClass('playing');
audioObject.addEventListener('pause', function(){
target.removeClass('playing');
});
});
...
考虑到,您的代码很可能从 Spotify 的角度调用了损坏的 URL(这应该在您的控制台中显示为错误 - 很可能是 a404
但也可能是403
or 422
)。
初步答案:
假设上面的代码是产生错误的原因,在行87
(在上面的代码段中),您正在尝试在audioObject
. 根据错误,audioObject
不是 DOM 元素,而是null
. 因此,您可能需要在应用之前检查元素是否支持该方法:
...
if (audioObject)
audioObject.addEventListener('pause', function(){
target.removeClass('playing');
});
或者...
if (audioObject instanceof Element)
audioObject.addEventListener('pause', function(){
target.removeClass('playing');
});
注意(作为将来的参考):每当您决定在 [SO] 上发布代码图像而不是代码本身时,预计会被否决。
另一个注意事项:以上内容并不能修复您的应用程序的逻辑,该逻辑显然已被破坏(或至少无法按预期工作)。它只是避免在会产生错误时执行代码。
您可能希望在其中添加事件侦听器fetchTracks()
:
...
fetchTracks(target.data('playlist-id'), function (data) {
audioObject = new Audio(data.tracks.items[0].preview_url);
audioObject.play();
target.addClass('playing');
audioObject.addEventListener('pause', function(){
target.removeClass('playing');
});
});
...
...,但是,如果没有最小的工作示例,我无法确定。
推荐阅读
- java - MinIO 使用 Java SDK 与 KMS 集成
- javascript - javascript - 如何删除具有空值的奇怪cookie?
- python - 如何在没有工作人员(或使用计划)的情况下在 django/celery 中定期运行函数?
- liferay-7 - Liferay 未解决要求:导入包
- ios - 如何在 Swift 中集成 Google reCAPTCHA
- oracle - ORA-00937: 不是 11g、12c 中的单组组函数
- android - Android 使用 Espresso 测试 onActivityResult 错误
- python-3.x - 如何正确使用 `cv2.putText` 在图像上绘制阿拉伯文字?(Python+OpenCV)
- jquery - 手动调整 amp-img 的大小
- exception - SNAPSHOT_SERIALIZATION_ERROR 重复的属性 JaVers