SoundEmbedding Sound

Back back to the main Sound page

Embedding a Sound File

There are a number of different ways of using an embedded sound, but they all use the same basic mechanism - namely the embed tag. This tag was intended to be used to embed a plugin into a web page. It was deprecated in HTML 4 (i.e., was due to be removed from the language) but has been reinstated in HTML 5. In practice, most browsers will understand it. Note that HTML 5 also adds an audio tag specifically for playing sounds, which I discuss here.

This is an embedded sound:

Try loading this page in a number of different browsers. Depending on which plugin each browser is using, you will get a different user experience when playing the audio track.

The basic syntax for the tag to embed the file as shown above is:

<embed src="ddppl-excert.mp3"
       autostart="true" loop="false" height="60px">
</embed>

The src attribute specifies the path to the sound file that you wish to play. In this case, it is an MP3 file. The autostart attribute specifies whether the player should start automatically as soon as the page is loaded - its values are either "true" or "false". The loop attribute specifies whether the sound should loop continuously, or only play through once. The height (and width) attributes specify the dimensions of the plugin.

Finally, if you want to hide the player plugin from the user, you can add the attribute hidden="true" (newer browser expect this to be written as hidden="hidden" or just hidden) which specifies that the player should be invisible. If you want a sound to play in the background, then you might chose this option. However, generally I would suggest that this is not a good idea as it does not give the user control over the playing of sound.

Although different browsers may use different plugins to actually play the sound, they should all respond to these options.

This page shows an example with a hidden player, playing background music. Most designers think this is a bad idea - I tend to agree!

Embedding Google's Audio Player

The technique above embeds the audio file itself into the web page. An alternative technique is to embed a third-party audio player and pass the audio file to that. One popular audio player used for this method is the Goggle player; this is a Flash object that can be embedding in a page and which provides basic audio controls.

This is an embedded Google player:

When the page is loaded, the player is downloaded from the Google site, and the sound is played. The major advantage of this technique is that your player should look the same in every browser (although experience tells me that in reality it won't!). It is still done using an embed tag, but the options are slightly more complex as we see here:

<embed type="application/x-shockwave-flash"
       src="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=http://www.asch.org.uk/webdesign/examples/sound/ddppl-excert.mp3"
       allowscriptaccess="never" quality="best" bgcolor="#ffffff"
       wmode="window" flashvars="playerMode=embedded"
       pluginspage="http://www.macromedia.com/go/getflashplayer"
       height="27" width="400">
</embed>

Note that the src attribute now points to the player itself, and the file to play is given by the audioUrl parameter, which should be the full path to audio file that you wish to play. For this to work, the audio file must located on and available from a server.

The main disadvantage with this technique is that we are relying on Google to maintain their player. If they should move (or remove) it, then our audio will stop working. I don't know how to include such options as autostart and hidden for this player, (if anyone knows, please let me know) so it is best used as a simple embedded player, as shown on this page.