如何使用 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 中列出的喜欢数量列表。我不知道如何实现这一目标。我现在拥有的是代码 returns 专辑标题和用户的所有曲目。知道它会为每个专辑发布用户的所有曲目，因此也会发布其他专辑中的曲目。我想要的是它会显示特定专辑的曲目：

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）。

进一步编辑：更新后包含一个 object 以通过 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/> 元素，从 parent 节点的 data-attribute 获取轨道 ID，然后使用 id 变量调用 SC.stream - 请参见下面的示例（另请参见 https://developers.soundcloud.com/docs/api/guide#streaming）。

(注意： 需要对上面的代码进行更改 - 在 data-attribute 中使用 track.id 因为 Soundcloud 的 API 使用 id而不是标题，您需要 start/stop 按钮适当的类。

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

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

});

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

How to get each track of a playlist with the Soundcloud API?

javascript

api

stream

soundcloud