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 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…
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 :
<link type="text/css" href="skin/jplayer.blue.monday.css" rel="stylesheet" />
<div class="players" style="display:none"></div>
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
- download the 2 php files,
- replace [your_API_key] with your actual API key in the 2 files (JS and Playlist.php),
- copy/paste the JS code in your page between <script></script> tags or call the file like any other JS file <script src=”path/to/file.js”></script>
- change the paths so it finds the php files when needed
and that’s all!