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

Question

I am working with the Soundcloud API to create a custom playlist (another look than the original Soundcloud player). See image below. I am develop a website for an artist.

With the API of Soundcloud I want to import his music from Soundcloud to the website. There are different tabs that should represents all albums - you can see this on the picture - that are uploaded in the SC database. This I have done with the following code:

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>');

    });
    });

Where USER is a global variable where the name "mo-rooneh" is stored in.

So that's working correct. Now I want to get from each album, (1) the album title and (2) all the tracks of that album, that contains a start and stop button to play each track and the amount of likes listed in a UL list. I don't know how to achieve this. What I have now is that the code returns the album title and all tracks of the user. Know it posts for each album all tracks of the user, so also tracks from other albums. What I want is that it will show me the tracks of that specific album:

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>'));

                    });

                });


            });

        });
    });

I look out for your answer. Thanks in advance.

Answer 1

Soundcloud's developer docs state that each playlist contains an array of tracks (see https://developers.soundcloud.com/docs/api/reference#playlists ).

You should be able to loop through the array and populate the html with the relevant values by effectively joining the code in your question together, though you will want to either use classes in the markup or generate individual IDs for each playlist (maybe something like "playlist"+playlist.id ).

FURTHER EDIT : Updated to include a containing object to access methods for each track by ID reference.

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));

    });

  });

});

EDIT:

Glad it's working for you (I've been working in vanilla JS for a while so my jQuery is a little rusty...)

To stream a sound, all you need to do is assign an event listener to the <a/> element, grab the track id from the data-attribute of the parent node, and call SC.stream with the id variable - see example below (also see https://developers.soundcloud.com/docs/api/guide#streaming ).

( Note: changes are required to the code above - use track.id in the data-attribute as Soundcloud's API works with the id rather than the title, and you'll want appropriate classes for start/stop buttons).

EDITED THRICE : Check to see if the sound object has been stored already - if so, simply call play() on the stored object without needing to reinstantiate the Soundcloud streaming 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();
  }

});