in-page navigation for music sites / how-to

On the topic of 100% in-page navigation for music sites, Steve Gravell surveyed the territory.

The methodology behind playing music on web pages changes depending on your needs and the design of the site, but what is pretty much a requirement is a Flash player somewhere on the site that does the actual playing part. The problem then becomes where to put it, because wherever you do put it, someone’s hopefully going to be navigating away from there to another page on the same site causing the swf to be destroyed and then reloaded on the new page leading to an interruption in playback.

The Hype Machine and Streampad implementations are the slickest for my money.

Something subtle and great about Streampad is that they hit the Tumblr API to play tracks on Tumblr, meaning that they take advantage of what Javascript can really do.

With Yahoo Media Player aka “goose” we handled the need for continous playback we did a button to pop out a player window. It was something people asked for a lot, or at least something that came up in conversation a lot. But I don’t think people really use it much.

An original feature of our pop-out window is that it’s not in kiosk mode: it has menu bars and a URL line, and it’s bookmarkable like any web page. I know it’s ugly and weird looking, but the reason is that the pop-out page has imporant features that comparable software doesn’t.

This link is to the pop-out/continuous-play page for a song. This link is the source from which I popped out that page.

But the lesson is that a pop-out player is just a familiar stimulus to help users feel comfortable, and it doesn’t solve any real user problems. Steve documents this way of doing things under the header Player in a popup:

We’re saving layout space and we’ve got continuous playback, you’d think that popup’s tick all the boxes, but the fact that it’s a popup just causes me to cringe. Granted they do add 1 feature that all other methods don’t have, that being the ability for the visitor to actually leave our site entirely and still have that playback going. But the downside of that is we’re more than likely going to have to put a lot of meta-data in that popup’s layout as well, making it into a mini-site mashup of crap that ends up just getting bigger and bigger. Worse than that is that we will probably have some ad requirements too that are going to have to be shoved into that popup. I don’t want to write about popups any longer.

The impetus to change you whole site allow seamless playing as the user clicks around is that popping out a window is a crappy user experience. Having separate but related windows on the same site makes no sense.

I hope this stream of thought writing style is readable. I wanted to comment on Steve’s doc, but I didn’t have much time for writing, and I figured if I let it go I might not come back to it.

3 thoughts on “in-page navigation for music sites / how-to

  1. Bingo! The convenience of the Hype Machine player to quickly explore music without hopping from site to site is why I love it. It’s what keeps me coming back to their site rather than just following music blogs in my RSS reader.

  2. What I like about Hype Machine is that I get a sense of the zeitgeist. What I do otherwise is go to the same few music blogs whose URLs are ingrained in my memory.

  3. Continuous play is a tough one when embedding into another site. Other than pop-out, there really isn’t a good solution.

    For music sites, it makes sense to use AJAX to not do a page refresh, but then you are just fighting the way browsers are meant to work and Google. Of course it can be done, but it is a lot of extra work to make sure the back button works on all browsers and make sure your content is still indexable and to make sure your url structure doesn’t get completely ridiculous for people passing around links.

    It looks like HTML5 will solve some of the back button issues. Google is committed to indexing Flash but I haven’t heard anything about AJAX.

Leave a Reply

Your email address will not be published. Required fields are marked *