Backwards and cross-browser compatible audio playing

Question

I need to playback audio files in many different web browsers and different versions. The old system produces 4-bit WAV files, which many browsers can't handle. All files contain synthesized or recorded human voices. Anyway I'm gonna need to replace it. So my questions are:

1) what is the best file format to use for audio files, with regards to compatibility, size and quality?

2) what is the best way to use HTML5 and staying backwards-compatible?

We need to support Internet Explorer versions 6, 7, 8 and 9; Firefox, Chrome and Safari.

Update: finally got it working for IE 6-9, Firefox and Chrome; haven't tested Safari yet. I learned that Safari for windows requires Quicktime and IE requires windows media player.

Answer 1

Here's what I'm using:

<audio autoplay>
    <source src="/static/sound/SOUND.mp3" type="audio/mpeg">
    <source src="/static/sound/SOUND.ogg" type="audio/ogg">
    <source src="/static/sound/SOUND.wav" type="audio/wav">
    <source src="/static/sound/SOUND.aiff" type="audio/x-aiff">
    <object>
        <param name="autostart" value="true">
        <param name="src" value="/static/sound/SOUND.mp3">
        <param name="autoplay" value="true">
        <param name="controller" value="false">
        <embed src="/static/sound/SOUND.mp3" controller="false" autoplay="true" autostart="true" type="audio/mpeg"></embed>
    </object>
</audio>

I provide the same audio clip in MP3, OGG, WAV, and AIFF and then let the browser pick which it wants to play. The audio tag is for HTML5, the object tag is for older systems, and embed works on some systems not supporting the object tag.

I put this together from some information on a few websites, but unfortunately I've forgotten the URL.

UPDATE

I've since switched to using howler.js for this stuff. It automatically deals with all the cross-browser issues related to sound. Unfortunately it doesn't support IE 6-8, but I've given up supporting those any way.

Answer 2

With the HTML5 audio tag you can specify different audio types to attempt to load because each browser allows different types. There is a nice compatibility chart on this page: http://html5doctor.com/native-audio-in-the-browser/

The below code will work with most browsers. It first attempts the new HTML5 audio method then falls back on the embed method.

<audio width="100" height="100" autoplay="" controls="" tabindex="0">
<source type="audio/mpeg" src="songs/All-My-Life.mp3"></source>
<source type="audio/ogg" src="songs/All-My-Life.ogg"></source>
<source type="audio/wav" src="songs/All-My-Life.wav"></source>
<embed width="100" height="50" src="songs/All-My-Life.mp3">
</audio>