playground/tunage 6

Since I’m now a proud musikCube user I thought I would use one of its nice feature, called Tunage, to display the currently playing song here on my weblog. It sounded fun and most importantly small enough to do in a few hours. I had a pretty clear view of what I wanted in the end.

I wanted:

  • A Javascript object that had getters for Artist, Album, title and more
  • The object should fire a change event when the currently playing song changes. Allowing the display of the currently playing song to be really live. No damn page reloads here!

Simple enough? So lets se how this works. It all starts with musikCube doing a GET to the following address:$ARTIST&album=$ALBUM&title=$TITLE&duration=$DURATION

On the server side this is then stored in a data base along with the current time. This is the usual db juggling and nothing to see here. So lets go back to the client side for a while.

The js class has a few properties with getters but the most important one is the uri property. This tells where the information about the currently playing song can be found. The client is using an XMLHttpRequest and the server uses JSON to serialize a PHP object to a js file. The text of the file is then evaled. The returned js file can be seen at:

The client side object then checks the remaining time and it schedules a reload for a later time.

Basic usage:

var t = new Tunage;
t.onchange = updateCurrentlyPlaying;

Here are two basic demos:

Conclusion: I’ve used some tried and true, and quite hyped methods like JSON and that Dutch city one. Unlike XMLHttpRequest, JSON is fairly new to me as a data format. I must say that it is really superior to XML when it comes to web applications. Although finding the information in the XML DOM is easy it is quite tedious and requires quite some code for something that you get for free in JSON. Not only that, the execution time to read the JSON is more or less instant, where reading huge XML files can be a real performance issue.

  • Micha Schopman

    Should JSON be compared to WDDX ? If I look at the type of output it is very much WDDX alike.

  • hzr

    What about turning the artist and album into links, pointing to their respective pages at

  • Erik Arvidsson

    One thing at a time ;-) I have no experience with I did take a quick glance at amazon to see if one could easily link there. I’ll see what kind of services provides.

  • Erik Arvidsson

    I checked out and it seems pretty nice (IMDB for music). However, I could not figure out how to link to specific pages.

  • hzr

    It takes this form:

    However, there are sometimes problems when there are “special” characters and so on, where it goes to a search page instead. seems to handle this better though, at least the few I tested.

  • Pingback: Emil's Chronicle()