|
Advanced:
Adding Sound to an Alert Popup
Traditionally the Internet has been a quiet place at least from the standpoint of auditory noise. While bandwidth does play a major role in this fact, if you have wanted to have your Web sites make noises, there are some work arounds worth considering. The examples that I like the best have used the <BGSOUND> tag (which is currently only supported by Internet Explorer) along with JavaScript to start that sound after the document has been rendered.
How
do I include the sound?
What JavaScript do I need in order to control the sound?
How do I connect the sound and the JavaScript to a user's action?
May I enjoy a working example?
How
do I include the sound?
Our example uses the <BGSOUND> tag which is specific to Microsoft's Internet Explorer browsers later than version 3. While this leaves out visitors who might be using Netscape, it will at least depricate gracefully and not cause that browser to choke. The <BGSOUND> tag must be used in the <HEAD> section of your HTML document. You specify the tag as follows:
<BGSOUND SRC="" LOOP="0" ID="msound">
Notice that I have left the SRC property empty. This is because (1) I want to potentially play many different audio files, and (2) because I don't want any specific sound to start automatically. Later on when we are ready to play a sound we will use JavaScript to specify a SRC value.
What JavaScript do I need in order to control the sound?
You will need a few pieces of JavaScript, they can all be included in a single section in the <HEAD> of the document.
1. You will need a structure to attempt to pre-cache the files in, so your average visitor won't have to wait for the sounds to download once you specify for them to begin playing.
2. You will need a function which can swap in the desired SRC property when called.
3. You will need something to call that function... this part will be handled in the section following this one.
Here is a example of a <SCRIPT> section with these components:
<SCRIPT>
var num=0;
var all=''; if(document.all) all='.all';
var str='<BGSOUND SRC="" LOOP="0" ID="msound">'; document.write(str);
sound0=new Image; sound0.src="kgoose.wav"; // Using "Image" container to force download
sound1=new Image; sound1.src="cat.wav"; // (it's not really an image, but it is a binary file.)
function play_window(){
num++;
if(num>1) num=0;
var str='';
if(navigator.appName.indexOf('ape')==-1){
if(num==0) str+='\nThis is a goose?';
if(num==1) str+='\nThis is a cat?';
eval('document'+all+'.msound.src=sound'+num+'.src;');
alert(str);
}
}
</SCRIPT>
How do I connect the sound and the JavaScript to a user's action?
In order to launch the sound you will need something to call the JavaScript function. In our example I will use a the OnClick event from a form button to call the function, but it could be just as easily included in the OnLoad event for a document, or in any other event which can cause an event that can be trapped. Hear is an example of the <FORM> with a button to call the function.
<FORM>
<INPUT TYPE="button" NAME="submit1" VALUE="Press Me!" onClick="play_window();">
</FORM>
May I enjoy a working example?
Why certainly, here is an example which combines all of the elements we've discussed (plus the ability to pass an argument to the function specifying which sound to play). Click the button, or run the mouse over one of the images.
|
