htmlsoundcloudjplayeraudio-player

How to add SoundCloud files to jPlayer?


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?


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.

    enter image description here