So, Do We Have A Cross-browser Audio Format Yet?

September 12th, 2013

Short answer: Nope!

Oh, you’re still here? It was a happy day when Firefox 21.0 was released. A true day of celebration for HTML5 and audio aficionados everywhere! Why? Because we were finally granted MP3 (MPEG) support! That’s right, all of the major*, updated browsers now support** MP3 audio via HTML5***!

Note the usage of asterisks there and you can probably guess it’s not that simple.

HTML5 Audio Format

The Asterisks

By major browsers, I mean: Internet Explorer (9+), Chrome (6.0+), Safari (5.0+) and now Firefox, but not… actually.

Playing MP3 files in Firefox is actually OS/hardware dependent. That’s right, instead of using a built in, true native support, we have to rely on outside variables that we have no control over. Kind of defeats the purpose of that whole no extensions, native support thing that HTML5 is good for. Yes, this is to avoid patent issues (and so Mozilla doesn’t have to pay licensing fees). If you are serving to a lucky person below, here’s the real MP3 support for Firefox:

Notice the varying versions and operating systems. Yes, this means there’s no MP3 support for Windows XP, Linux, or OS X 10.6 and below. That’s still quite a decent amount of viewers. The listing above is not only the support for MP3, but for MPEG 4, H.264, and AAC as well, and was taken from the MDN.

Also, notice how I missed Opera in that list. I guess we can argue whether or not that is a major browser or not, but there’s no MP3 support in it regardless. Mobile and tablet support is generally good for MP3, but finding information about which device, which browser, and which version of each is almost impossible.

Solutions

The best solution currently is the same one that has been around for a couple years now. Provide MP3 and OGG formats, and fall back to your least favourite format. I personally use a MP3 to OGG stack because I can sometimes get a better compression ratio using MP3. So how do we detect support?

var fileFormat = "mp3";
var mp3Test = new Audio();
var canPlayMP3 = (typeof mp3Test.canPlayType === "function" && mp3Test.canPlayType("audio/mpeg") !== "");
if (!canPlayMP3) {
  fileFormat = "ogg";
}
var sound = new Audio('sound/test.' + fileFormat);
sound.play();

If you want to swap that around to provide a OGG to MP3 stack, you can just change the “audio/mpeg” to “audio/ogg”, switch the “mp3” and “ogg” for fileFormat and hopefully rename the variables a bit. How about if you’re just using the HTML5 audio element?
<audio>
   <source src="test.mp3" type='audio/mpeg; codecs="mp3"'>
   <source src="test.ogg" type='audio/ogg; codecs="vorbis"'>
</audio>

As you can see, it’s pretty simple to provide stack and fallbacks using the audio element. Simply switch the order to give your preference on which to try first.

Future

Now we wait. Either Microsoft (Internet Explorer) and Apple (Safari) starts using OGG (although, we will still have no support for previous versions of IE/Safari if that does in fact happen). Or, we wait for Mozilla to bite the bullet and pay the fee, but again, we still have to deal with older versions of Firefox if this does happen.

Hope you like exporting two audio formats! We’ll be doing it for awhile.

This entry was posted in Blog.

Leave a Reply

*

*

TOP