Spotify api 1.0.0 获取给定曲目集的播放列表图像 [英] Spotify api 1.0.0 get image of playlist of given set of tracks

问题描述

在获取一组给定曲目的播放列表图像时，我失去了理智.

Losing my mind here on getting the image of a playlist of a given set of tracks.

我就是无法让它工作.

这是我的代码.

我包含了两个播放列表，一个由一组给定的曲目组成，另一个是实际存在的.

I included two playlists, one that is made of a given set of tracks and one that actually exists.

第一个我做错了什么?我什至正确创建了临时播放列表吗?

What am I'm doing wrong with the first one? Am I even creating the temporary playlist correctly?

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

        });

推荐答案

您没有做错任何事情.目前，临时播放列表显示的是占位符图像而不是马赛克.

You're not doing anything wrong here. Currently, a placeholder image is shown instead of a mosaic for temporary playlists.

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

Debugging the code (it helps if it isn't minified) will show you that a placeholder image (gray background with a note) is set as the node's image but stays hidden until a time limit has passed (less than half a second). During this time, the image property from the playlist is being loaded. If the image is loaded successfully, the placeholder is replaced or not shown at all if the time limit hasn't passed. The code below attempts to load the image property from a temporary playlist, which fails, thus showing the placeholder instead.

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

我不知道这是否被认为需要修复，但事实就是如此.

I don't know if this is something that is considered in need of fixing, but it's the way it is.

这篇关于Spotify api 1.0.0 获取给定曲目集的播放列表图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！