Sound Steps

ADDING SOUND TO YOUR WEB PAGE

Step One:
Think about it.

Sound is a lot of fun and in some cases necessary.

HOWEVER...

Some users prefer quiet browsing and won't stick around if things get noisy.
If you are in a computer lab or other group setting, sound can distract others.
Sound takes time to download no matter how fast the connection.
Sound success depends on hardware and software which varies among users.

IF YOU STILL WANT TO ADD SOUND TO YOUR WEB PAGE...

Step Two:
Select, download and save a sound file.

WHAT TYPE OF SOUND EVENT WOULD YOU LIKE?...

A BACKGROUND SOUND is a sound that plays when a page is loaded.
A SOUND EFFECT plays briefly when the user performs an action.

WHICH SOUND FORMAT BEST SUITS YOUR NEEDS?...

Large files take a long time to download and users may not want to wait.
File sizes can be reduced using SOUND COMPRESSORS.
Keep in mind that quality diminishes with file size.
The quality of compression also makes a difference.
Will the user need any PLUG-INS to hear the sound?

Sound Format Comparison Chart

TYPE	NAME	EXT	SIZE	COMMENTS
AIFF	Audio Interchange File Format	.aif or .ief	big	No compression. Common for MacOS.
AU	Audio File	.au	big	Compressed format for UNIX.
MIDI	Musical Instrument Digital Interface	.mid	small	Synthesized sound. Sound card plays sound. Sound doesn't load to disk. Accommodates most users. No speech capabilities.
MP3	Motion Picture Expert Group	.mpg or .mpeg	small approx. 1MB per min.	Good quality compressed sound. Very popular format.
QT	Quick Time	.mov (video)	small	Originally for Macintosh. Now for Windows.
RA	Real Audio	.ra	small	Streaming audio. Plays back during download. Adapts to user bandwidth.
RMF	Rich Music Format	.rmf	small	Can contain recorded sounds and MIDI sequences at the same time. Requires Plug-Ins (Beanit).
SWA	Shockwave Audio	.swa	small	Streaming audio. Scaleable. Audio quality level can be selected.
SWF	Macromedia Flash	.swf	small	Can be looped in background or triggered by event.
WAV	Windows Audio Version	.wav	big	Digitally recorded sound. Takes a long time to load. Accommodates most users. Not good for background, but OK for short sound effects.
WMA	Windows Media Audio	.wma	small	Streaming capabilities. Allows speech. Scaleable. High quality.

Here are some links to handy SOUND COMPRESSORS:

CoolEdit SoundForge TsunamiPro

Do you need some PLUG-INS?:

AudioTrack BeatNik Crescendo! Digital Sound Engine PlayerPRO MORE PLUG-INS!

DON'T FORGET ABOUT COPYRIGHT CONCERNS...

Make sure you're not breaking any laws when you use that sound:

USE A SEARCH ENGINE TO FIND A SOUND, OR CREATE YOUR OWN...

If you need help searching, try one of these tutorials:

Search Engines Bright Planet Sink or Swim

Here are links to a few of the many search engines available:

Google AltaVista WebCrawler

Check out these sites that offer free sound files:

WebPlaces The Free Site.com Caragraphics

Would you like to try creating your own sounds?:

MetaSynth Cakewalk Finale

TO LEARN TO DOWNLOAD AND SAVE A SOUND FILE...

Try one of these helpful tutorials:

About Sympatico SquareOne

Step Three:
Add the needed HTML code to your page.

DO YOU NEED HELP USING HTML?...

Perhaps one of these tutorials will work:

Davesite HTML Goodies HTML with Style

TO ADD A BACKGROUND SOUND, START BY CHOOSING A TAG...

The <BGSOUND> tag...

It only works in MS Internet Explorer.
Sound player controls are hidden so the user has no choices.
It needs to be placed between <BODY> and </BODY>.

The <EMBED> tag...

It works in many different browsers.
Users have little or no control over the sound.
Sometimes a PLUG-IN will allow user control.
It needs to be placed between <HTML> and </HTML>.

THEN SELECT THE ATTRIBUTES YOU WOULD LIKE TO INCLUDE...

Some tags and attributes only work with specific browsers or platforms.
The Windows 98/MS Internet Explorer 5.5 combination was used while creating the following Attribute Chart.
Click on the example links in the chart to see the code in action.

Attribute Chart

ATTRIBUTE	FUNCTION	VALUE	RESULT	EXAMPLE
SRC	Identifies the file	filename.ext	Points to the needed file.	<BGSOUND> <EMBED>
AUTOSTART	Indicates if sound should start playing when page is loaded.	true	Sound starts playing when page is loaded.	<BGSOUND> (no real difference sound starts anyway) <EMBED> (no real difference sound starts anyway)
		false	Sound doesn't start playing when page is loaded.	<BGSOUND> (doesn't work there is no way to start the sound) <EMBED>
HIDDEN	Indicates if sound controls will be visible	true	Sound controls are hidden.	<BGSOUND> (makes no difference there are no controls to hide) <EMBED>
		false	Sound controls are visible.	<BGSOUND> (makes no difference there are no controls to show) <EMBED> (makes no difference controls already show)
LOOP	Indicates if sound will play continuously.	true	Sound plays continuously.	<BGSOUND>(doesn't work sound plays only once) <EMBED>
		false	Sound doesn't play continuously.	<BGSOUND>(makes no difference the sound doesn't loop to begin with) <EMBED> (makes no difference the sound doesn't loop to begin with)
		0	Sound plays one time.	<BGSOUND> (makes no difference the sound only plays once to begin with) <EMBED> (makes no difference the sound only plays once to begin with)
		number	Sound plays specified number of times.	<BGSOUND> <EMBED> (doesn't work sounds plays continuously)
		INFINITE	Sound plays continuously.	<BGSOUND> <EMBED> (doesn't work sound only plays once)
		-1	Sound plays continuously.	<BGSOUND> <EMBED>
CONTROLS	Makes a control panel for the user.	console	Creates console for user to play, pause, stop and control volume	<BGSOUND> (doesn't work no control panel is displayed) <EMBED> (no real difference control panel already shows)
		smallconsole	Creates smaller console in Netscape.	<BGSOUND> (doesn't work no control panel is displayed <EMBED> (no real difference control panel already shows)
HEIGHT	Determines dimension for the console.	number of pixels	Sets the dimension for the console to specified number of pixels.	See the combined attributes example below.
WIDTH	Determines dimension for the console.	number of pixels	Sets the dimension for the console to specified number of pixels.	See the combined attributes example below.
VOLUME	Determines sound volume.	number 1-100	Sets the volume for sound playback. The default is 50.	See the combined attributes example below.

Attributes may be combined (and some need to be) to form a variety of sound options.

EXAMPLE

TO ADD A SOUND EFFECT TO YOUR WEB PAGE...

The <A HREF> tag...

It creates a clickable link to the sound file.
Users can choose whether or not they wish to hear the sound.

EXAMPLE

A grahpic can be used as the link.

EXAMPLE

Step Four:
FTP the new files to your Website.

DO YOU REMEMBER HOW TO USE FTP?...

These FTP tutorials may come in handy:

Free Webmaster Tips Columbia University Webquarry

ARE YOU IN NEED OF FTP SOFTWARE?...

Here are some possible solutions:

Fetch Softworks Ipswitch GlobalScape

DON'T FORGET TO FTP THE SOUND FILES YOU HAVE CHOSEN...

Sometimes you don't have to, but most of the time you do.
Sound files usually need to be in the same directory as your web page.

TO LEARN MORE ABOUT ADDING SOUND TO YOUR WEB PAGE...

Here are some helpful guides:

davesite.com Urbanite 1st Site Free

Sound Steps

ADDING SOUND TO YOUR WEB PAGE

Step One:Think about it.

HOWEVER...

IF YOU STILL WANT TO ADD SOUND TO YOUR WEB PAGE...

Step Two:Select, download and save a sound file.

WHAT TYPE OF SOUND EVENT WOULD YOU LIKE?...

WHICH SOUND FORMAT BEST SUITS YOUR NEEDS?...

Sound Format Comparison Chart

DON'T FORGET ABOUT COPYRIGHT CONCERNS...

USE A SEARCH ENGINE TO FIND A SOUND, OR CREATE YOUR OWN...

TO LEARN TO DOWNLOAD AND SAVE A SOUND FILE...

Step Three:Add the needed HTML code to your page.

DO YOU NEED HELP USING HTML?...

TO ADD A BACKGROUND SOUND, START BY CHOOSING A TAG...

The <BGSOUND> tag...

The <EMBED> tag...

THEN SELECT THE ATTRIBUTES YOU WOULD LIKE TO INCLUDE...

Attribute Chart

TO ADD A SOUND EFFECT TO YOUR WEB PAGE...

The <A HREF> tag...

Step Four:FTP the new files to your Website.

DO YOU REMEMBER HOW TO USE FTP?...

ARE YOU IN NEED OF FTP SOFTWARE?...

DON'T FORGET TO FTP THE SOUND FILES YOU HAVE CHOSEN...

TO LEARN MORE ABOUT ADDING SOUND TO YOUR WEB PAGE...

Step One:
Think about it.

Step Two:
Select, download and save a sound file.

Step Three:
Add the needed HTML code to your page.

Step Four:
FTP the new files to your Website.