How to detect HTML5 audio MP3 support?

Question

I know how to check in Javascript if HTML5 audio playback is available. But how do I specifically check if MP3 audio playback is available, as IE9 and Chrome support it, while Firefox and Opera do not.

Solution 1

You could either check the User-Agent and see what browser is being used or you could test support with Javascript.

var a = document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));

I got the above code from this page.

return !!(a.canPlayType) is better because (some recent versions of)Firefox not supports mp3 and a.canPlayType('audio/mpeg;') will be false

Solution 2

Modernizr is a library for feature detection. You can use it to do the work for you.

According to the documentation:

If audio support is detected, Modernizr assesses which formats the current browser will play. Currently, Modernizr tests ogg, mp3, wav and m4a.

Important: The values of these properties are not true booleans. Instead, Modernizr matches the HTML5 spec in returning a string representing the browser's level of confidence that it can handle that codec. These return values are an empty string (negative response), "maybe" and "probably". The empty string is falsy, in other words: Modernizr.audio.ogg == '' and '' == false

Solution 3

var test_audio= document.createElement("audio") //try and create sample audio element 
var test_video= document.createElement("video") //try and create sample video element
var mediasupport={audio: (test_audio.play)? true : false, video: (test_video.play)? true :     false}

alert("Audio Element support: " + mediasupport.audio + "\n"
+ "Video Element support: " + mediasupport.video
)

Comments

[footy]

awesome! I wanted this exact same site, but couldnt rememmber its address. Didnt show up on google. Didnt know it was removed... sad cos the site did a great job and i learnt HTML5 basics from it. I should use the mp3 specific one i guess. Thanks

[keyboardP]

The original link seemed to be removed. I managed to find another one which seems to work without the web archive :)

[footy]

Thanks. I know about modernizr, But i wanted a javascript solution as just cos of this one feature testing i didnt want to include an entire library. But i will fall back on this if i cant the above to work :P

[Norman H]

You can get just the test that you want from Modernizr now in a seperate download that is pretty small and also has the benefit of being quite complete.

[keyboardP]

@hRvoed - It's a way of casting to bool stackoverflow.com/questions/784929/…. ! is the NOT operator. This converts the evaluation into a bool but we now have the inverse of the evaluation so you add another ! to invert it back into the value it should be (but as a type of bool)

[c24w]

To be more explicit, you can use Boolean(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));

[Michael Radionov]

Why is no being replaced with empty string? Docs say that the only return values are 'maybe', 'probably' and ''(empty string). Is it an old compatibility fix?

[keyboardP]

@MichaelRadionov - You're right, it now returns the values you mentioned. However, at the time of the answer, no was returned. Quote from here: Previously, canPlayType returned “no” instead of the empty string. Worth knowing for use with early audio enabled browsers such as Firefox 3.5, Chrome 4, and Safari 4, although these make up a very small percentage of active browsers.

[Mahdi Jazini]

canPlayType not supported in IE8