A Look at Lala.com's In-Page Music Player

CD or MP3? The other day I pondered that exact question when debating which format I wanted to purchase the new sophomore album from The Duke Spirit, Neptune (amazing, by the way...highly recommended). That's when I came across their MySpace page with a Lala.com widget promotion offering both the CD and "iPod version" (actually 192kb MP3's) for $9.99, allowing me to skirt the question of whether I wanted to spring for Amazon's MP3 bundle ($8.99) or CD ($11.99).

I hadn't been back to Lala.com since its redesign, but when I stopped by to download the MP3's, I found myself taking their in-page music player for a test-drive and was immensely impressed with its implementation.

After working on a bunch of different music-based websites, in-page media player implementations have always bothered me for three main reasons:

1. Everytime you surf from one webpage to another, the player reloads and interrupts the music playback.
2. Sites that try to avoid #1 tend to use some sort of frame set-up which makes bookmarking and identifying unique URL's a no-go which is a big Fail when you want to make sharing, blogging and sending to friends as easy as possible.
3. Full-Flash websites....yech.
   

Various sites have attempted workarounds with pop-up windows, but those always seemed less than ideal. ReverbNation came the closest with their pop-up player which synchronized play controls between the pop-up window and the in-page version which followed you from webpage to webpage. The pop-up gave you uninterrupted playback and could reside underneath your main navigation/content window. If you decided to skip/queue/pause/etc from the in-page version, it sent the same command to the pop-up (and vice-versa), keeping things neat and synchronized.

However, Lala's solution was different and quite elegant. While their webpage implemented frames (correction, while there are iframes on the page, Lala uses div's to implement the player) to achieve continuous playback independent of webpage refreshes and AJAX for queuing/playlisting, site navigation and unique URLs weren't compromised in the process -- you could navigate the site and it would load a unique URL into the browser's address bar for easy cut/paste or bookmarking.


Looking closely at Lala's URLs as you navigate the site, you'll notice it basically uses anchor-based navigation to accomplish this, which is nothing new, per se, but quite effective for websites that are content-heavy or derive a high level of utility value in having users link back/bookmark their content. The need for ease-of-linking/bookmarking is a requirement less vital to web-application type sites like MP3tunes.com or browser extensions like FoxyTunes, but crucial for sites that heavily integrate media playback/queuing with copious amounts of data browsing/reading/navigation.

The other issue a colleague pointed out is getting search engines to recognize the anchored hierarchy as spider-able. A few searches on Google for content on lala.com revealed that omitting the anchor (#) brought you to the same page as those with anchored URLs that you encountered while navigating (i.e. http://www.lala.com/#artist/The_Duke_Spirit are redirected or rewritten to a fully formed URL http://www.lala.com/artist/The%20Duke%20Spirit) of the same page). Overall, Lala.com has come up with a great solution for a nagging user-experience shortcoming.