The state of HTML5 audioFriday, October 12, 2012
I just had a chance to use the "new" HTML5 <audio> tag. Using it is just as eas y as using anything from HTML5/CSS3. That was sarcasm. The same things apply, you need to be aware of all the various browser inconsis tencies. The main one is the supported formats of course, some vendors support the industry standard MP3, others don't want to support that because it's not open, and Google supports everything because they are swimming in money, and can afford it. Turns out that in o rder to support all the browsers out there, you need to offer at least 2 kinds of formats, consult the chart on Wikipedia for details. While that's inconvinient, like most things in the CSS3/HTML5 area, there is a much bigger waitwhat? here.
Haha, no, I lied. The above fragment would be 100% logical, but canPlayType() does not return a boolean. Do you know what it returns? CanPlayType returns one of three values:
- maybe, or
- “” (the empty string).
It returns probably? Maybe? There isn't even a yes?? According to html5doctor.com, the reason for this is:
The reason we have these odd return types is because of the general weirdness surrounding codecs. The browser can only guess at whether a certain codec is playable without actually trying to play it.
So, after coming back together from the surprise, here is an actual way of testing if the browser maybe supports a format:
First, we check if the browser supports the canPlayType method on the Audio object, then we check if that returns anything other than an empty string. Welcome to HTML5.