如果不使用用户数据,如何在Spotify Web API中搜索简单的艺术家信息?

时间:2018-01-27 22:48:55

标签: spotify

我无法弄清楚如何获得简单的艺术家信息。这是我的所有应用程序真正需要做的,我不打算永远得到任何用户数据。 我看到Spotify有一个例子: https://developer.spotify.com/web-api/code-examples/

他们的'搜索艺术家(和查找)演示'jsfiddle示例应该'按原样'工作: http://jsfiddle.net/JMPerez/0u0v7e1b/ 似乎代码不执行任何身份验证代码(它似乎只是在浏览器中'401授权'错误,所以不确定为什么Spotify会将其作为官方工作演示示例发布)。 我将在这篇文章的底部发布JS代码。 但我想也许对于非以用户为中心的信息,我们可能不需要进行任何身份验证(除了像SongKick / LastFM这样的其他api传递简单的api密钥)。至少那就是我所希望的。

任何人都可以帮助制作一个有效的JSFiddle吗? (我可以提供假装我的api密钥,然后可以运行示例)。

// find template and compile it
var templateSource = document.getElementById('results-template').innerHTML,
    template = Handlebars.compile(templateSource),
    resultsPlaceholder = document.getElementById('results'),
    playingCssClass = 'playing',
    audioObject = null;

var fetchTracks = function (albumId, callback) {
    $.ajax({
        url: 'https://api.spotify.com/v1/albums/' + albumId,
        success: function (response) {
            callback(response);
        }
    });
};

var searchAlbums = function (query) {
    $.ajax({
        url: 'https://api.spotify.com/v1/search',
        data: {
            q: query,
            type: 'album'
        },
        success: function (response) {
            resultsPlaceholder.innerHTML = template(response);
        }
    });
};

results.addEventListener('click', function (e) {
    var target = e.target;
    if (target !== null && target.classList.contains('cover')) {
        if (target.classList.contains(playingCssClass)) {
            audioObject.pause();
        } else {
            if (audioObject) {
                audioObject.pause();
            }
            fetchTracks(target.getAttribute('data-album-id'), function (data) {
                audioObject = new Audio(data.tracks.items[0].preview_url);
                audioObject.play();
                target.classList.add(playingCssClass);
                audioObject.addEventListener('ended', function () {
                    target.classList.remove(playingCssClass);
                });
                audioObject.addEventListener('pause', function () {
                    target.classList.remove(playingCssClass);
                });
            });
        }
    }
});

document.getElementById('search-form').addEventListener('submit', function (e) {
    e.preventDefault();
    searchAlbums(document.getElementById('query').value);
}, false);

0 个答案:

没有答案