[英]Spotify api 1.0.0 get image of playlist of given set of tracks
我在這里迷失了獲取給定曲目集的播放列表的圖像。
我就是無法正常工作。
這是我的代碼。
我包括兩個播放列表,一個由一組給定的曲目組成,一個實際存在。
第一個我在做什么錯? 我什至可以正確創建臨時播放列表嗎?
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();
});
您在這里沒有做錯任何事情。 當前,顯示的是占位符圖像,而不是臨時播放列表的拼接圖。
調試代碼(如果未縮小,則會有所幫助),將向您顯示占位符圖像(帶有注釋的灰色背景)被設置為節點的圖像,但保持隱藏狀態,直到超過時間限制(不到半秒)。 在此期間,正在加載播放列表中的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);
});
});
});
我不知道是否需要修復此問題,但事實就是這樣。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.