A Musician's Perspective on HTML5 Audio

Where Can I Hear Your Music?

Okay, so I've been a little lax on the blogging front.  My excuse?  I've been busy making music and performing!  So the music part of what I do would seemingly be pretty important.  But recently I was taking stock of my online presence and was a bit surprised at what I discovered: it sure was difficult to actually "listen" to any of my stuff on my home page!  Musically I'm not a one-trick pony. I play multiple instruments; sing and write songs; I compose music, conduct and collaborate on a variety of different projects.  By not having some of these audio/media clips on my site, I was missing out on sharing what was probably a much bigger part of the story of what I do and the musicians I am fortunate to interact with. I have clips on CDBaby.com, iTunes and Google Play - those are powerful hubs that do a lot in terms of presenting my official "releases" as a "product."  But what about "unreleased" tracks? Jam sessions?  Live clips?  These are important too - and they're a big part of my musical output - and yet I wasn't making these audio available.

Taking Control

So I made some changes!  In short, listening to audio on any well-conceived web site should be a swipe, click or touch away on any page.  My site was already somewhat "mobile" friendly (thank you Twitter Bootstrap), but the days of showcasing audio as part of some "flash" component are long gone.  I needed to do some revamping.  I can't say it was entirely easy but it was worth the time.  HTML5 audio to the rescue!

All This Stuff by Rob Birdwell

Five Reasons HTML5 Audio Is Awesome

1. No plugin required!
2. Works on any device - will run on any modern browser on just about any device or operating systems, e.g., phones, tablets and desktops.
3. Simple to implement - and I realize I'm understating things a bit, but it really is pretty simple.  
4. Flexible - need to do something complicated?  HTML5 Audio will allow you to expand.
5. Control - implementing HTML5 audio throughout my site gave me a measure of artistic control that I don't always have with "commerce" sites.  I can showcase long or short clips - whatever I want.

For me, a measure of control over content is desirable.  I recognize that there are commerce sites that can host and track audio/media sources much more efficiently than I can.  But it's also nice to be able to have control, tell the story about the song or composition, talk about the players, post photos, videos or whatever else comprised the narrative of the song.  I can't always do that on commerce sites - I have to abide by their rules, layout and content restrictions.  That's pretty much why I think personal websites remain powerful resources.  But with this control comes the need to dig in and figure out how to harness this power.

HTML5 Audio Implementation Tips

• Avoid multiple audio Tags - One thing I noticed early on was that when tried to implement multiple HTML5 audio elements on a page is that performance suffered, particularly on mobile devices.  The solution is to render a hidden audio element and use jQuery to route your play requests to that hidden element.  The details of this are beyond the scope of this article (and it's really sort of the key) - but you can investigate any of my main audio page hubs (http://birdwellmusic.com/discography/ and http://birdwellmusic.com/music/) to see this technique in action.
• MP3 and OGG formats - provide two sources in the audio tag.  This is a bit of a hassle, but if you truly want your users to hear your music, having two sources (with OGG as the fallback source) you're increasing the odds that someone will actually hear the track. (I am assuming that soon MP3 will be ubiquitous on every device.)
• To loop or not?  That's up to you, but I happen to like the audio tag's loop feature.  For a short clip it allows the user to simply listen again (and again) without pausing.

On BirdwellMusic.com I now have a generous and growing number of audio tracks being showcased.  In general, my audio clips are fairly high quality (192k, 44.1 kHz) - for clips that are under a minute or so this is generally fine (maybe 1mb per clip, which typically loads fast).  Checkout my "music" and "listen" sections - plenty of samples of my work past and present, with much more to come.  With HTML5 audio (and a bit of jQuery in the mix to optimize the presentation) there's no limit to how many tracks I can serve up!

Naturally, there's more to dig into when implementing HTML5 audio on your own site than I'm offering up here.  You'll likely need to use a bit of jQuery to manage the play/pause event interactions, and that's beyond the scope of this post. With so many projects and collaborations, there's a lot of work remaining to showcase all I would like to on my site.  But with HTML5 audio and a bit of know-how, the technical solution is fairly simple and the results are well worth the effort.

* * * 
For more about Rob Birdwell and his musical and creative offereings, visit BirdwellMusic.com
* * *