Geek Answers Handbook

What options are available for Cross-Browser compatible audio?

I am using this function:

function playSound(file) { MyAudio = new Audio(file); MyAudio.play(); }

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

Any suggestions on this? I assume that there is no way to programmatically determine which browser is being used and then play the appropriate file type? Any recommendations / ideas appreciated. Thanks.

+6
source share
3 answers

No wonder there is no universally reproducible type. WAV is closest, but it is quite large and not supported in IE9. You need to have several types and choose the type that the browser can play.

Use function detection for this. , not browser discovery. The media types supported by each browser change over time, so your code suggesting that Firefox cannot play MP3s will probably expire in a few years when Mozilla accepts it (after the patent expires). Use canPlayType , which indicates whether this 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...

In addition, if you write a sound tag as HTML, you can use several <source> tags, and the browser will play the first one that 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 Ogg sound support, you probably want to check out Ogg Vorbis specifically. Ogg is a “container” format that can hypothetically use other codecs besides Vorbis and Theora (for example, Opus format ). You can check for Ogg Vorbis like this:

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

Note that canPlayType has three possible return values:

  • "possible" - the type of multimedia will almost certainly be reproduced.
  • “possible” - the media type can be played. This is what comes back when you ask for general Ogg support in the browser, Ogg supports for specific codecs (i.e.Vorbis and Theora). The Ogg file may use a codec that is not supported by the browser, so if you do not specify a codec, the browser can only assume that it can play it.
  • "" (empty line) - media type, of course, cannot be played

If you really want to test ogg support, then instead of checking for “maybe” you can check for a non-empty string (that is, check for either “maybe” or “maybe”), for example:

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

You should check which specific codec your media file uses, for example 'audio/ogg; codecs="vorbis"' 'audio/ogg; codecs="vorbis"' for Vorbis. Testing Ogg's overall support is unlikely to be useful.

+6
source

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') }

Explain:
Javascript recognizes the user's browser, and if it is chrome, it serves webm , and if it is not, use wav

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

Note 2: The code needs jQuery.

+1
source

Ok, see here: jQuery Buzz extension . I never used it, but I heard that it should work fine. It can check if your browser supports some format, a really neat feature.

0
source

More articles:


All Articles