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

Question

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) + "https://stackoverflow.com/" + 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();
  }

});

Accepted Answer