Last active
May 1, 2017 18:53
-
-
Save miduku/6404150 to your computer and use it in GitHub Desktop.
Soundcloud and jPlayer (playlist) integration, using Soundclouds API
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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 --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(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 |
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/
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
How would I utilize this code to get a single track and a single user from the mediaID?