How It Works

Overview

Client

The client, once loaded, checks with the server every 10 seconds for a change in the track playing. If the track has changed then the client loads in the data from the server and performs an animated transistion and updates and scrolls the title bar. It then doesn't check for an update to the track playing for another 90 seconds. This is based on the assumption every track is longer than at least 90 seconds.

Changing the radio station works in the same way, except it forces the page to check for a change in track immediatly, rather than waiting for the next 10 second event to fire.

Preferences (radio station and Last.fm username) are stored in a cookie, and passed with each AJAX call to the server. When a station or Last.fm username is changed, so is the value in the cookie, and thus the value passed to the server.

I'm using jQuery and the jQuery plugin Cookie to make life easy for myself!

As for the layout design, if you think it looks a little like some pages on the BBC website then that's because I based the layout on their excellent Barlesque guidelines, which I hope they don't mind me doing!

Server

The server side is hosted on Google App Engine, and so is written in Python. It grabs the track playing information, and if different to the current artist, then retrieves the other bits of data from Last.fm, BBC Music and Amazon. If a Last.fm username is supplied it also gets the user's information, namely top artists, loved artists and Last.fm recommendations.

All of this information is then collated, and a recommendation is derived. This is then displayed to the user using a template, which as it is Google App Engine, uses the Django markup syntax.

Caching is used extensively to improve response times, and also to limit the number of web requests being made to external web services. Track playing information is cached for 5 seconds, artist information for a day, and Last.fm user information for a hour.

Problems with data

The main problem I've had has been with the MusicBrainz ID provided by Last.fm. In most cases it seems to be the first result from a search for that artist on MusicBrainz, and in the case of Adele this is wrong. That then means BBC Music doesn't return any information as I have the wrong MBID. In the furture I might try and fix this by doing my own search on MusicBrainz for the correct ID, or (if one is released) use the BBC Music search API to determine it instead.

There is also an issue with the artist name the BBC use not matching the one Last.fm uses. This means it doesn't even pick up the correct artist information, let alone the MusicBrainz ID!

Using Google App Engine

The main barrier has been learning Python and the Django template syntax. Once I had the basics I was away. The only complication has been with trying to use JSON data (in the end I've used XML data), and issues with encoding / decoding utf-8. However so far it seems to be working well, apart form occasionally hitting the 5sec max duration for a request limit if some of the data isn't cached, or an API is slow to respond. After reloading the page it normally works fine (generally because part of the data was then in the cache and didn't need the API call.)

Feedback

Got some feedback? trackplaying [at] cgriley [dot] com