Popular Music Project

Over the last few months I've been working on a fun side project to display what music I've been listening to recently. I decided to break this information down by albums and number of songs played over a period of time. While the data itself is straightforward and could be displayed either as a list or table, I wanted to make something visually interesting that would show the most 'popular' albums in my library.

Note: you can view this project at Jake's popular music site.

Before I could get involved in the display I needed to find a way to grab the data. Luckily, last.fm has a solution for this. Using their 'scrobbler' media plug-in, I am able to upload my music plays from all of the different computers I use (desktop, laptop, work computer) to my profile. They also have an API that returns this information as an XML feed. I query this API with a daily cron to pull the most recent information to my database.

In order to make the display dynamic I needed to do some calculations. This site was supposed to show more than just what albums I listen to, but be weighted by date and play count. More recent playcount should take a priority to older playcounts. I decided to make albums that I've been listening to frequently and recently display larger than other albums. Weighting the albums helped with this requirement. While every song played adds 1 to the album, each day is docked by a factor between 1 and 0, forcing recent plays to the top. Example: If I listen to La Roux yesterday 10 times and Thom York's The Eraser 9 times today, than La Roux has a weight 8 while The Eraser has a weight of 9 (if the factor is .8). Even though La Roux has more overall listens, The Eraser is more recent and gets pushed to the top.

After writing all of the weighting logic I started to get a bit worried about the load time for the site. After all, I'm doing some hefty math over a month or more worth of information, sorting and parsing a large array worth of data in order to show the final result. On top of that, I have to load multiple images for each album to the front end. With these concerns in mind I decided to pull the information with AJAX. Once the initial page is loaded, the weighting logic is triggered and brings the images and information up to the front end. There are three different album sizes - larger albums for the more popular albums - as well as some meta information (artist, album name) that is used on the front end.

Now that I had the albums displaying how I wanted them it was time to add a bit of coolness to the page. First, the background fades to different colors with a timer. The albums fade from a black/white opacity to color on hover. All information is preloaded, so once all of the black/white images show up there is no loading or flickering images on screen. On click, the albums pop up with their meta information. There's a welcome message that shows up for new visitors. With all of these different effects I had to make some tough decisions on browser support - the site has no support for IE8 and below.

Lack of cross-browser support was just one of the cons of this project. Buggy handling of the javascript and ridiculous layout problems quickly frustrated me away from making it work in earlier versions of IE. After making this decision I started turning towards canvas as an option for the black/white effects but ran into security concerns. Canvas will not load images from different domains (my images are hosted on my image subdomain). Because of this 'feature' each album is forced to load either 2 or 3 separate images. Due to the way I created the page there is a restriction on resizing the window. I'm only loading enough images to fill the screen to save bandwidth, so when the user resizes, they see large blank portions of screen.

Concerns aside, I had a lot of fun building this project. It was a pretty neat side thing to work on that I've had on my mind for quite a while and I hope it inspires other developers to come up with cool displays for their information. Upkeep on it is minimal (just have to watch out for the trickier album/artist names) and the final effect is pretty cool. Hope that y'all enjoy it as well!