Audio compatibility, cross-browser

When embedding sound files into a webpage, it’s important to consider that different browsers support different audio formats, and no single audio format covers all 5 of the major browsers.

However, it’s simple in HTML5 to make sure you cover all your bases.  When embedding a sound as such:

<audio src="elvis.ogg" controls="controls"></audio>

the .ogg extension is not supported by IE (Always seems like IE is the problem child, doesn’t it?) so this won’t work for everyone viewing your page!

This is easy to correct, though. First, make sure you export your sound files in both .mp3 and .ogg (and .wav if you want to be extra cautious)

and then write your code as such instead:

<audio controls="controls">
<source src="foo.ogg" type="audio/ogg">
<source src="foo.mp3" type="audio/mpeg">
<source src="foo.wav" type="audio/wav">


A user’s browser will then attempt to load each source tag, in order.  So, first the .ogg, and if the user is on internet explorer, it will go on to load the mp3.

Since we’ve covered all three major audio formats, there shouldn’t be any problem for anyone now!



~ by kylemagocs on October 16, 2012.

%d bloggers like this: