Spotify的API创建临时播放列表不加载 [英] Spotify API Create Temp Playlist Not Loading

查看:262
本文介绍了Spotify的API创建临时播放列表不加载的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在做一个小应用程序,显示一个艺术家的相关艺术家的顶部第一首歌曲的列表。当我尝试并加载我的应用程序的第一次,这说明不了什么。但是,当我刷新应用程序的一切似乎工作。当我开始不断的重装,它不断向列表中添加更多的相同轨迹的为好。

如何阻止它继续追加更多的曲目列表以及收紧code,使其工作在负载?

 规定([
  '$ API /模型',
  '$视图/列表#列表',
  '$ API / toplists#Toplist  ],功能(机型,列表,Toplist){
    使用严格的;  //建立播放列表
  功能buildList(trackURIArray){
    VAR ARR = trackURIArray;
    models.Playlist
      .createTemporary(myTempList)
      .done(功能(播放列表){
        playlist.load(轨道)。完成(功能(loadedPlaylist){
          对于(VAR I = 0; I< arr.length;我++){
            loadedPlaylist.tracks.add(models.Track.fromURI(ARR [I]));
          }
        });        //创建列表
        VAR列表= List.forPlaylist(播放列表,{
          风格:圆润
        });        $('#playlistContainer')追加(list.node)。
        list.init();
      });
  }  //获取顶级赛道
  功能getTopTrack(艺术家,NUM,回调){
    VAR artistTopList = Toplist.forArtist(艺术家);    artistTopList.tracks.snapshot(0,NUM).done(功能(快照){
      snapshot.loadAll('名')。完成(功能(曲目){
        VAR我,num_toptracks;
        num_toptracks = NUM​​;        对于(i = 0; I< num_toptracks;我++){
          回调(艺术家,曲目[I]);
        }
      });
    });
  }  //获取相关
  功能getRelated(artist_uri){
    VAR artist_properties = ['名','知名度','关系','URI'];    models.Artist
    .fromURI(artist_uri)
    .load(artist_properties)
    .done(功能(艺术家){      artist.related.snapshot()。完成(功能(快照){
        snapshot.loadAll('名')。完成(功能(艺术家){
          变种临时= [];          对于(VAR I = 0; I< artists.length;我++){            getTopTrack(艺术家[I],1,功能(艺术家,toptrack){
              VAR P,N,U;              P = artist.popularity;
              N = artist.name;
              U = artist.uri;              temp.push(toptrack.uri);            });
          }
          //建立这些曲目列表
          buildList(临时);
        });
      });
    });
  }  getRelated('Spotify的:艺术家:2VAvhf61GgLYmC6C8anyX1');
});


解决方案

使用的承诺你可以延迟列表的渲染,直到您已成功由具有曲目的临时列表。此外,为了prevent增加重装上重复轨道,分配一个唯一的名称来临时的播放列表。

 规定([
  '$ API /模型',
  '$视图/列表#列表',
  '$ API / toplists#Toplist
],功能(机型,列表,Toplist){
  使用严格的;  //建立播放列表
  功能buildList(trackURIArray){
    VAR ARR = trackURIArray;
    models.Playlist
      .createTemporary(myTempList_+新的Date()。的getTime())
      .done(功能(播放列表){
        playlist.load(轨道)。完成(功能(){
          playlist.tracks.add.apply(playlist.tracks,ARR).done(函数(){
            //创建列表
            VAR列表= List.forCollection(播放列表,{
              风格:圆润
            });            $('#playlistContainer')的appendChild(list.node)。
            list.init();
          });
        });
      });
  }  //获取顶级赛道
  功能getTopTrack(艺术家,NUM){
    VAR诺=新models.Promise();
    VAR artistTopList = Toplist.forArtist(艺术家);    artistTopList.tracks.snapshot(0,NUM).done(功能(快照){
      snapshot.loadAll()。完成(功能(曲目){
        promise.setDone(曲目[0]);
      })失败(函数(f){
        promise.setFail(F);
      });
    });    返回的承诺;
  }  //获取相关
  功能getRelated(artist_uri){
    models.Artist
      .fromURI(artist_uri)
      .load('相关')
      .done(功能(艺术家){
        artist.related.snapshot()。完成(功能(快照){
          snapshot.loadAll()。完成(功能(艺术家){            VAR承诺= [];            对于(VAR I = 0; I< artists.length;我++){
              VAR承诺= getTopTrack(艺术家[I],1);
              promises.push(承诺);
            }            models.Promise.join(许诺)
              .done(功能(曲目){
                的console.log('装载的所有曲目,轨道);
              })
              .fail(功能(曲目){
                console.error('无法加载的至少一个轨道。',轨道);
              })
              。总是(功能(曲目){
                //过滤掉从失败的结果的承诺
                buildList(tracks.filter(功能(T){
                  返回ŧ==未定义!;
                }));
              });
          });
        });
      });
  }  getRelated('Spotify的:艺术家:2VAvhf61GgLYmC6C8anyX1');
});

I'm making a little app that displays a list of the top first song of an artist's related artists. When I try and load my app for the first time, it shows nothing. But, when I "Reload Application" everything seems to work. When I constantly start "Reloading" it keeps adding more of the same tracks to the list as well.

How do I stop it from continually appending more tracks to the list as well as tighten up the code so that it works on load?

require([
  '$api/models',
  '$views/list#List',
  '$api/toplists#Toplist'

  ], function(models, List, Toplist){
    'use strict';

  // Build playlist
  function buildList(trackURIArray){
    var arr = trackURIArray;
    models.Playlist
      .createTemporary("myTempList")
      .done(function(playlist){ 
        playlist.load("tracks").done(function(loadedPlaylist){
          for(var i = 0; i < arr.length; i++){
            loadedPlaylist.tracks.add(models.Track.fromURI(arr[i]));
          }
        });

        // Create list
        var list = List.forPlaylist(playlist,{
          style:'rounded'
        });

        $('#playlistContainer').append(list.node);
        list.init();
      });
  }

  // Get top track
  function getTopTrack(artist, num, callback){
    var artistTopList = Toplist.forArtist(artist);

    artistTopList.tracks.snapshot(0, num).done(function (snapshot){ 
      snapshot.loadAll('name').done(function(tracks){
        var i, num_toptracks;
        num_toptracks = num; 

        for(i = 0; i < num_toptracks; i++){
          callback(artist, tracks[i]);
        }
      });
    });
  }

  // Get Related
  function getRelated(artist_uri){
    var artist_properties = ['name', 'popularity', 'related', 'uri'];

    models.Artist
    .fromURI(artist_uri)
    .load(artist_properties)
    .done(function (artist){

      artist.related.snapshot().done(function(snapshot){
        snapshot.loadAll('name').done(function(artists){
          var temp = [];

          for(var i = 0; i < artists.length; i++){

            getTopTrack(artists[i], 1, function(artist, toptrack){
              var p, n, u;

              p = artist.popularity;
              n = artist.name;
              u = artist.uri;

              temp.push(toptrack.uri);

            });
          }
          // Build a list of these tracks
          buildList(temp);
        });
      });
    });
  }

  getRelated('spotify:artist:2VAvhf61GgLYmC6C8anyX1');
});

解决方案

By using Promises you can delay the rendering of the list until you have successfully composed the temporary list with your tracks. Also, in order to prevent the addition of repeated tracks on reload, assign a unique name to your temporary playlist.

require([
  '$api/models',
  '$views/list#List',
  '$api/toplists#Toplist'
], function (models, List, Toplist) {
  'use strict';

  // Build playlist
  function buildList(trackURIArray) {
    var arr = trackURIArray;
    models.Playlist
      .createTemporary("myTempList_" + new Date().getTime())
      .done(function (playlist) {
        playlist.load("tracks").done(function () {
          playlist.tracks.add.apply(playlist.tracks, arr).done(function () {
            // Create list
            var list = List.forCollection(playlist, {
              style: 'rounded'
            });

            $('#playlistContainer').appendChild(list.node);
            list.init();
          });
        });
      });
  }

  // Get top track
  function getTopTrack(artist, num) {
    var promise = new models.Promise();
    var artistTopList = Toplist.forArtist(artist);

    artistTopList.tracks.snapshot(0, num).done(function (snapshot) {
      snapshot.loadAll().done(function (tracks) {
        promise.setDone(tracks[0]);
      }).fail(function (f) {
        promise.setFail(f);
      });
    });

    return promise;
  }

  // Get Related
  function getRelated(artist_uri) {
    models.Artist
      .fromURI(artist_uri)
      .load('related')
      .done(function (artist) {
        artist.related.snapshot().done(function (snapshot) {
          snapshot.loadAll().done(function (artists) {

            var promises = [];

            for (var i = 0; i < artists.length; i++) {
              var promise = getTopTrack(artists[i], 1);
              promises.push(promise);
            }

            models.Promise.join(promises)
              .done(function (tracks) {
                console.log('Loaded all tracks', tracks);
              })
              .fail(function (tracks) {
                console.error('Failed to load at least one track.', tracks);
              })
              .always(function (tracks) {
                // filter out results from failed promises
                buildList(tracks.filter(function(t) {
                  return t !== undefined;
                }));
              });
          });
        });
      });
  }

  getRelated('spotify:artist:2VAvhf61GgLYmC6C8anyX1');
});

这篇关于Spotify的API创建临时播放列表不加载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆