Sounds

Adding music and sound to your website

Before you put sound files onto your website, think about its purpose, your audience, the file size, the quality of sound you want, differences in browsers and the sound file format.

To add sound to a webpage you can create a clickable link, play sound in the background or embed a player in your page with a control panel so users can control how the sound plays.

Linking to sounds

The easiest way to add sounds to your site is to create a link to it. Just wrap the <a href="my_audio_file.mp3"> and </a> around the text you want your visitors to click. The browser will then download the file.

Embedding sound

Embedding sound directly into your webpage gives you more options. You can choose to play the sound in the background, or let the user control it with their standard media player interface. You can also control how long the sound plays by determining how many loops it should have.

To embed sound in a web page you need to use a HTML tag, just as with images. Instead of the <img> tag, you use the <embed> tag or <object> tags.

<embed src="my_audio_file.mp3" 
       width="200" 
       height="55" 
       autostart="false" 
       loop="false">
<noembed>
<bgsound src="my_audio_file.mp3" 
         loop="false">
</noembed>

To play music in the background while people visit your website, use the same tags, but with different attributes to make the audio player invisible and to play the music automatically.

<Embed src="my_audio_file.mp3" 
       autostart="true" 
       loop="true" 
       width="2" 
       height="0"> 
</embed> 
<noembed> 
<bgsound src="my_audio_file.mp3" 
         loop="infinite"> 
</noembed> 

Remember sound can add to your website but it can also be distracting and annoying. Put the user in control and give them the chance to turn the sound on or off.

Finally, try and make sure the sound clips you include on your site are accessible to people who are hard of hearing or deaf.