SOUND Tutorial
Adding Sound to your Webpages

This lesson will show you how to code your webpage to Play Sound...

Try the EXAMPLE: Play Music For IE Shell Browsers

Advantage of this technique: (1) Users have a CHOICE to either listen or not... if you code to automatically play sound (using <bgsound>), you will undoubtably lose many users who simply do NOT want to listen to your sound file... (2) The pop-up window remains in focus all the time until you close it... it does not "pop-under" as you scroll the page... (3) No "helper application" such as Windows Media or Real Player has to open to play your sound file, so users are kept "in full view" of your webpage as the sound plays... (4) The pop-up window contains all the source code to play the sound file, and you can change it's size and initial position on the page... also users can drag it to whatever other location they may want... (5) The pop-up window closes automatically, stopping the sound whenever a user navigates away from the webpage...

Disadvantages of this technique: It works only for Internet Explorer and for browsers that use IE's Layout Engine: Avant Browser, AOL Browser, Slimbrowser and many more... it does not work for any Gecko Browsers like Firefox... for those, the activation link will simply not fire...

The activation link can be written like this:

<a title="Opens Small Window For Music" href="#" onclick="fnCallDialog()">Play Music For IE Shell Browsers>/a>

For Gecko Browsers you'll have to use the simple "window.open" method, which will NOT require activating any SCRIPT:

<a href="#" onClick="window.open('/path_to/popup_page.html',
'newWindow','toolbar=no,menubar=no,scrollbars=no,
resizable=no,width=100,height=120,left=0,top=0,screenX=0,
screenY=0'); return false;">Play Music</a>

However you'll be stuck with the pop-up window not remaining in focus as you scroll the page, and not closing and stopping the music as you navigate away from the page without specifically closing it first... NOTE: This method also works for all IE Browsers!

Try It Here: Play Music For Firefox and Other Gecko Browsers

The SCRIPT that runs the pop-up (required for IE Browsers only) is placed into the head section of your source... and you need to change the path to your pop-up window page:

Your pop-up webpage must contain the code to actually PLAY the sound file, for both IE and Gecko Browsers... and can also contain any other text to indicate that the window should be closed to STOP the sound from playing... also you can set the SIZE of the pop-up window in the above SCRIPT to compensate your text input into the pop-up webpage... just change the "dialogWidth" and "dialogHeight" values... you can also change the initial pop-up window LOCATION values, "dialogTop" and "dialogLeft" ...

Here is the minimum code required for your pop-up webpage:

Be sure to change the "path to your sound file" to your actual path!!! And notice that the "width" and "height" (for the onscreen Player Control Panel) are both set to ZERO... so that it doesn't actually show in the pop-up window, but it will still PLAY your sound file... thereby saving page space and enabling a SMALLER less obtrusive pop-up window overall size... NOTE: The <object> tag works for all IE Browsers, and the <embed> tag takes care of the Gecko Browsers... you must use BOTH!

In conclusion you'll have to decide which method to use for your page... the SCRIPT method is better but only works for IE Browsers... the second method works for ALL BROWSERS but the pop-up window loses focus upon page scrolling and requires explicit closing to stop the music before navigating away from the page... NOTE: You actually could provide TWO separate activation links (with explaination) on your page, and use BOTH METHODS...? Perhaps like this:

This concludes our Tutorial on Adding Sound To A Webpage

Have any Questions just...

Angelfire Tutorial---Introduction