[Err0r_500] - le Blog
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 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 :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/add-on/jplayer.playlist.min.js"></script>
<link type="text/css" href="skin/jplayer.blue.monday.css" rel="stylesheet" />

<div class="players" ></div>

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

  • 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!

  1. sax-and-noize a reblogué ce billet depuis err0r500
  2. err0r500 a reblogué ce billet depuis err0r500-blog
  3. err0r500-blog a publié ce billet
Les commentaires de ce blog sont propulsés par Disqus