Skip to content

Instantly share code, notes, and snippets.

@miduku
Last active May 1, 2017 18:53
Show Gist options
  • Save miduku/6404150 to your computer and use it in GitHub Desktop.
Save miduku/6404150 to your computer and use it in GitHub Desktop.
Soundcloud and jPlayer (playlist) integration, using Soundclouds API
<!-- JSPLAYER -->
<div id="jquery_jplayer_1" class="jp-jplayer">
</div><!-- jquery_jplayer_1 -->
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-playlist">
<div class="cover">
<a href="#"><img src="#.jpg" alt="#"></a>
<div class="jp-gui">
<div class="jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
</div><!-- GUI -->
</div><!-- COVER -->
<div class="jp-playlist">
<ul>
<!-- The method Playlist.displayPlaylist() uses this unordered list -->
<li></li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div><!-- jp-type-playlist -->
</div><!-- jp_container_1 -->
<!-- JSPLAYER END -->
$(document).ready(function(){
var $mediaId = "###",
$clientID = "###",
$modeKind = "playlists",
$listurl = "http://api.soundcloud.com/" + $modeKind + "/" + $mediaId + ".json?client_id=" + $clientID,
$i = 0,
tracks = new Array(),
trackdata = new Array(),
playlist = new Array();
console.debug('$listurl = '+$listurl);
// Get the JSON object (the playlist)
$.ajax({
url: $listurl,
async: false,
dataType: 'json',
success: function(listdata) {
// Iterate through the object and create array of tracks in the playlist
$.each(listdata.tracks, function(key, val) {
tracks[$i] = val;
$i++;
});
// Now, for each of the tracks, save the necessary track info formatted as options for jPlayerPlaylist, all in another array
for (var i = 0; i < tracks.length; i++) {
trackdata[i] = {
title: tracks[i].title,
mp3: tracks[i].stream_url + '?client_id=' + $clientID,
url: tracks[i].permalink_url,
sc: "true"
}
}
// Next, stack all these arrays into one array for use in the jPlayer playlist
for (i = 0; i < trackdata.length; i++) {
playlist.push(trackdata[i]);
}
}
});
// Instantiate the jPlayer playlist object, using the Soundcloud playlist array
new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
},
playlist, {
playlistOptions: {
autoPlay: false,
displayTime: 0
},
loop: true, // For restarting the playlist after the last track
swfPath: "../js",
supplied: "mp3, m4a, oga",
smoothPlayBar: true,
keyEnabled: true,
errorAlerts: false,
warningAlerts: false
});
});//ready
@westindiantech
Copy link

How would I utilize this code to get a single track and a single user from the mediaID?

@miduku
Copy link
Author

miduku commented Nov 15, 2016

Have you read the soundcloud API documentation about it?
You should also use JPlayer without the playlist plugin.

This gist is 3 years old and I haven't used it very much.

maybe try this? http://fiddle.jshell.net/psflannery/Xc8tP/

@westindiantech
Copy link

Hi, I've tried the link you provided which works but can't get the track title of the soundcloud song via the api

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment