6

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.

David
  • 943
  • 1
  • 10
  • 26

2 Answers2

12

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.

Tim Tisdall
  • 9,914
  • 3
  • 52
  • 82
  • 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 Apr 30 '13 at 11:14
  • 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 Apr 30 '13 at 17:41
  • k.. just tested it. It worked fine in Safari. Are you sure you included an aiff file? – Tim Tisdall Apr 30 '13 at 17:56
  • I learned several things. Safari for windows requires Quicktime, IE requires windows media player, to play audio using the – David May 02 '13 at 14:33
  • thank you works great, with same mark up, can i use `jquery` to play every 10 seconds ? because ` – Shaiju T Jun 28 '16 at 14:56
  • 1
    @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 – Tim Tisdall Jun 28 '16 at 15:14
5

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>
Tim Tisdall
  • 9,914
  • 3
  • 52
  • 82
Vektor
  • 560
  • 4
  • 15
  • 1
    The URL link also suggests adding a flash based fallback which might be a good idea. – Tim Tisdall Apr 29 '13 at 15:27
  • @TimTisdall: There are people out there who don't have flash. – David Apr 30 '13 at 10:40
  • @Vektor the 3rd source tag should have type="audio/wav" I believe? Even when I fixed that it doesn't play in IE9. – David Apr 30 '13 at 11:17
  • @David: hence why it's a fallback option... possibly last resort? – Tim Tisdall Apr 30 '13 at 17:19
  • @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 – user151496 Oct 26 '14 at 12:10
  • 1
    @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? – David Oct 27 '14 at 14:13