HTML Audio(Audio)

Playing audio in HTML can be done in different ways.

Problems and Solutions

Playing audio in HTML is not easy!

You need to master a lot of techniques to ensure your audio file plays in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and on all hardware (PC, Mac, iPad, iPhone).

In this chapter, the Tutorial for Beginners summarizes the problems and solutions.

Using Plugins

A browser plugin is a small computer program that extends the standard functions of a browser.

Plugins can be used to add external (non-HTML) content to a page using the <object> tag or the <embed> tag.

These tags define the container for resources (usually non-HTML resources) and, depending on the type, they are displayed by the browser or by an external plugin.

Using <embed> Element

The <embed> tag defines the container for external (non-HTML) content.

Example

Problem:

• 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, and there is no plugin, the audio cannot be played.
• If the user's computer does not have a plugin, the audio cannot be played.
• If the file is converted to another format, it still cannot be played in all browsers.

Using <object> Element

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

Example

Different browsers support different audio formats.

• If the browser does not support the file format, and there is no plugin, the audio cannot be played.
• If the user's computer does not have a plugin, the audio cannot be played.
• If the file is converted to another format, it still cannot be played in all browsers.
• Using HTML5 <audio> Element

Using HTML5 <audio> Element

Browser Compatibility

The <audio> element works in all modern browsers.

Browser Compatibility

Element

Example

Problem:

• The <audio> tag is invalid in HTML 4. Your page cannot pass HTML 4 validation.
• You must convert the audio file to a different format.
• 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 try to play the audio in mp3 or ogg format. If it fails, the code will fallback to the <embed> element to display an error message.

Problem:

• You must convert the audio file to a different format.
• The <embed> element cannot fallback to display an error message.

Using Hyperlinks

If a webpage contains hyperlinks to media files, most browsers will use the "helper application" to play the file.

Example

Inline Sound Descriptions

When you include sound on a webpage, or as part of a webpage, 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, please note that users may have already disabled the inline sound option in their browser.

Our best advice is to only include inline sound where users want to hear it. A positive example is opening a page and playing a recording when a user needs to hear a recording and clicks on a link.

HTML Multimedia Tags

New: New HTML5 Tags