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

Question

我正在使用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。 提前致謝。

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行（在上面的代碼段中），您嘗試在audioObject上添加事件偵聽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仍然為null
• fetchTracks將被調用，但在收到響應之前不會觸發回調
• audioObject.addEventListener將被調用，但 audioObject是null
• fetchTracks的響應返回，並在回調中將audioObject設置為Audio的實例

您為什么選擇在回調之外添加事件偵聽器？