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

Question

我正在使用 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>');

    });
    });

其中USER 是一个全局变量，其中存储了名称“mo-rooneh”。

所以这是正确的。现在我想从每张专辑中获取（1）专辑标题和（2）该专辑的所有曲目，其中包含播放每首曲目的开始和停止按钮以及UL列表中列出的喜欢数量。我不知道如何实现这一点。我现在拥有的是代码返回专辑标题和用户的所有曲目。知道它为每个专辑发布用户的所有曲目，其他专辑的曲目也是如此。我想要的是它会显示该特定专辑的曲目：

SC.connect(function() {

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

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

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

                    $('.test').append($('<h2></h2>').html('<a href="#">' + playlist.title + '</a>'));

                    $(tracks).each(function(index, track) {
                        $('.test').append($('<p></p>').html('<a href="#">' + track.title + '</a>'));

                    });

                });


            });

        });
    });

我期待您的回答。 提前致谢。

Answer 1

Soundcloud 的开发者文档指出，每个播放列表都包含一组曲目（请参阅 https://developers.soundcloud.com/docs/api/reference#playlists）。

您应该能够通过有效地将问题中的代码连接在一起来遍历数组并使用相关值填充 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));

    });

  });

});

编辑：

很高兴它为你工作（我已经在 vanilla JS 工作了一段时间，所以我的 jQuery 有点生疏......）

要流式传输声音，您只需为 <a/> 元素分配一个事件侦听器，从父节点的 data-attribute 获取轨道 id，然后使用 id 变量调用 SC.stream - 请参阅下面的例子（另见https://developers.soundcloud.com/docs/api/guide#streaming）。

(注意： 需要对上面的代码进行更改 - 在数据属性中使用 track.id，因为 Soundcloud 的 API 使用 id 而不是标题，并且您需要适当的类开始/停止按钮）。

编辑三次：检查声音对象是否已存储 - 如果是，只需在存储的对象上调用 play()，而无需重新实例化 Soundcloud 流对象。

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

});