Adding Music/Sounds to Your Page

To get sounds and music on your page, you can go about it one of two ways: You can create a link to the sound file so people can download it and play it, or you can embed the sound directly into the page itself. For starters, let's take a look at what the first option does.

The Link Method

Here is an example link to a sound file:

This will make the browser attempt to view the sound file. In this case, I used a midi file. You can do the same thing with .mid, .aud, and most other sound files. As long as the user has the helper application or plugin installed and their browser is configured to use these, the user will begin to download the file once they have clicked the link. Here's what the user will see. Click on it and give it a try if you want to:

A Cool Song

The browser opens a small new window to play back the file once it is downloaded to their computer. Once the file is downloaded, the window will begin playing the sound or music file automatically. The user can use the controls in their window to stop or start the sound. When they are through, they can use the right click method to save the file, just like an image file on a page. They can also close the new window and then return to browsing your site. The drawback to this method is that the user has to click a link and then wait for the file, but this has an advantage if you are going to have a large number of sound or music files for people to choose from.

Using the Embed Method

This method has become very popular way to play a sound or music file because it allows for many more options than a plain link does. The sound interface will be placed right on the page and can be configured to start automatically, repeat over and over, or just play through once. So, how do you do it? With the <EMBED> tag. This tag works in much the same way an image tag does. You will need to specify the source of the sound file and add additional commands as needed. Here is an example of the tag:

This tells the browser to place this file on the page right where you placed the tag. You don't have to use a midi file, you can embed a .wav, .aud, and most other sound formats in this way. As you can see, the src="" is asking for the source of the midi file, or its internet address. Just type in the web address of your midi file here, and you are on your way. Here is what the above example would show up like on your page:

Now, you can add additional commands to the tag to control the output and appearance of your sound file. Here are some common commands you may wish to use:

1. width="144 "
   Tells the browser how wide you wish the sound display to be. Input a number in pixels. The most common width is 144.

2. height="60"
   Tells the browser how tall you want the sound display to be. Input a number in pixels. The most common height is 60.

3. autostart="true"
   Instructs the browser to begin playing the file automatically once it has been loaded on the page. You can set this value to true or false. The default is false.

4. loop="true"
   Instructs the browser to play the file over and over again for as long as someone is on that page, or until the user hits the stop button on the display. You can set this value to true or false. The default is false.

5. hidden="true"
   This command tells the browser to hide the sound display so people viewing you page don't see the sound display with the control buttons. The sound plays as though it were just in the background somewhere. You can set this to true or false. The default is false.

Here is an example using multiple commands:

This example could really annoy some people that came to that page, so go ahead and try it anyway! It's kind of cool to play around with.