HTML/XHTML:Audio

Overview
Vaughan (1993), states that sound is perhaps the most sensuous element of multimedia. It is meaningful "Speech" in any language from a whisper to a scream. It can provide the listening pleasure of music, the startling accent of special effects, or the ambience of a mood-setting background. How you use the power of sound can make the difference between an ordinary multimedia presentation and a professionally spectacular one.

Sound can be included in a web site in several ways.
 * As a background sound (added to the body tag)
 * As a hyperlink, (usually the safest as the sound will play in the users default media player (e.g. Windows Media Player, Apple Quicktime)
 * Embedded in a web page.
 * Using the default media plug-in (this is actually quite risky and often creates a blank box if the player is not active in the browser, or the format is not recognised by the player)
 * As a flash file. This will require a flash player, or a knowledge of flash so you can create a flash movie containing the audio file.
 * Using the HTML-5 &lt;audio> tag. This is not yet (2009) widely supported.

On the web there are several sound formats. The most common being wav, mp3 and midi. These are supported in Windows via the Windows Media Player. Other formats that have their roots in other operating systems (Unix, Apple Mac) are supported via plug-ins, such as Real Audio (.ram).

Video without the pictures are also used as sound files, This includes avi, mpeg (or mpg), Apple Quicktime files (mov) and Windows Media Video (wma).

Link to a sound file
To link to a sound file

This will bring up a media player and the sound will play.

Example Play audio_tada.wav (28KB) Notes: It is accepted practice to add the file size. This can be attached to a graphic.

Background sound
Background sounds can be added to web pages. You should keep the file size small to minimise download time, so MIDI or looping wave sounds are best. Be aware that in a page frequently visited, like a home page, background sound can become irritating. Also surfers are often listening to CDs or Internet radio stations, so keep the sounds short and relatively quiet. If you can add a sound of control.

Internet Explorer supports the tag, e.g.

or

Supported formats
Not all sound formats can be used as a background sound. The following list shows supported sounds and the Browsers (please update if you can)
 * wav (all)
 * midi (all)

Audio support in different browsers can be found at http://html5test.com/
 * Chrome 14 (2011-09-30) PCM, MP3, AAC, Ogg Vorbis, WebM

Embedded sound in the Browser
HTML-5 proposes a new &lt;audio> tag (HTML 5 &lt;audio> Tag, 2009). This should greatly simplify audio (and video) in web browsers. Firefox and Chrome introduced support in 2009.

Embedded sound with player
Rather than using the IE specific tag, or having the Windows media player pop-up when you want to play a sound, it is possible to place a sound on your web page that is supported by both IE and Netscape, can be set to autostart and will support a sound player control box. This is the tag. This tag is used for inserting all types of multimedia in web pages, i.e. video, Flash animations, etc. as well as sounds. For example Wave (with control - using tag)

tag
When used for a background sound, the tag actually adds a sound player control box on the screen. So:

adds a 160x45 pixel sound player control box with a 1 pixel border. The sound in this case will not start playing automatically.

However:

will add a player box of default size and make the sound file start playing automatically. It is possible to hide the sound player control box, using:

Windows media player
This will make sure windows media player is used to play the sound. (Not too sure how this is handled in Mac/Unix environments).

(Apple) QuickTime
This will make sure the apple QuickTime player is used to play the sound. (Not too sure how this is handled in Mac/Unix environments)(Playing QuickTime Movies, 2009).

mp3 players

 * 10 Easy To Implement Flash Based Mp3 Players For Your Website
 * PIMP3 {JAVASCRIPT MP3 PLAYER}

Web audio format support

 * Google Chrome 3.x
 * &lt;audio> tag - Native support for Ogg Theora video, Ogg Vorbis audio, H.264 video, AAC and MP3 audio
 * Firefox 3.5
 * &lt;audio> tag - Currently supported. Ogg Theora, Ogg Vorbis, and WAV.