SoundSound

Sound was a surprisingly awkward element to include in a web page, but things have improved significantly with the latest version HTML 5. As more users update to browsers that support the new standards, it will become much easier to provide audio support.

On these pages we will look at some techniques for adding sound to a web site for both old and new browsers.

You might like to check out the page on sound file formats first.

Linking to a Local Sound File

Linking to a sound file, as if it was just another web page or an image, is the simplest way to include a sound file. The link below is an example of this, notice what happens when you click on the link:

Music Mice Hound Vile

Now try it in a couple of different browsers.

Using this technique gives control of playing the sound over to the browser, which will simply use what ever plugin it has available for handling the given media. It usually also opens a new page, which gives a clunky user experience.

Embedding a Sound File Locally

Embedding a sound file directly into the page solves the second problem mentioned above - the user does not need to open a new page to hear the sound. However, it does still give control of playing the sound to a browser plugin.

This technique is described for older systems here... Embedding Sound

The latest version of HTML - HTML 5 - adds built-in support for playing audio files. If you know for sure that your users have a browser that supports this, it is a good way to go.

The HTML 5 technique is described here... HTML5

Linking to a Remote Sound File

A very popular technique is to link to a sound file hosted on one of the many music and sound sharing sites. The advantage of this technique is that it does not take up any of your own resources to store the sound file.

The technique for SoundCloud is described here...

Using a Script

Interacting with sound via scripts is a frequent need for people using sound creatively in their web pages. There are a range of tricks that can be used here.

Read about controlling sound with JavaScript here... Next

Using JavaScript with HTML5 audio is described here... Next

Conclusion

There is much more that could be written about audio in web pages - in fact, if you search the web, you will find a lot of material. In particular, there are quite a few different plugins that you can download and use to play music in your pages. The links in the References section below are a good starting point for further research.

References

General links on audio:

Two audio players I'd recommend: