How to add Previous & Next buttons with SoundCloud API

Question

I'm looking to add previous and next buttons to the SoundCloud custom player, which can be found here .

If you check out the SoundCloud Widget Methods you can see it has:

prev();
next();

Just to be more specific, I'm working with Playlists and I'm not sure how to incorporate this into the javascript file so that it hooks in with the player?

Answer 1

Umm, it's right on top of the page that you are linking to:

This script exposes the SC.Widget(/ iframeElement|iframeElementID /) function to the global scope. It allows you to control the widget from the parent page (the page the widget is inserted into). SC.Widget accepts the reference to the iframe element or its id.

This means (as also quoted from the docs):

var iframeElement   = document.querySelector('iframe');
var iframeElementID = iframeElement.id;
var widget1         = SC.Widget(iframeElement);
var widget2         = SC.Widget(iframeElementID); //both widgets seem to be the same it's just two ways of accessing them

Then you propably just have to do:

widget1.prev();

EDIT :

Since you are using the Custom Player (that has no documented interface ) and not the HTML5 widget you could use the approach I shamelessly copied from here: https://gist.github.com/1509934

Use a function like this:

function getNextTrack(node) {
  var $player = $(node).closest('.sc-player'),
      $nextItem = $('.sc-trackslist li.active', $player).next('li');
  // try to find the next track in other player
  if(!$nextItem.length){
    $nextItem = $player.nextAll('div.sc-player:first').find('.sc-trackslist li:first');
  }
  return $nextItem;
};

To get the item that is the current "nextTrack" and then use jQuery or something else to trigger a click on that link:

var currentNext = getNextTrack($('.sc-player').first()[0]);
$(currentNext).trigger('click');

Worked fine in my console....

EDIT 2

Just to clarify, this worked! All I did was add a link with the class 'sc-next' and wrote this:

$('.sc-next').live('click', function(event) {
    var currentNext = getNextTrack($('.sc-player').first()[0]);
    $(currentNext).trigger('click');
});

Answer 2

Thanks for this guys! What I eventually did is:

$('a.sc-next').live('click', function(event) {
  var $player = $(this).closest('.sc-player'),
  $nextItem = $('.sc-trackslist li.active', $player).next('li');
  $nextItem.click();
  return false;
});

$('a.sc-prev').live('click', function(event) {
  var $player = $(this).closest('.sc-player'),
  $nextItem = $('.sc-trackslist li.active', $player).prev('li');
  $nextItem.click();
  return false;
});