What Options Are There for Cross-Browser Compatible Audio?

Question

I'm using this function:

function playSound(file) {

MyAudio = new Audio(file);
MyAudio.play();

}

Unfortunately, I'm struggling to find a file type which will work in all browsers. Mp3 works in Chrome, Safari, IE but not FF and Opera, while .ogg files only seem to work in FF.

Any suggestions as to a way around this? I presume there is no way of programmatically detecting which browser is being used and then playing the appropriate file type? Any advise/ideas appreciated. Thanks.

Tribasic

wav. Since it's mostly raw PCM plus a very simple header, I haven't seen a platform where it couldn't be played by default, although I may be wrong. – Sliver

Use webm for Chrome, Firefox and Opera + wav for Firefox, IE, Safari and Opera. – Crone

Use feature detection, not browser detection! What types each browser supports will change over time; use canPlayType: developer.mozilla.org/en-US/docs/DOM/HTMLMediaElement#Methods – Metchnikoff

@H2CO3 It appears that WAV is not supported in IE9, which seems a little crazy: garretwilson.com/blog/2012/01/17/ie9-html5-wav.xhtml – Metchnikoff

@Metchnikoff 1. Who cares about IE? 2. Microsoft FAIL, it's their own format. – Sliver

What to do with the incompatibilities in HTML 5 audio across browsers? (2010-02-20) – Bespoke

Possible duplicate: #187598 – Steady

possible duplicate of Play mp3 file using javascript – Hautboy

Answer 1

Frustratingly, there is no universally playable type. WAV comes closest, but it is quite large and is not supported in IE9. You'll need to have multiple types available and choose a type the browser can play.

To do this, use feature detection, not browser detection. The media types that each browser supports will change over time, so your code that assumes Firefox can't play MP3 will probably be outdated a few years from now, when Mozilla adopts it (after the patents expire). Use canPlayType, which indicates if a given format is supported:

var audio = new Audio();
if(audio.canPlayType("audio/mpeg") == "probably") {
    playSound("myMedia.mp3");
} else if(audio.canPlayType("audio/webm") == "probably") {
    playSound("myMedia.webm");
}
// do checks for other types...

Also, if you are writing the audio tag as HTML, you can use multiple <source> tags, and the browser will play the first one it can:

<audio controls="controls">
    <source src="mymedia.ogg" type="audio/ogg" />
    <source src="mymedia.mp3" type="audio/mpeg" />
    Update your browser! This sentence is fallback content for browsers that do not support the audio element at all.
</audio>

If you want to test for Ogg audio support, you probably want to test for Ogg Vorbis specifically. Ogg is a "container" format that can hypothetically use other codecs besides Vorbis and Theora (for example, the Opus format). You can test for Ogg Vorbis like so:

audio.canPlayType('audio/ogg; codecs="vorbis"') == "probably";

Note that canPlayType has three possible return values:

• "probably" - the media type can almost certainly be played
• "maybe" - the media type might be playable. This is what is returned when you ask about general Ogg support in a browser has Ogg support for specific codecs (i.e. Vorbis and Theora). An Ogg file may use a codec that is not supported by the browser, so if you don't specify the codec, the browser can only guess that it might be able to play it.
• "" (the empty string) - the media type is certainly not playable

If you really wanted to test for ogg support, then instead of testing for "probably", you could test for a non-empty string (i.e., test for either "probably" or "maybe"), like so:

// test for *any* Ogg codecs
if(audio.canPlayType("audio/ogg") != "") {  
    playSound("myMedia.ogg");
}

You should test for whatever specific codec your media file uses, e.g., with 'audio/ogg; codecs="vorbis"' for Vorbis. Testing for general Ogg support is not likely to be useful.

Metchnikoff

Thanks for your answer. I just need to find a file that works in Opera . I've tried mp3, ogg and wav but nothing works. Do you know how I can convert to webm? I've tried a few free programmes but they all seem to only work for video or just don't do webm. – Tribasic

According to this article, Opera only supports Ogg Vorbis and WAV. You're probably testing for Ogg support in an incomplete way. "Ogg" is a "container format" that holds encoded media information; "Ogg Vorbis" is a codec type. That's a pretty major tripping point that I failed to specify -- I'll edit my answer to include Ogg-specific info. – Metchnikoff

Answer 2

Use webm for Chrome, Firefox and Opera + wav for Firefox, IE, Safari and Opera.

HTML:

<audio id="audio"></audio>

JS:

var src = "myvideoname";
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

if (is_chrome) {
   $("#audio").attr('src', 'audio/' + src + '.webm')
}
else {
   $("#audio").attr('src', 'audio/' + src + '.wav')
}

To explain:
Javascript find out users browser and if it is Chrome it serves webm and if it is not than it use wav

Note: Using this code you need only both webm and wav audio with same name in audio folder.

Note 2: Code needs jQuery.

Cargo

Answer 3

Well, see here: jQuery Buzz extension. Never used it, but heard it should work fine. It's able to check if your browser supports some format, really neat feature.

Megalopolis