Embedding Audio in HTML

In contrast to linked audio, which uses help application, embedded audio uses plug-in that is integrated into a page. It cannot be moved, and if the user navigates away from the page to another one, it stops. As already mentioned, the element used to embed audio is the <audio>, <embed>, or <object> element.

1. <audio>.. .<audio>

The <audio> element is optimized specifically for embedding audio. The specific attributes supported are listed in Table 7.1. Figure 7.3 shows a basic use of the element, and Figure 7.4 depicts the result. The content between the <audio> tags is the message that is displayed when a browser does not support the <audio> element and is known as fallback content.

The <audio> element can also be combined with the <source> element to provide multiple audio sources, from which the browser chooses the most suitable. The element is also used with other dynamic media elements, such as <video>. The attributes that it supports are listed in Table 7.2. Figure 7.5 shows how it is used. The code produces the same result as Figure 7.4.

When the browser encounters the <audio> element in the code example, it goes through the list of <source> elements and plays the first one that it can. If it cannot find any format that it supports, it displays the message, if the browser supports this. Notice that the audio sources specified in the <source> elements are the same, except for the values of the type attributes, which specify a different media type for each source. The codecs parameters specified with the codec attribute on the first <source> element specify the exact codec used to encode the source. A codec (derived from the two words: compressor and decompressor) is the technology used to compress (encode) and decompress (decode) digital data file or stream.

When specified, codecs parameters are one of the values of the type attribute and need to be in double quotes, while all the values of the attribute are enclosed in single quotes. Specifying the parameters can make the job of the browser easier, in that they help the browser determine whether or not it can play a file without first having to load it. However, if parameters are used, it is important that they are correct; otherwise, the browser will generate an error, even if it can play the specified file. On the other hand, if the parameters are not specified, the browser will load the file as normal and discover that it supports the file and play it. The full list of codecs parameters can be found on the Web. Table 7.3 lists some of the commonly used codecs parameters for audio.

2. <embed>

The <embed> element is used to embed an external application (typically a plug-in) or an interactive content. Although it is more commonly used to embed video or animation, it can also be used to embed audio. The attributes that it supports are listed in Table 7.4. Figures 7.6 and 7.7 show how the element is used and depict the result.

3. <object>.. .</object>

Like the <embed> element, the <object> element is used to embed external content, and it is also more commonly used for video or animation than for audio. Table 7.5 lists the attributes supported, and Figures 7.8 and 7.9 show how it is used and also depict the result. Like with the <embed> element, the width and height attributes determine how much of the control is displayed.


In order to specify parameters for the <object> element, the <param> element is used inside it. The attributes that it supports are name (which specifies the name of parameter) and value (which specifies the value of the parameter). Figure 7.10 shows how to use the element. The code produces the same result as Figure 7.9. The only difference is that the audio does not start playing automatically when the page loads, because the “autoplay” parameter is specified and its value is set to “false ”.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *