HTM-Hell: Embedding And Adding Sound Files To Your Pages

Embedding And Adding Sound Files To Your Pages

How do I add wav's or MIDI's to my page?

In this tutorial we are entering the realm of Multimedia! (ooooo! ahhhhh!)

Ok if you are reading this, then you probably just found a cool new MIDI, or WAV file and you are dying to have it play on your page!

The problem is a lot of people, (including myself), find most sound files very, very annoying. However, I HAVE been to sites where the webmaster has used small complimentary sounds to enhance my visit, rather than bludgeoning me with some cruddy version of their favorite song.

For example, I came across a page about birds, and when the page loaded a small sound file with birdcalls played for a short time. This helped set the mood for the page quite nicely and I stayed to see what else the webmaster had to offer me.

If that webmaster had setup a full length cheesy MIDI version of "Rockin' Robin" or "Bye Bye Blackbird" that played over and over endlessly, I would have been outta there like a shot!

The Number One Rule you should adhere to when contemplating using sound on your page is:

THINK BEFORE YOU LINK!

Will the sound enhance the page, or will it drive people away? Just because the sound file is slightly related to the page topic does NOT mean it should go on your page. (Yes, this is definitely one of my pet peeves)

That said, let's take a closer look at sound files and how to set them up on your pages:

MIDI FILES VERSUS WAV FILES:

A MIDI file is essentially a small file with instructions that tell your sound card how to play a song. The better your sound card, the better it will sound. All of the actual playing is done on YOUR computer. You cannot 'record' existing sounds with MIDI.

A WAV file (a file that ends with the extension .wav) is a digital recording of a sound or song. It is much like a cassette tape or cdrom. Because there is so much information contained in these files to record even a simple sound, these files tend to be HUGE.

A 3 minute full version of a song in MIDI format, can be as small as 20 or 30k in size. A 3 minute full version of a song in WAV format can be anywhere from 500k to 3 MEGS or more! (it depends largely on the quality of the recording, and how much information is actually recorded)

TO EMBED OR NOT TO EMBED - THAT IS THE QUESTION:

"Embedding' is the process of adding a sound file to your page so that it plays AUTOMATICALLY when the page is finished loading. You do not HAVE to embed a sound on a page to make it available to your visitors!

A simple Unembedded link to a .wav or midi file will work fine:

<A HREF="http://www.gazoo.net/example.wav"> Play the Example .Wav</A>

<A HREF="example.wav"> Play the Example .Wav</A>

(If the sound file is in the same directory as the HTML page that the link is coded on)

When a visitor clicks on this link, the file will be downloaded in it's entirety, and then played on their computer using a sound program (like Windows media player) that the user already has. Pretty simple, isn't it. If a user does not have a sound utility/program installed they will hear nothing.

The problems start when the file you want them to hear is over 50k. It takes time to download these files, and the longer it takes, the less likely it is that people will actually stay and listen.

So now you have to decide if you absolutely MUST embed the sound file, or just make it available to visitors through a clickable link as I showed you above.

BUT I WANT IT TO PLAY AUTOMATICALLY:

Okay, okay... pretty persistent, aren't you? If I haven't changed your mind by now, I will just have to tell you how it is done. (sigh)

Embedding a sound so that it plays automatically on your page can be a bit of a challenge, because various versions of Netscape and Internet Explorer require two DIFFERENT tags to tell the browser how to handle sound files. You MUST include both tags to get the sound file to play in all formats of both browsers.

The <EMBED> Tag works in Internet Explorer 4.0x, Navigator 3.0x, 4.0x

This tag enables you to put sound anywhere on the page.

The <BGSOUND> Tag works in Internet Explorer 3.0x, 4.0x

This Tag will only let you specify sound to play in the background.

THE PROPER USE OF THE <EMBED> TAG:

Here, finally, is the correct way to code an Embedded sound:

<EMBED SRC="example.mid" AUTOSTART="TRUE" LOOP="FALSE" WIDTH="145" HEIGHT="60" ALIGN="CENTER"> </EMBED>

This tag includes an Opening <EMBED> Tag and a Closing </EMBED> Tag. The <EMBED> Tag has several attributes you can use to help define what this tag does:

SRC=
Enter the name of the sound file you wish to use, like "example.mid" or "example.wav", or if the sound file resides in different directory than the HTML page with the sound coding on it, enter the path to the sound file, like "sounds/example.mid" or "sounds/example.wav" OR you can enter the full URL of the sound file, like "http://www.gazoo.net/example.wav". (whew!)

AUTOSTART=
Using this attribute will tell the browser to play a sound automatically by entering "TRUE" as the Value. The sound will NOT start automatically if you enter "FALSE" as the Value.

LOOP= In Netscape, you can tell the browser to play the sound over and over in an endless Loop by entering "TRUE" as the Value. You can tell the browser to play the sound ONCE by entering "FALSE" as the Value. Internet Explorer does not recognize this attribute. Use PLAYCOUNT= as shown below for IE.

PLAYCOUNT=
Entering a number ("2" or "5" etc.) will tell Internet Explorer how many times to play the sound. Netscape does not recognize this attribute.

WIDTH= and HEIGHT=
In Netscape, these attributes are the ones you use to define the appearance and size of the little SOUND CONTROL PANEL that a browser will produce. Internet Explorer does not recognize this Tag.

The smallest Value you should use for these two attributes is:

WIDTH="145" HEIGHT="60"

If you put anything smaller or do not include these two attributes at all NO control panel will appear. Thats BAD.

CONTROLLER=
For Internet Explorer, enter "TRUE" as the Value to show a CONTROL PANEL and enter "FALSE" to not show a CONTROL PANEL. (Internet Explorer users can right-click on a sound file and bring up the control panel so this is kind of optional)

CENTER=
Tells the Browser where to display the CONTROL PANEL. Enter "RIGHT", "LEFT", "ABSMIDDLE", "TOP" or "BOTTOM" as your Value.

ALWAYS use these values when embedding sound in your pages. (ALWAYS, ALWAYS!) This will allow your visitors to turn off a sound if they so desire, or they can adjust the volume of the sound. Navigator's control panel includes a volume control while Explorer's has a position control. Also, Navigator 4.0.5 uses a different control panel than 4.0.4. Explorer features an optional digital display, invoked by right-clicking the control panel. Navigator does not have a digital display.

THE PROPER USE OF THE <BGSOUND> TAG:

Earlier versions of Internet Explorer will not recognize the <EMBED> Tag as a valid HTML command so you must use the <BGSOUND> to ensure visitors with early versions of IE can hear your sound:

<BGSOUND SRC="example.mid" LOOP="2">

LOOP=
Enter a numerical Value ("2" or "5" etc.) to use this attribute to specify how many times you want the sound to play.

ADDING BOTH <EMBED> AND <BGSOUND> TAGS:

WHEW! Finally we have arrived at the meat of the matter. If you add both tags to a page just about everyone on the planet will be able to hear your sound correctly. It takes a little work to decide just how compatible you want your sounds to be, but here is the very basic coding to ensure that most visitors will be able to hear a sound automatically played on your page:

Copy and Paste this example into your page, replace the "example.mid" with the name of your sound file, and you will be well on your way! Play around a bit with the various attributes and you will discover many ways to tailor the sounds you want on your page!

Good luck with your sound embedding!