Ah, codecs! What fun.

I didn’t really understand codecs until I started creating a video archive for Vuze downloads. At the time, I was building a home theater PC and quickly found that some of the various .mkv, mp4, and wav files would only play on specific players, like VLC for example.

So what does this have to do with web design? Well, the same principle applies when thinking about music only this time we (the designer, developer) is responsible for making the “browser” seamlessly support audio, regardless of which browser your visitors are using.

Ever wonder why you can’t play iTunes downloads on your MP3 player? It’s because they come encoded in some weird, proprietary format called ACC – which you can change by the way.

Flash has long been the standard for encoding video and audio files on the web, so much so, that it’s become somewhat of a standard. In fact, the debate as to whether we should use flash or HTML5 to support video and audio rages on still.

Recently, some big names dropped flash support in favor of HTML5 so if it’s good enough for Google and CNN, it’s good enough for me – and having never been a big fan of the Flash platform to begin with, I thought I’d dig in.

Alright then.

One of the first things to watch out for is which browser is going to support the HTML5 < audio > tag and furthermore which formats are supported by each browser. Currently, most modern browsers, including Mozilla’s FireFox (3.5+), Apple’s Safari (4+), and Google’s Chrome (3) all support the HTML5 standard for encoding those MP3 files but they seem to prefer different formats for encoding.

For example, FireFox has codecs that support OGG and WAV files while Chrome and Safari both support MP3. This makes our job a little more challenging because we want to make sure we have fall backs in place so that ANY browser, including the IE zombies, can listen to the audio file.

The website HTML5doctor.com has a great approach we’ll follow for getting this to work just right. Chris Coyier also has an example of how to set up a pretty slick WordPress customization for pulling the data (legally) and dynamically such that it pulls meta data information like album cover images, song titles, and artist.

Not only does Chris show us how to set this up, but he creates a custom field in the back end of WP so you can set it up and hand it off to a client with the full expectation that they will be able to manage their own music library.

We’re going to do both but first we will set up a quick HTML5 test to see which method we like best or if there’s some combination of both that works even better. Stay tuned!