How to add SoundCloud files to jPlayer?

Question

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?

kreek · Accepted Answer · 2013-03-19T21:07:09.927

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.

enter image description here

score 3 · Answer 2 · edited May 23 '17 at 11:51

Actually kreek's answer is only half the story.

If you want to stream soundcloud songs, you first of all need to register your website on the developer page developers.soundcloud.com.

Then use their super cool API with your own key. You can either load the json into your php and generate links there or you load the information with jquery $.getJSON.

When streaming sounds from soundcloud you also want to be sure to properly attribute. The people from soundcloud are very generous to let us use their database like that.

//sorry for the bad links (no credits)

How do I use external JSON...?

http://api.jquery.com/jQuery.getJSON/

http://developers.soundcloud.com/docs/api/buttons-logos

How to add SoundCloud files to jPlayer?

2 Answers2