如何使用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，然后调用SC.stream使用id变量 - 请参阅下面的示例（另请参阅https://developers.soundcloud.com/docs/api/guide#streaming）。

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

EDITED THRICE ：检查声音对象是否已经存储 - 如果是，只需在存储的对象上调用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();
  }

});