Detect audio formats support with Modernizr tests

To detect the compatibilty of the browser for audio formats (for <AUDIO> html5 tag), I have created some Modernizr tests.

 

Code

You can detect the support of user’s browser for ogg, wav, mp3, m4a audio formats inserting this code after Modernizr script import:

Modernizr.addTest('audioogg', function(){
     var elem = document.createElement('audio'),
          bool = false;

     try {
          bool = !!elem.canPlayType;
          if ( bool ) {
               bool = new Boolean(bool);
               bool.ogg = elem.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,'');
               if(bool.ogg == "maybe" || bool.ogg == "probably"){
                    bool = true;
               } else {
                    bool = false;
               }
          }
     } catch(e) { }

     return bool;
});

Modernizr.addTest('audiowav', function(){
     var elem = document.createElement('audio'),
          bool = false;

     try {
          bool = !!elem.canPlayType;
          if ( bool ) {
               bool = new Boolean(bool);
               bool.wav = elem.canPlayType('audio/wav; codecs="1"').replace(/^no$/,'');
               if(bool.wav == "maybe" || bool.wav == "probably"){
                    bool = true;
               } else {
                    bool = false;
               }
          }
     } catch(e) { }

     return bool;
});

Modernizr.addTest('audiomp3', function(){
     var elem = document.createElement('audio'),
          bool = false;

     try {
          bool = !!elem.canPlayType;
          if ( bool ) {
               bool = new Boolean(bool);
               bool.mp3 = elem.canPlayType('audio/mpeg;').replace(/^no$/,'');
               if(bool.mp3 == "maybe" || bool.mp3 == "probably"){
                    bool = true;
               } else {
                    bool = false;
               }
          }
     } catch(e) { }

     return bool;
});

Modernizr.addTest('audiom4a', function(){
     var elem = document.createElement('audio'),
          bool = false;

     try {
          bool = !!elem.canPlayType;
          if ( bool ) {
               bool = new Boolean(bool);
               bool.m4a = ( elem.canPlayType('audio/x-m4a;') || elem.canPlayType('audio/aac;') ).replace(/^no$/,'');
               if(bool.m4a == "maybe" || bool.m4a == "probably"){
                    bool = true;
               } else {
                    bool = false;
               }
          }
     } catch(e) { }

     return bool;
});

 

Explanation

I have used the canPlayType() method of HTML5 tag Audio (and Video).

The canPlayType() method can return one of the following values:

  • “probably” – the browser most likely supports this audio/video type
  • “maybe” – the browser might support this audio/video type
  • “” – (empty string) the browser does not support this audio/video type

source: http://www.w3schools.com/tags/av_met_canplaytype.asp

Therefore the tests are not sure at 100% but they are very probable.

 

Test

I have done this test on Chrome 30, IE 10, Safari 5 and Firefox 19:

OGG WAV MP3 M4A
Chrome 30 YES YES YES YES
IE 10 NO NO YES YES
Safari 5 NO NO NO NO
Firefox 19 YES YES NO NO

 

Result

This is the result of the script with only CSS control (using CSS classes for show support of audio formats):

http://jsfiddle.net/aureliome/Vhy9T/

 

This is the result of the script with JS control (using object Modernizr for show support of audio formats):

http://jsfiddle.net/aureliome/4ZF5q/

Aurelio Merenda

I live in Florence (Italy). I graduated in IT in 2010, I work as Front End Developer in Buongiorno, a NTT Docomo Group company. I specialize in Javascript & AngularJS. I like photography, movies and cats.