1

在获取给定曲目集的播放列表的图像时，我在这里失去了理智。

我只是无法让它工作。

这是我的代码。

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

我在第一个做错了什么？我是否正确创建了临时播放列表？

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();

        });
4

1 回答 1

1

你在这里没有做错任何事。目前，临时播放列表会显示占位符图像而不是马赛克。

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

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

我不知道这是否被认为需要修复，但它就是这样。

于 2013-07-05T12:35:09.507 回答