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.
Nice piece of code!
Hi Joe!
Thanks for the insight here; simple, elegant, gets the job done!
I do have a couple of questions:
1. Why choose WAV over OGG? WAVs are typically HUGE. While there are browsers that support WAV and not MP3 and vice-versa, the same can be said for OGG. I’m not sure if there’s a major browser that doesn’t support OGG or MP3. (source: html5doctor.com/native-audio-in-the-browser/)
2. No biggie, but why in the name of all that’s jQuery would you use onClick=”handler” instead of $(obj).click(function() {} )?
I’m no fan of using technology for technology’s sake, so if there actually is a good reason to use onClick over .click(), then I’ve love to know.
Hi Eric,
1.) Because I had compatibility issues with OGG not working all browsers. For a site with tons of traffic I’d expand this code to successively try the smallest type types to limit bandwidth usage.
2.) No good reason. I’ve been doing JavaScript for over 15 years and while I love jQuery, I still “think” in plain ole JavaScript 🙂
Nice one
I’m working on a site for my sisters husband, and get no money for it.
So i cant offer you a coin, but are wondering if your smart brain can deal with a task, my brain cant!
He plays piano, and want to let people download music free from the site I’m making for him.
On the header i have made a piano, and want to avoid any use of plugins/flash.
I want to make a image-map of the piano, and make it clickable, so it can play a tone for each key on the piano.
It has to be a image-map cause the white, and black keys overlap each other.
So here are my task: do you think you can modify this code you made, to fit into a image-map, with 77 hot-spots?
If you can, and if you want to help me, i will give you credit for it, and link back to you. (I don’t want to make the image-map, before I know if you can/will help me)
I really hope you can break this task for me
Hi Danny,
I’m not sure how much time I’ll have but if you get stuck ‘ll definitely try to help.
Thanks m8
I started kind a stuck, cause i know nada about javascript, exept i can modify only the basic of javascript.
I’ts not a hurry for me & my sisters husband, but just impossible for me to modify it.
Plz take your time, & know you help a noob, to help yet a noob, to publish his music.