Detecting html5 audio support with Modernizr

Question

Is it possible to detect if the browser has Html5 Audio support through Modernizr? If so how is this done? If not are there any work around's? There's few resources on Google explaining this, so any help would be appreciated.

I was about to post a third "read the docs" answer but the other two were posted seconds before. The documentation should be your first resource, not Stack Overflow... — Wesley Murch, Oct 23 '11 at 17:30

score 8 · Accepted Answer · answered Oct 23 '11 at 17:28

8

Yes, through modernizr.audio. It supports a number of audio formats (currently ogg, mp3, m4a & wmv). Example:

var audio = new Audio();
audio.src = Modernizr.audio.ogg ? 'background.ogg' :
            Modernizr.audio.mp3 ? 'background.mp3' :
                                  'background.m4a';
audio.play();

More info in the documentation.

answered Oct 23 '11 at 17:28

alexn

57,867
14
111
145

Yeah I tried this: and it doesn't seem to work.. I'll give that a shot, thanks man – Michael Grigsby Oct 23 '11 at 17:32
how do I execute stuff inside the if statement? – Michael Grigsby Oct 23 '11 at 17:34
The audio doesn't even play and http://i55.tinypic.com/2qdbl3k.png in this image, I shouldn't be having the "} else { error}" tagged on to the end. – Michael Grigsby Oct 23 '11 at 17:44
@Michael please post the full, generated HTML on a paste site (like gist.github.com) – alexn Oct 23 '11 at 18:08

score 2 · Answer 2 · answered Oct 23 '11 at 17:29

Yes, Modernizr detects audio support, according to the documentation (that's a link), which even includes a code sample (copied below):

var audio = new Audio();
audio.src = Modernizr.audio.ogg ? 'background.ogg' :
            Modernizr.audio.mp3 ? 'background.mp3' :
                                  'background.m4a';
audio.play();

score 1 · Answer 3 · answered Sep 19 '12 at 16:37

I found this code and it worked fine for me:

<!DOCTYPE html>
<html>  
<head>
<title>Play Audio</title>
<script src="script/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="script/modernizr-latest.js" type="text/javascript"></script>
<script type="text/javascript">
var currentFile = "";
function playAudio() {

    var oAudio = document.getElementById('myaudio');
    // See if we already loaded this audio file.
    if ($("#audiofile").val() !== currentFile) {
        oAudio.src = $("#audiofile").val();
        currentFile = $("#audiofile").val();
    }
        var test = $("#myaudio");
        test.src = $("#audiofile").val();
    oAudio.play();   
}

$(function() {
    if (Modernizr.audio) {
        if (Modernizr.audio.wav) {
            $("#audiofile").val("sounds/sample.wav"); 
        }
        if (Modernizr.audio.mp3) {
            $("#audiofile").val("sounds/sample.mp3");
        }
    }
    else {
      $("#HTML5Audio").hide();
      $("#OldSound").html('<embed src="sounds/sample.wav" autostart=false width=1 height=1 id="LegacySound" enablejavascript="true" >');
    }

});
</script>
</head>

<body>
<div style="text-align: center;"> 
 <h1>Click to Play Sound<br /></h1>
<div id="HTML5Audio">
<input id="audiofile" type="text" value="" style="display: none;"/><br />

<button id="play" onclick="playAudio();">
    Play
</button>
</div>
<audio id="myaudio">
    <script>
    function LegacyPlaySound(soundobj) {
      var thissound=document.getElementById(soundobj);
      thissound.Play();
    }
    </script>
    <span id="OldSound"></span>        
    <input type="button" value="Play Sound" onClick="LegacyPlaySound('LegacySound')">
</audio>

Just add the audio with the right name in the folder and add the modernizer files with the Jquery stuff and you're done.

Attribution: http://www.misfitgeek.com/2011/08/play-sound-in-html5-and-cross-browser-support-with-backward-compatability/ — Trae, Jan 10 '13 at 18:02

score 0 · Answer 4 · answered Oct 23 '11 at 17:31

0

Yes. http://www.modernizr.com/docs/#installing Half way down.

answered Oct 23 '11 at 17:31

Duncan Gravill

4,552
7
34
51

Detecting html5 audio support with Modernizr

4 Answers4

Linked