How To Embed Audio To A Webpage
You are here:Home » Programming » How To Embed Audio To A Webpage

How To Embed Audio To A Webpage

Before we get into the details of how to embed an audio file in your Web page (in other words, to make the sound an automatic and integral part of the page), consider that there’s a very easy way to add sound. And it’s a way that avoids a common problem.

One of the most important rules of good Web design is this: If you’re going to use background sound on your site, ensure that you give your visitors some way to turn it off . Not everyone appreciates a soundtrack accompanying his or her Web surfing. And, even if people do enjoy sound, they grow tired of the same thing repeating endlessly. If you make it impossible for visitors to opt out of the sound, you’ll lose some of them.

Embeding Audio to a Webpage

Simply by linking to the sound file instead of embedding it, you give your site visitors the option of whether to listen to the sound or not. All you do is create the same kind of link as you would to another Web page or a graphics file. For example, if you wanted to play an MP3 song, you could use this code:
<a href="overtheseatoskye.mp3">Click here to listen to the
reflection of your soul</a>

That’s all there is to it. Anyone who wants to hear the music can click the link. Anyone who doesn’t want to hear it doesn’t have to.

Choosing a file type

Plug-ins enable you to play practically any kind of audio file in a Web browser. However, you need to consider just how important the music (or other sound) is compared to how much it can delay the download of your Web page. You have several different file types from which to choose:

WAV — A sound file in the WAV format (Waveform audio file) is hideously large when compared to other options. This file type has proven to be enduringly popular for Windows users. It can use either 8- or 16-bit sampling rates, recorded in either mono or stereo, and has .wav as its extension. It was jointly developed by both Microsoft and IBM. Waveform, of course, refers to the analog nature of sound that is digitally sampled and transferred to other formats.

WMA — An audio file format for encoding digital audio. It is similar to MP3, though capable of compressing digital audio files at a higher rate and matching a variety of bandwidths. Its extension is .wma.

MIDI — When it comes to audio file formats on the Web, for the longest time, MIDI files (which end in either .mid or .midi extensions) were king. MIDI files, rather than being recordings in digital format, are sets of instructions on how to reproduce a sound by using common instruments. They are pretty restricted in use to music files, since they record data on note characteristics such as pitch and length, and music synthesizers. You would not use this format to record sounds that roll trippingly off the tongue. However, their file sizes can be very small, making them ideal for non-speech use on Web pages.

Au — This derives from audio. It records in 8-bit mono and is used with Unix systems.

RealAudio — RealAudio is a proprietary format of Real Networks used for streaming audio data to a source over limited bandwidth systems. Its typical extensions are .rm, .ra, and .ram. Because file sizes tend to be smaller than some other file types, the sound quality may be lower.

SND and AIFF — For the growing base of Mac aficionados, you have SND and AIFF file types. AIFF (Audio Interchange File Format) is rather like the WAV file type in terms of capabilities (such as variable sampling rates, as well as mono or stereo options). SND is currently not a very well-supported file format, but it may gain increased support as the Apple share of the digital music market expands.

Ogg — This is an open source audio compression format for the playing and storage of digital music. It uses Vorbis. The extension of Ogg is .ogg. Another popular free open source audio compression format, flac, is available at:

MP3 — With its compression algorithm, the MP3 file format offers an almost unbelievable capacity for storing CD-quality sound in a relatively tiny file compared to earlier digital recording formats. The key word here is ‘‘relatively’’ — the longer the music (or other sound), the larger the file. It’s not unusual for a 2-minute song to take up 3MB, and that adds a stiff penalty to your Web page’s download time. Whatever format you  use, it’s a really good idea to keep the sound duration as short as you can. Unless you’re selling digital albums, think in terms of seconds, not minutes.

MP4 — Though designed to transmit video and images over a smaller bandwidth, MP4 also is used for audio transmit through ACC MPEG-4 Audio. iTunes uses it. The extensions are .m4a and .m4p.

This is an area of high fluidity, and changes/improvements are constantly being made.

Embedding audio

We recognize that background sound (sort of a soundtrack to a Web page) does appeal to some Web designers. We’ll show you how to make your background sound jump through hoops if you want it to. Many Web browsers can natively play music and do not need plug-ins do the job. In any event, except for one issue that we cover, you will not need to concern yourself with the particular brand of music plug-in your visitors are using. Many different ones exist, and few Web browsers lack the capacity to play MIDI, MP3, or several other audio files currently on (and off) the above list.

Audio files are embedded in Web pages with the OBJECT element or the EMBED element. The basics can be handled relatively easily, as the following example demonstrates:

<object title="A Cool Song" data="Mission Impossible.mid">
Sorry I can’t play your song!

If you use the <embed> tag, rather than the <object> element, to link to an audio file,

<EMBED src="url of file" width="number" height="number">

This code has the absolute minimum amount of information necessary to add sound. All it does is to specify the location and name of the audio file. If you wanted to play a MIDI file called softsong.mid, you could fill in the blanks like this:

<EMBED src="softsong.mid" width="200" height="100">
</EMBED><object title="A Cool Song" data="Mission Impossible.mid" >

The width and height attributes, which are required, seem a bit strange at first — after all, this is a sound, not an image or a movie. How can it have dimensions? Well, it’s the controls that are used to start, stop, and play the sound, as well as to change its volume, that are at issue here. The problem is that you don’t know what plug-in someone’s using. That means you don’t know what the controls are going to be, let alone how large they’ll be. The ones in the example code pretty much cover all the bases, however. You can actually set up things so that the controls don’t show on the Web page. However, you still have to specify the width and height attributes. Of course, the numbers could be anything you wanted under those circumstances. To make the controls disappear, you use the hidden attribute:
<EMBED src="softsong.mid"" width="200" height="100" hidden="true">

This attribute takes a value of either true or false, but there’s not much point to using false — if you don’t want the controls hidden, just don’t use the hidden attribute.


If you hide the controls, you make them inaccessible to your visitors, which means that they cannot turn off the sound. This is a fast way to annoy people. It’s usually preferable to leave the choice up to them.


Post a Comment

We're happy to read your thoughts and we'd try our level best to clear your queries if asked. Let's discuss it in a better way. Please don't spam and spoil the conversation :) Thank you!!