Sample Audio in HTML5 Player
HTML
<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js" language="javascript" type="text/javascript"> </script>
<div id="supported">Killer! Your browser supports HTML audio</div>
<div id="unsupported">Bummer! Your browser DOES NOT support HTML audio</div>
<div id="content">
<audio controls="none" preload="preload" >
<source src="https://woobl.ru/_ld/19/1934_Arman_Cekin_fea.mp3" type="audio/ogg" />
<source src="http://www.w3schools.com/html5/horse.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<div><button>play via JavaScript!</button></div>
</div>
</body>
</html>
CSS
body {
background-color: lightgray;
}
#supported {
display: none;
background-color: lightgreen;
}
#supported, #unsupported {
padding: 10px;
margin-bottom: 10px;
}
#unsupported {
display: block;
background-color: yellow;
}
html.audio #unsupported {
display: none;
}
html.audio #supported {
display: block;
}
#content {
padding:10px;
}
audio {
display: none;
}
html.audio audio {
display: block;
}
JavaScript
$(document).ready(function() {
$("button").click(function() {
$("audio")[0].play();
$(this).parent().append("audio? " + Modernizr.audio);
return false;
});
});