More about the HTML 5 Audio Tag

I've been investigating more about the new HTML 5

To begin, not all browsers support all media types (if they support the audio tag at all — but I'll get to that shortly).  The cool thing that I learned was that you can put multiple tags on your page, and the browser will select the first one that it can play.  (If it doesn't support the audio tag at all, it will render whatever HTML you put inside the

<audio controls="controls">
    <source src="MyAudio.mp3" type="audio/mpeg"/>
    <source src="MyAudio.ogg" type="audio/ogg"/>
    <source src="MyAudio.wav" type="audio/x-wav"/>
    Your browser does not support the HTML 5 audio tag.  Get Google Chrome!
</audio>

W3 Schools reports the following statistics on browser usage, as of November 2010:

Browser Support and File Types

Firefox says that it supports .ogg files, which are compressed.  But I had some trouble with this.  I couldn't play the .ogg file either in Firefox or locally with Windows Media Player, so I wound up downloading some kind of filter from Vorbis.  After that, Windows Media Player could play the file.  I set up a test on my local system, and Firefox was able to play the .ogg file.  But when I tried the same thing on the web, Firefox wouldn't play the file.  Firefox does support the uncompressed .wav files.  For embedded media, compressed files are of course preferable due to load time and bandwidth.  I gave an example in my last post of one song where the .wav file was almost 10 times as big as the compressed version.

Internet Explorer is not yet on the playing field.  It currently only supports the <audio> tag in version 9, which is still in beta.  Furthermore, in order to download IE9, you have to have the latest version of the Windows operating system (which I don't).  So, I doubt that many of the IE users reported by W3 Schools are using IE9.

Google Chrome is the clear winner here:  it supports .mp3, .ogg, and .wav files.

Safari supports .mp3, but seemed to have some difficulty with .ogg files.

Opera version 10 does not support the <audio> tag.  I've read that version 11 does, but I haven't tested it.

Conclusion

By providing .mp3, .ogg, and .wav versions of the audio file, you can cover more than two-thrids of prospective site visitors.  I'd feel a lot better about that if I could have gotten Firefox to play an .ogg file off my website.  Nevertheless, you can still place an embedded player within the

I am thinking of re-vamping the music section of my site using the new HTML 5

Leave a comment