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.
- 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:
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.
var t = new Tunage; t.setUri("http://..../?action=currentlyplaying"); 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.