This entry is part 3 of 3 in the series WorkoutTimer

WorkoutTimer

In the last post in this series [ read here ] I added the clock timing logic to the HTML workout timer.

The next feature to add is round and interval audio. I want to ring a bell at the beginning and the end of each round, a warning before a change in work state, etc.

This is quite a bit more difficult than it sounds because we need to support both the differences between HTML5 implementation specifics in each of the modern browsers as well as  support still popular older browsers that only support pre “5″ versions of HTML.

I wanted code that would play an Audio file in the current versions of Internet Explorer, Firefox, Chrome, Opera and Safari on Windows, Firefox, Chrome, and Safari on the Mac and on old HTML 4 browsers. As it turns out some current browsers will play .wav but not .mp3 files. Some with play .mp3 but not .wav and some will play both.

So, I built a small test application that would play in all !

The UI was simple enough:

Lets look at the code and I’ll call out the notable points of interest.

<!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>

</div>

</body>
</html>

First, you will notice that I’ve included jQuery as I now do in all my web based UI and I’ve included Modernizr, which I’ll use to determine where the HTML5 audio tag is supported and if it is, what audio file format that I need to use for the browser that I happen to be running in.

I’ve created a “sounds” directory and sound files named “sample.wmv” and “sample.mp3″.

Note the declaration of an audio element on line 54. If the browser supports the HTML5 Audio element the code between lines 54 and 64 will be ignored. If the browser does not support HTML5 audio then that markup will be rendered (including the JavaScript). The actual LegacySound object that gets played on line 63 is only needed if the browser is not HTML5 and it will be created by some JavaScript when the page is loaded only if it is needed,

Lines 6 to 20 are a JavaScript function to play the HTML5 audio element. Note that I’ve used a technique to improve performance slightly if name of the audio file to be played has not changed since the last time the function was called.

Beginning on line 22 code will be executed when the document is ready (loaded).

Line 23 tests to see if the HTML Audio tag is supported.

Then we check to see which media file type is supported.

If the HTML5 Audio tag is not supported then line 32 hides the user interface elements that would be used with the HTML Audio and line 33 creates the embedded media object to be played by older browsers.

I’ve tested this code in all the browsers listed above as well as Netscape 7 for HTML 4 compatibility.

You can click [ HERE ] to download a working sample.

Series Navigation<< Building an HTML App – Workout Timer – Clock Logic
Article Global Facebook Twitter Myspace Friendfeed Technorati del.icio.us Digg Google StumbleUpon Eli Pets