How to add SoundCloud files to jPlayer?
audio-player, html, jplayer, soundcloud
Solution
If you look at their playlist they're linking to Soundcloud for the mp3 property of the track:
myPlaylist.setPlaylist([
{
title:"Close Enough ft. Noosa",
artist:"Ghost Beach",
mp3:"http://api.soundcloud.com/tracks/79031167/stream?client_id=db10c5086fe237d1718f7a5184f33b51",
url:"http://hillydilly.com/2012/12/top-20-songs/",
sc:"true"
},
{
title:"Always",
artist:"Jahan Lennon",
mp3:"http://api.soundcloud.com/tracks/80961874/stream?client_id=db10c5086fe237d1718f7a5184f33b51",
url:"http://hillydilly.com/2012/12/top-20-songs/",
sc:"true"
}
HTML5 'streams' are really just MP3s you currently can't protect them like you can with Flash, Silverlight, Quicktime etc. If you open one of those links directly (like http://api.soundcloud.com/tracks/79031167/stream?client_id=db10c5086fe237d1718f7a5184f33b51) it'll download the MP3. So I'm guessing it you set it up the same way it should just work.
If you open up Chrome and its Network inspector (in dev tools: View > Developer > Developer Tools, then click Network) and click next on Hilly's player you can see the track loading in the background.
Problem
Right now I have a website that uses jPlayer to stream mp3s on. I also want to be able to add the functionality of letting SoundCloud stream directly on the player. I know this is possible, because one of my favorite music blogs hillydilly does this. From looking at their code, I see their setup for their jPlayer has a few extra arguments, namely sc and sclink. ``` $(".play-music").each(function(){ myPlaylist.add({ title: $(this).attr('data-title'), artist: $(this).attr('data-artist'), mp3: $(this).attr('data-mp3'), url: $(this).attr('data-url'), sc: $(this).attr('data-sc'), sclink: $(this).attr('data-sclink') }); }); ``` I tried looking through the rest of their code, but can't figure out how or where they implement sc and sclink. Any help?