Spotify的API 1.0.0获取给定的轨道的播放列表的图像 [英] Spotify api 1.0.0 get image of playlist of given set of tracks
问题描述
在这里失去我的心在得到一组给定的曲目的播放列表的形象。
我只是无法得到它的工作。
下面是我的code。
我包括两次播放列表，一个是由一组给定的轨道和一个实际存在的。
的我是什么我与第一个做错了什么？难道我连正确创建临时播放列表？
规定（[
'$ API /模型'，
'$视图/图片＃图片'，
'$视图/列表＃列表
]，功能（模型，图片，列表）{
使用严格的; VAR形象，trackUris，轨道= []，customPlaylist，customPlaylistList; //跟踪的URI列表
trackUris = [
Spotify的：轨道：0jakfggA0WkYpkAXni6pts'，
Spotify的：轨道：2g1EMRbn6So6zGTdwNyySf'，
Spotify的：轨道：4kNfh9In8hjuuERSZhwTTx'，
Spotify的：轨道：1JHUxxd77M4ViaqJZfBdl0'，
Spotify的：轨道：6x3db7BbBjDYZH2ZAcvYyC'，
Spotify的：轨道：6czyeVTQtHYPnZgXE6op0I'，
Spotify的：轨道：51Vyh1xfCD27SneoG7NAhb
]; //得到的URI跟踪物体
对于（VAR I = 0; I＆LT; trackUris.length;我++）{
tracks.push（models.Track.fromURI（trackUris [I]））;
} //创建临时播放列表
VAR标题='tmp_'+ Date.now（）;
VAR TMP = models.Playlist.createTemporary（职称）.done（功能（播放列表）{ //获取歌曲的收集和曲目添加到它
playlist.load（['轨道']）。完成（功能（）{
对于（VAR I = 0; I＆LT; tracks.length;我++）{
playlist.tracks.add（曲目[I]）;
}
}）;
customPlaylist =播放列表; }）失败（函数（）{
的console.log（失败）;
}）; //创建播放列表的形象
图像= Image.forPlaylist（customPlaylist，{宽度：200，高度：200，播放器：真}）;
的document.getElementById（'customPlaylistCover'）的appendChild（image.node）。 //创建播放列表的列表视图
customPlaylistList = List.forPlaylist（customPlaylist）;
的document.getElementById（'customPlaylistList'）的appendChild（customPlaylistList.node）。
customPlaylistList.init（）; //得到所有上述现有的播放列表
VAR播放列表= models.Playlist.fromURI（'Spotify的：用户：116690321：播放列表：6l3dvYJaGrX5mqkNntbyLx'）;
图像= Image.forPlaylist（播放列表，{宽度：200，高度：200，播放器：真}）;
的document.getElementById（'playlistCover'）的appendChild（image.node）。 VAR playlistList = List.forPlaylist（播放）;
的document.getElementById（'playlistList'）的appendChild（playlistList.node）。
playlistList.init（）; }）;
你没有做错什么在这里。目前，一个占位符图像显示，而不是临时的播放列表马赛克。
调试code（它帮助，如果它不是缩小的），将显示一个占位符图像（灰色背景的音符）被设定为节点的形象，但保持隐藏，直到时限已过（少大于半秒）。在此期间，从播放列表中的图像特性的加载。如果图像加载成功，占位符被替换或根本没有，如果期限尚未通过图示。下面的code尝试将图像属性从临时播放列表，从而未能负荷，从而显示占位符代替。
规定（['$ API /模型'，'$视图/图片＃图片']，功能（模型，图片）{
models.Playlist.createTemporary（临时播放列表）。完成（功能（播放列表）{
playlist.load（轨道）。完成（功能（播放列表）{ //添加一些随机的曲目临时播放列表
playlist.tracks.add（models.Track.fromURI（Spotify的：轨道：2YtDzuAcSVk2j4UFXON5iG））;
playlist.tracks.add（models.Track.fromURI（Spotify的：轨道：6xzCQrXrn0uOOKBQZK1zsF））;
playlist.tracks.add（models.Track.fromURI（Spotify的：轨道：0m1sOrAltrx0oQlqKVUf75））;
playlist.tracks.add（models.Track.fromURI（Spotify的：轨道：40RFNnTV6CAounCsx56TZ2））; //检查是否播放列表的图像可以被加载。
//这个code持有不低于表明其他用途
//加载图像从临时播放列表失败
playlist.load（图像）。完成（功能（playlistWithImage）{
的console.log（加载图像。）;
}）失败（函数（playlistWithImage）{
的console.log（无法加载的形象。）;
}） //追加可播放的节点到body标签
VAR图像= Image.forPlaylist（播放列表，{宽度：100，高度：100，播放器：真}）;
document.body.appendChild（image.node）;
}）;
}）;
}）;
我不知道这是什么，是需要固定的考虑，但它是事情是这样的。
Losing my mind here on getting the image of a playlist of a given set of tracks.
I just can't get it to work.
Here's my code.
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屋！
