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.

Solution 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.

Solution 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>

Comments

[Tim Tisdall]

The URL link also suggests adding a flash based fallback which might be a good idea.

[David]

@TimTisdall: There are people out there who don't have flash.

[David]

which browsers have you tested this on? I tried this with non-optimal results: Chrome and IE 6,7,8 plays an MP3 file, no problem. Firefox and Opera successfully falls back to an OGG file. However, Safari fails and falls back to the object tag; fails again and falls back to the embed tag; and displays "missing plugin". IE9 falls back at least to the object tag.

[David]

@Vektor the 3rd source tag should have type="audio/wav" I believe? Even when I fixed that it doesn't play in IE9.

[Tim Tisdall]

@David: hence why it's a fallback option... possibly last resort?

[Tim Tisdall]

I'll have to take a look, but I think I put the aiff file in there specifically for Mac's. BTW, the browser doesn't necessarily try the audio clips in the order it finds them listed... Usually browsers have a preference for a particular encoding and looks for that first. I'm pretty sure the order doesn't matter.

[Tim Tisdall]

k.. just tested it. It worked fine in Safari. Are you sure you included an aiff file?

[David]

I learned several things. Safari for windows requires Quicktime, IE requires windows media player, to play audio using the <audio> or <embed> tags. Also, it helps if you use non-corrupt .mp3 files!

[user151496]

@David you know what is a "fallback" right...? flash player is almost a necessity fallback after the native browser playback. only an ignorant man would think that all the people have a browser that support only your cherrypicked technology

[David]

@user151496 I see what you mean. But ultimately I didn't need to add Flash to the accepted answer to get a working solution. Can you provide an example where Flash is necessary?

[Shaiju T]

thank you works great, with same mark up, can i use jquery to play every 10 seconds ? because <audio autoplay loop> repeats very fast

[Tim Tisdall]

@stom - none of what's in my answer is jquery... But as jquery is able to trigger events then maybe you can create a 10 second loop. However, you may want to look at howler.js