cd ..
cd ~

JPlayer for BandCamp

The goal of this article is to be able to populate a Jplayer playlist with a bandcamp artist’s discography. The reason of willing to do that is because the bandcamp widgets may be a bit buggy (“transparent background” is not transparent) and also to be able to use this nice html5 player.

You can have a look at the result on this demo page with my very small discography. Another note is that, due to Jplayer playlist limitations, it will only work if there’s no one-track album in your discography. It would be a bit more trickier to implement this since you should have to use the “album” query used to get each album details to get each one length and then generate the html code accordingly. I’ll update this how-to if I have to do that one day…

First of all you’ll need : a working installation of Jplayer on your server and an API key from bandcamp.

Here we go : we start with the files needed for the Jplayer and jquery and a DOM containing only the div that will receive the Jplayer-s, one by album :

Then a javascript (JQuery) code will be called when the page will load : JS code on pastebin

As you can see it calls 2 php files. The first one, player.php will generate the html code needed for each player.

Once this is injected in the DOM, the rest of the code will continue and make a bandcamp query to populate each playlist. The jplayer config is waiting for a json formated playlist and that’s what bandcamp returns to us, we just have to rename the key “streaming_url” retuned by Bandcamp to “url” (what Jplayer is expecting) and that’s the playlist.php job.

So you just have to :

and that’s all!

*
*   *
DO YOU HAVE A QUESTION OR REMARK?
Let's discuss this on twitter : @Err0r_500

visitor@peter1island:~$ whereami
/home/peterisl/peter1island/technicalStuff/web