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.
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″.
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.