|
||||||||||||||
This is a short example of how to add sound to tutorial #3 Advanced Rollovers: Changing many images at once. I have little time to fully explain how this works right now, so take it as it is.
NOTE: You must must have javascript enabled to make sense of this page.
|
|
|
Briefly, if you've mulled over the tutorial #3 as mention above, you'll notice this is exactly the same HTLM and javascript code--except that it makes a little noise now when you move your mouse over the rollovers. (The sound, I think, are knives sliding against exach other. I created it and several others many years ago so I'm not entirely sure.)
"Wait!" some of you say--you're not hearing any sound? Hmm. Well, let's do a little diagnostics to see if it's a problem with your browser. Those of you who DO hear the sound, just bear with us for a paragraph or two. Browsers are irritatingly finicky about playing sounds, so this might interesting to you later on while you're trying to debug your own sound playing code.
Well, do three diagnostics. First off, is LiveAudio or something that claims it emulations LiveAudio installed? (LiveAudio being the name of the code that originally was used to play sounds).
Checking...
Ok. Next test. We check everything else including the kitchen-sink to see if the browser can play this sound. Java has to be turned on. We must be able to detect embedded sound objects. We must be able to detect the particular sound object we're using. That that object needs to exist with useful data, and be ready (your huge 100kb sound file loaded in, etc). Is all that true?
Checking...
For reasons I didn't have time to explore today, Microsoft's pathetic little Internet Explorer 4 fails this last test. When I had time to try to wade through their skimpy docs on the subject next week I will. At least the code doesn't crash--it degrades gracefully. :)
So, how do you do that yourself? Just add two bits of javascript. That's all. First off, some time after the <body> tag you need to add the following. It checks if a sound player is installed on your browser, and if so, invisibly loads in the wav file howto4.wav. It gives this sound the name pressbutton.
<script language="JavaScript">
<!--
var LiveAudio = (navigator.plugins && navigator.plugins["LiveAudio"]) || (navigator.plugins && document.all);
if (LiveAudio)
document.write("<embed control=console src='howto4.wav' name='pressbutton' hidden=true autostart=false mastersound width=144 height=60>");
//-->
</script>
Next, we add following additional code to the howtoOn(). It performs all those tests we mentioned earlier to see if we can actually play the sound. If they're all true, we do a document.embeds["pressbutton"].play(false), which plays the sound one time.
if(navigator.javaEnabled()) {
if(document.embeds) {
if(document.embeds["pressbutton"]!=null) {
if(document.embeds["pressbutton"].IsReady)
document.embeds["pressbutton"].play(false);
}
}
}
Mind you, I'd do it differently, but I didn't want to confuse anyone. I have to get back to work, and I was skimping on documentation as it was. Later.