JavaScript - Spotify API，获取播放列表曲目

Question

我正在使用 spotify api 搜索播放列表，然后将它们显示在我的移动应用程序中。我正在使用 Ajax 从工作正常的 api 获取信息，但我似乎无法用结果填充 div 并使应用程序可以播放音乐 sn-ps，因为它不想允许事件监听器。您将无法看到所有使用的变量，但在此代码之前的所有内容都可以正常工作。

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

使用此代码时，出现以下错误： Errors 我试过重命名变量，但我得到了同样的错误。我已经仔细检查了 spotify 中是否缺少任何信息，但我已经使用了所有可用的 ID。提前致谢。

Answer 1

更新： 仔细查看您的代码，我刚刚注意到 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（这应该在您的控制台中显示为错误 - 很可能是 404，但也可能是 403 或 422 )。

---

初步答案：

假设上面的代码是产生错误的原因，在87 行（在上面的sn-p 中），您正在尝试在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');
  });
});
...

...，但是，如果没有最小的工作示例，我无法确定。

Answer 2

如果audioObject只在fetchTracks的回调中赋值，则在调用audioObject.addEventListener时不会定义。

当您单击.cover 时，将调用事件侦听器。 如果封面没有“播放”类，那么：

• audioObject 仍然为空
• fetchTracks 将被调用，但在收到响应之前不会触发回调
• audioObject.addEventListener 将被称为 但 audioObject 是 null
• fetchTracks 的响应返回，并在回调中将 audioObject 设置为 Audio 的实例

您选择在回调之外添加事件侦听器有什么原因吗？