JSFiddle - React, Tailwind, and code Playground

by mkennedy

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="http://www.w3schools.com/html5/horse.ogg" 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;
    });
});