Javascript 如何使用Soundcloud API获取播放列表的每首曲目？

我正在使用Soundcloud API创建自定义播放列表（与原始Soundcloud播放器不同的外观）。见下图。我正在为一位艺术家开发一个网站

借助Soundcloud的API，我想将他的音乐从Soundcloud导入网站。有不同的标签页应该代表所有上传到SC数据库中的相册（你可以在图片上看到）。这是我用以下代码完成的：

SC.get('/users/' + USER + '/playlists', function(playlists) {
    $(playlists).each(function(index, playlist) {
    $('h2').html(playlist.title);

    $('.list-of-links').append($('<li></li>').html('<a href="#">' + playlist.title + '</a>'));
//$('#cover').append($('<li></li>').css('background-image', "url('" + track.artwork_url + "')");
    $("#cover").append('<div><img src="' + playlist.artwork_url.replace('-large', '-t500x500') + '"></div>');

    });
    });

我留心你的答案。

---

提前感谢。

Soundcloud的开发者文档声明，每个播放列表都包含一系列曲目（请参阅）

通过将问题中的代码有效地连接在一起，您应该能够在数组中循环并使用相关值填充html，不过您可能希望在标记中使用类或为每个播放列表生成单独的id（可能类似于

“playlist”+playlist.id

）

进一步编辑：更新为包括一个包含对象，以便按ID引用访问每个曲目的方法

var track_objects = {};

SC.get('/users/' + USER + '/playlists', function(playlists) {

  $(playlists).each(function(index, playlist) {

    // Let's say you have divs with class 'playlist', adhering to the structure of the markup you imply in your question.
    // Store reference to the current playlist
    var $playlist = $('.playlist').eq(index);
    // Populate with values
    $playlist.find('h2').html(playlist.title);
    $playlist.find('.list-of-links').append($('<li></li>').html('<a href="#">' + playlist.title + '</a>'));
    $playlist.find('.cover').append('<div><img src="' + playlist.artwork_url.replace('-large', '-t500x500') + '"></div>');

    // Maybe you would have a ul in each of your playlist divs with a class of tracks...
    // Store reference to the track ul
    var $tracks = $playlist.find('ul.tracks');

    $(playlist.tracks).each(function(i, track) { // Use 'i' so there's no conflict with 'index' of parent loop

      // Your count var is unnecessary, i is 0-indexed so just add 1 to get the track number
      // Note use of track.id here, and different classes for start / stop
      $tracks.append($('<li data-id="' + track.id + '"></li>').html('<a href="#" class="start">Start</a> / <a href="#" class="stop">Stop</a>' + (i + 1) + ' / ' + track.title + ' - ' + track.playback_count));

    });

  });

});

---

谢谢你的回答。它正在工作。一个问题，你也知道如何播放每首曲目吗？见上文，编辑为包括流媒体。我希望停止按钮能起作用，我将每个声音对象都存储在我创建网站时编写的迷你库中，因此可以从任何地方调用它的方法。停止播放曲目的部分不起作用。它一直在播放这首歌。。我怎样才能在另一种方法上做到这一点呢？试试看——注意两个代码块的变化，我本可以让它更清晰，但在我的手机键盘上键入代码有点痛苦！在调用stream方法之前，您还可以检查声音对象是否未定义-如果它在包含它的对象中已经流化了。

var track_objects = {};

SC.get('/users/' + USER + '/playlists', function(playlists) {

  $(playlists).each(function(index, playlist) {

    // Let's say you have divs with class 'playlist', adhering to the structure of the markup you imply in your question.
    // Store reference to the current playlist
    var $playlist = $('.playlist').eq(index);
    // Populate with values
    $playlist.find('h2').html(playlist.title);
    $playlist.find('.list-of-links').append($('<li></li>').html('<a href="#">' + playlist.title + '</a>'));
    $playlist.find('.cover').append('<div><img src="' + playlist.artwork_url.replace('-large', '-t500x500') + '"></div>');

    // Maybe you would have a ul in each of your playlist divs with a class of tracks...
    // Store reference to the track ul
    var $tracks = $playlist.find('ul.tracks');

    $(playlist.tracks).each(function(i, track) { // Use 'i' so there's no conflict with 'index' of parent loop

      // Your count var is unnecessary, i is 0-indexed so just add 1 to get the track number
      // Note use of track.id here, and different classes for start / stop
      $tracks.append($('<li data-id="' + track.id + '"></li>').html('<a href="#" class="start">Start</a> / <a href="#" class="stop">Stop</a>' + (i + 1) + ' / ' + track.title + ' - ' + track.playback_count));

    });

  });

});

// Depending on jQuery version, you may need 'live()' here
$('a.start').on('click', function(){

  var track_id = $(this).parent().attr('data-id');

  if( typeof track_objects[track_id] !== 'undefined' ){
    // We already have this one, no need to make another call to SC.stream
    var sound = track_objects[track_id];
    sound.play();
  }else{
    // First play requested - we need to load this one
    SC.stream('/tracks/' + track_id, function(sound){
      sound.play();
      // Store sound object
      track_objects[track_id] = sound;
    });
  }

});
// Depending on jQuery version, you may need 'live()' here
$('a.stop').on('click', function(){

  var track_id = $(this).parent().attr('data-id');

  // In case a user clicks stop accidentally on a track that hasn't been played yet, check for undefined here too
  if( typeof track_objects[track_id] !== 'undefined' ){
    var sound = track_objects[track_id];
    sound.stop();
  }

});