Goto Introduction Page
learn html
design 1
design 2
design 3
tricks 1
tricks 2
images
tables 1
tables 2
templates
critiques
tools
links
glossary
f.a.q.
quiz
tutorial 1
tutorial 2
video tutorial
form mail tutorial
angelfire tutorial
sound tutorial


SOUND Tutorial
Adding Sound to your Webpages

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

Try the EXAMPLE: [Play Music]

    Advantage of this technique: (1) Users have a CHOICE to either listen or not... if you code to automatically play sound (using <bgsound> or <embed>), you will undoubtably lose many users who simply do NOT want to listen to your sound file (see Extra below)... (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... (6) And it works for IE, Firefox and other browsers...

The ACTIVATION LINK can be written like this:

<a title="Play Music" href="#" onClick=
"dhtmlwindow.open('a1', 'ajax', 'popuppagehere.html',
'window title here', 'width=150px,height=80px,
left=0px,top=0px,resize=0,scrolling=1');
return false">[Play Music]</a>

The SCRIPT AND STYLESHEET that run the pop-up are placed into the head section of your source...

You can read all about and download this AMAZING SCRIPT and CSS Code and LEARN much more about how to use it at Dynamic Drive ...

    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 ACTIVATION LINK to compensate your text input into the pop-up webpage...

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

    Be sure to change the "full 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!

    EXTRA: If you do decide that you want your sound file to automatically play when the page loads... you can simply OMIT the ACTIVATION LINK on the page and insert the following script into your HEAD section, making sure to change and adjust the paths and variables to suit your requirements:

This concludes our Tutorial on Adding Sound To A Webpage

Angelfire Tutorial---Introduction