PageResource.com - Web Development Tutorials

Adding Music and Sounds to Your Page

Get music to play and sounds to be heard
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:

<a href="http://www.pageresource.com/sounds/mattdum.mid">A Cool MIDI Song</a>

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 .wav, .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 MIDI 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.

The Embed Method

This method is a popular way to play a sound or music file because it allows for many options. 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:

<embed src="http://www.pageresource.com/sounds/mattdum.mid"></embed>

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:


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

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

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.

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.

hidden="true"
This command tells the browser to hide the sound display so people viewing your 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.

Here is an example using multiple commands:

<embed src="http://www.myplace.com/coolsound.wav" width="144" height="60" autostart="true" loop="true" hidden="true"></embed>

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.

Well, that does it for the sounds. Let's go on to the next section: Meta Tags for Search Engine Indexing.


Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy