Spotify API 1.0.0获取给定轨道的播放列表的图像

Question

我在这里迷失了获取给定曲目集的播放列表的图像。

我就是无法正常工作。

这是我的代码。

我包括两个播放列表，一个由一组给定的曲目组成，一个实际存在。

第一个我在做什么错？ 我什至可以正确创建临时播放列表吗？

require([
            '$api/models',
            '$views/image#Image',
            '$views/list#List'
        ], function(models, Image, List) {
            'use strict';

            var image, trackUris, tracks = [], customPlaylist, customPlaylistList;

            // list of track uris
            trackUris = [
                'spotify:track:0jakfggA0WkYpkAXni6pts',
                'spotify:track:2g1EMRbn6So6zGTdwNyySf',
                'spotify:track:4kNfh9In8hjuuERSZhwTTx',
                'spotify:track:1JHUxxd77M4ViaqJZfBdl0',
                'spotify:track:6x3db7BbBjDYZH2ZAcvYyC',
                'spotify:track:6czyeVTQtHYPnZgXE6op0I',
                'spotify:track:51Vyh1xfCD27SneoG7NAhb'
            ];

            // get track objects from uris
            for (var i = 0; i < trackUris.length; i++) {
                tracks.push(models.Track.fromURI(trackUris[i]));
            }

            // create temporary playlist
            var title = 'tmp_' + Date.now();
            var tmp = models.Playlist.createTemporary(title).done(function(playlist){

                // get tracks collection and add tracks to it
                playlist.load(['tracks']).done(function(){
                    for (var i = 0; i < tracks.length; i++) {
                        playlist.tracks.add(tracks[i]);
                    }
                });
                customPlaylist = playlist;

            }).fail(function() {
                console.log("Failed");
            });

            // create image of playlist
            image = Image.forPlaylist(customPlaylist, {width: 200, height: 200, player: true});
            document.getElementById('customPlaylistCover').appendChild(image.node);

            // create a list view for the playlist
            customPlaylistList = List.forPlaylist(customPlaylist);
            document.getElementById('customPlaylistList').appendChild(customPlaylistList.node);
            customPlaylistList.init();

            // get all the above for an existing playlist
            var playlist = models.Playlist.fromURI('spotify:user:116690321:playlist:6l3dvYJaGrX5mqkNntbyLx');
            image = Image.forPlaylist(playlist, {width: 200, height: 200, player: true});
            document.getElementById('playlistCover').appendChild(image.node);

            var playlistList = List.forPlaylist(playlist);
            document.getElementById('playlistList').appendChild(playlistList.node);
            playlistList.init();

        });

Answer 1

您在这里没有做错任何事情。 当前，显示的是占位符图像，而不是临时播放列表的拼接图。

调试代码（如果未缩小，则会有所帮助），将向您显示占位符图像（带有注释的灰色背景）被设置为节点的图像，但保持隐藏状态，直到超过时间限制（不到半秒）。 在此期间，正在加载播放列表中的image属性。 如果成功加载图像，则在未超过时间限制的情况下，占位符将被替换或完全不显示。 下面的代码尝试从临时播放列表加载image属性，但失败，因此显示占位符。

require(['$api/models', '$views/image#Image'], function(models, Image) {
    models.Playlist.createTemporary("Temporary Playlist").done(function(playlist) {
        playlist.load("tracks").done(function(playlist) {

            // Adding some random tracks to the temporary playlist
            playlist.tracks.add(models.Track.fromURI("spotify:track:2YtDzuAcSVk2j4UFXON5iG"));
            playlist.tracks.add(models.Track.fromURI("spotify:track:6xzCQrXrn0uOOKBQZK1zsF"));
            playlist.tracks.add(models.Track.fromURI("spotify:track:0m1sOrAltrx0oQlqKVUf75"));
            playlist.tracks.add(models.Track.fromURI("spotify:track:40RFNnTV6CAounCsx56TZ2"));

            // Checking if the playlist image can be loaded.
            // This code holds no purpose other than showing that 
            // loading an image from a temporary playlist fails
            playlist.load("image").done(function(playlistWithImage) {
                console.log("Loaded image.");
            }).fail(function(playlistWithImage) {
                console.log("Failed to load image.");
            })

            // Appending the playable node to the body tag
            var image = Image.forPlaylist(playlist, {width: 100, height: 100, player : true });
            document.body.appendChild(image.node);
        });
    });
});

我不知道是否需要修复此问题，但事实就是这样。