Spotify api 1.0.0 获取给定曲目集的播放列表的图像

Posted 2023-04-15

【中文标题】Spotify api 1.0.0 获取给定曲目集的播放列表的图像

【英文标题】：Spotify api 1.0.0 get image of playlist of given set of tracks

【发布时间】：2013-07-02 21:27:28

【问题描述】：

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

我就是无法让它工作。

这是我的代码。

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

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

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

        );

【参考方案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);
        );
    );
);

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

【讨论】：

好的，但它应该显示马赛克，对吧？在以前的 API 中它可以工作，为什么这不起作用：s

我已经扩展了我之前的答案，希望它有所帮助！

感谢您的澄清，但这并不能解决问题:) 我用 models.Playlist.create('Test').done(...);并且每次都有效。但是由于某种原因，您无法从临时播放列表中加载马赛克。这意味着，如果您正在构建一个从随机曲目（例如来自 Echo Nest）生成播放列表的应用程序，您将无法显示马赛克图像。我唯一的解决方法是获取前 4 个音轨的图像 ID，并通过将背景图像更改为 spotify:mosaic:id1:id2:id3:id4 自己创建马赛克，但这似乎太错误了:)跨度>

确实没有解决问题。但是，它确实解释了为什么您不会获得临时播放列表的马赛克图像。如果您将另一个参数添加到失败函数并记录该值，您将看到错误消息是“未实现”。我没有参与这项工作，所以我猜这个功能还没有为临时播放列表实现。

好的，感谢您的提醒。你可以让我联系负责这件事的团队吗？