36

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.

Luke Girvin
  • 13,221
  • 9
  • 64
  • 84
footy
  • 5,803
  • 13
  • 48
  • 96

3 Answers3

61

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

gen_Eric
  • 223,194
  • 41
  • 299
  • 337
keyboardP
  • 68,824
  • 13
  • 156
  • 205
  • 1
    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 – footy Dec 12 '11 at 02:10
  • The original link seemed to be removed. I managed to find another one which seems to work without the web archive :) – keyboardP Dec 12 '11 at 02:11
  • 2
    @hRvoed - It's a way of casting to bool http://stackoverflow.com/questions/784929/what-is-the-not-not-operator-in-javascript. `!` 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) – keyboardP May 11 '14 at 12:34
  • To be more explicit, you can use `Boolean(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));` – c24w Jul 15 '14 at 10:15
  • Why is `no` being replaced with empty string? [Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canPlayType) say that the only return values are `'maybe'`, `'probably'` and `''`(empty string). Is it an old compatibility fix? – Michael Radionov Jun 24 '16 at 07:44
  • 1
    @MichaelRadionov - You're right, it now returns the values you mentioned. However, at the time of the answer, `no` was returned. Quote from [here](http://html5doctor.com/html5-audio-the-state-of-play/): `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.` – keyboardP Jun 24 '16 at 19:09
  • canPlayType not supported in IE8 – Mahdi Jazini Dec 13 '16 at 16:33
4

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

Tim
  • 1,029
  • 7
  • 20
  • 1
    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 – footy Dec 12 '11 at 02:17
  • 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. – Norman H Jul 26 '13 at 20:39
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
)
Shoaib Iqbal
  • 1,208
  • 11
  • 21