HTML Audio

Sound can be played in HTML in various ways.

Issues and Solutions

Playing audio in HTML is not straightforward!

You need to be familiar with numerous tricks to ensure your audio files play in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and on all hardware (PC, Mac, iPad, iPhone).

In this chapter, tutorialpro.org summarizes the issues and solutions.

Using Plugins

Browser plugins are small programs that extend the standard functionality of a browser.

Plugins can be added to a page using the <object> tag or the <embed> tag.

These tags define containers for resources (usually non-HTML resources), which are displayed by the browser or by external plugins based on their type.

Using the <embed> Element

The <embed> tag defines a container for external (non-HTML) content. (This is an HTML5 tag, illegal in HTML4, but valid in all browsers).

The following code snippet can display an MP3 file embedded in a web page:

Example

Issues:

• The <embed> tag is invalid in HTML 4. The page cannot pass HTML 4 validation.
• Different browsers support different audio formats.
• If the browser does not support the file format, the audio cannot be played without a plugin.
• If the user's computer does not have the plugin installed, the audio cannot be played.
• Converting the file to other formats still may not play in all browsers.

Using the <object> Element

The <object> tag can also define a container for external (non-HTML) content.

The following code snippet can display an MP3 file embedded in a web page:

Example

Issues:

• Different browsers support different audio formats.
• If the browser does not support the file format, the audio cannot be played without a plugin.
• If the user's computer does not have the plugin installed, the audio cannot be played.
• Converting the file to other formats still may not play in all browsers.

Using the HTML5 <audio> Element

The HTML5 <audio> element is an HTML5 element, illegal in HTML 4, but valid in all browsers.

The <audio> element works in all modern browsers.

Browser Compatibility

The numbers in the table specify the first browser version that supports the attribute.

The following example uses the <audio> tag to describe an MP3 file (valid in Internet Explorer, Chrome, and Safari) and also adds an OGG file (valid in Firefox and Opera). If it fails, it will display an error text message:

Example

Issues:

• The <audio> tag is invalid in HTML 4. Your page cannot pass HTML 4 validation.
• You must convert the audio file to different formats.
• The <audio> element does not work in old browsers.

Best HTML Solution

The following example uses two different audio formats. The HTML5 <audio> element will attempt to play the audio in mp3 or ogg format. If it fails, the code will fall back to the <embed> element.

Example

Issues:

• You must convert the audio to different formats.
• The <embed> element cannot fall back to display an error message.

Using Hyperlinks

If a web page includes hyperlinks to media files, most browsers will use a "helper application" to play the file.

The following code snippet shows a link to an mp3 file. If the user clicks the link, the browser will launch a "helper application" to play the file:

Example

Inline Sound Explanation

When you include sound in a web page, or as part of the web page, it is called inline sound.

If you plan to use inline sound in a web application, you need to be aware that many people find inline sound annoying. Also, note that users may have turned off inline sound options in their browsers.

Our best advice is to include inline sound only where users expect to hear it. A positive example is when a user needs to hear a recording and clicks a link, which then opens a page and plays the recording.

HTML Multimedia Tags