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.
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.
Share Improve this question edited Oct 23, 2011 at 17:30 Jon 438k84 gold badges753 silver badges816 bronze badges asked Oct 23, 2011 at 17:25 Michael GrigsbyMichael Grigsby 12.2k9 gold badges35 silver badges53 bronze badges 1- 6 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... – No Results Found Commented Oct 23, 2011 at 17:30
4 Answers
Reset to default 8Yes, 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.
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();
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.
Yes. http://www.modernizr./docs/#installing Half way down.