Billboard’s in-browser player

Billboard has integrated the Lala in-browser player into their site to enable full-track playback of the charts and all the other reference music they need to have. (For example). Because the Lala player is a pixel-for-pixel clone of Yahoo Media Player (aka “Goose”), this is an instance of the work of our team at Yahoo continuing to spread.

A core issue for sites that play music has turned out to be not interrupting playback as you click around. One of the major ways to do that, and probably the best, is to completely abandon the idea of going from page to page. Instead use Ajax for in-page navigation and pop a new window for any page that would interrupt. The telltale sign of this is when you see URLs with an elaborate path after a ‘#’ mark. At Billboard, for example, http://www.billboard.com/#/charts/hot-100 will give you the top 100.

So Billboard completely reengineered to support this goal. You can’t use this technique without going all the way, and they went all in.

An interesting advance on the state of the art is a module they call “The Visualizer.” This uses the same kind of widget as the player itself: there a strip docked in a fixed position in the viewport; it has an expanded view and a minimized view; the minimized view is a tab with an arrow on it to expand; etc. If you know YMP/goose or the derivatives then you recognize the style. But Billboard’s “Visualizer” isn’t a player, it’s a data porn navigator for charts like “Mariah Carey vs Debbie Gibson, 1987-2009.” It’s a very cool little info tool.

Thanks to @jherskowitz on Twitter for the tip. Congrats to the visual and interaction designers on our team who invented this widget — especially Lino Wiehen, Douglas Kim, and Jeff Hurlow. (Did I forget anybody? Let me know).