SoundCloud Custom Player

Make sure to require SoundManager2 before this file on your page. And set the defaults for it first:

soundManager.url = '/swfs/';
soundManager.flashVersion = 9;
soundManager.useFlashBlock = false;
soundManager.useHighPerformance = true;
soundManager.wmode = 'transparent';
soundManager.useFastPolling = true;

Wait for jQuery to load properly


Wait for SoundManager2 to load properly

	soundManager.onready(function() {


Pass a consumer key, which can be created here, and your playlist url. If your playlist is private, make sure your url includes the secret token you were given.

		var consumer_key = "ePT3qXXTOjw4ZoZcN7ALQ",
				url = "";		

Resolve the given url and get the full JSON-worth of data from SoundCloud regarding the playlist and the tracks within.

		$.getJSON('' + url + '&format=json&consumer_key=' + consumer_key + '&callback=?', function(playlist){

I like to fill out the player by passing some of the data from the first track. In this case, you'll just want to pass the first track's title.


Loop through each of the tracks

			$.each(playlist.tracks, function(index, track) {

Create a list item for each track and associate the track data with it.

				$('<li>' + track.title + '</li>').data('track', track).appendTo('.tracks');
  • Get appropriate stream url depending on whether the playlist is private or public.
  • If the track includes a secret_token add a '&' to the url, else add a '?'.
  • Finally, append the consumer key and you'll have a working stream url.
				url = track.stream_url;
				(url.indexOf("secret_token") == -1) ? url = url + '?' : url = url + '&';
				url = url + 'consumer_key=' + consumer_key;


Create the sound using SoundManager2


Give the sound an id and the SoundCloud stream url we created above.

					id: 'track_' +,
					url: url,

On play & resume add a playing class to the main player div. This will be used in the stylesheet to hide/show the play/pause buttons depending on state.

					onplay: function() {
					onresume: function() {

On pause, remove the playing class from the main player div.

					onpause: function() {

When a track finished, call the Next Track function. (Declared at the bottom of this file).

					onfinish: function() {

GUI Actions


Bind a click event to each list item we created above.

		$('.tracks li').live('click', function(){

Create a track variable, grab the data from it, and find out if it's already playing (set to active)

			var $track = $(this),
					data = $'track'),
					playing = $'.active');
			if (playing) {

If it is playing: pause it.

				soundManager.pause('track_' +;				
			} else {

If it's not playing: stop all other sounds that might be playing and play the clicked sound.

				if ($track.siblings('li').hasClass('active')) { soundManager.stopAll(); }'track_' +;

Finally, toggle the active state of the clicked li and remove active from and other tracks.


Bind a click event to the play / pause button.

		$('.play, .pause').live('click', function(){
			if ( $('li').hasClass('active') == true ) {

If a track is active, play or pause it depending on current state.

				soundManager.togglePause( 'track_' + $('').data('track').id );	
			} else {

If no tracks are active, just play the first one.


Bind a click event to the next button, calling the Next Track function.

		$('.next').live('click', function(){

Bind a click event to the previous button, calling the Previous Track function.

		$('.prev').live('click', function(){

Player Functions


Next Track

		var nextTrack = function(){

Stop all sounds


Click the next list item after the current active one. If it does not exist (there is no next track), click the first list item.

			if ( $('').next().click().length == 0 ) {
				$('.tracks li:first').click();

Previous Track

		var prevTrack = function(){

Stop all sounds


Click the previous list item after the current active one. If it does not exist (there is no previous track), click the last list item.

			if ( $('').prev().click().length == 0 ) {
				$('.tracks li:last').click();