HTML Audio

There are many ways to play sound in HTML.

Problems, problems, and solutions

Playing audio in HTML is not easy!

You need to be proficient in a large number of skills to ensure that your audio files can be played on all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and all hardware (PC, Mac, iPad, iPhone).

In this chapter, CodeW3C.com summarizes the problems and solutions for you.

Use plugins

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

Plugins have many uses: playing music, displaying maps, verifying bank accounts, controlling input, etc.

You can use the <object> or <embed> tags to add plugins to an HTML page.

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

Use the <embed> element

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

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

Example

<embed height="100" width="100" src="song.mp3" />

Try It Yourself

Question:

  • The <embed> tag is invalid in HTML 4. The page cannot pass HTML 4 validation.
  • Different browsers support audio formats differently.
  • 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 the plugin installed, the audio cannot be played.
  • If the file is converted to another format, it still cannot be played in all browsers.

Note:Use <!DOCTYPE html> (HTML5) to solve validation issues.

Use 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

<object height="100" width="100" data="song.mp3"></object>

Try It Yourself

Question:

  • Different browsers support audio formats differently.
  • 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 the plugin installed, the audio cannot be played.
  • If the file is converted to another format, it still cannot be played in all browsers.

Use the HTML5 <audio> element

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

Example

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>

Try It Yourself

The above example uses an mp3 file, so it works in Internet Explorer, Chrome, and Safari.

An ogg file type was added to make this audio work in Firefox and Opera as well. An error message will be displayed if it fails.

Question:

  • 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.

Note:Use <!DOCTYPE html> (HTML5) to solve validation issues.

The best HTML solution

Example

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

Try It Yourself

The example above uses two different audio formats. The HTML5 <audio> element will try to play audio with mp3 or ogg. If it fails, the code will fallback to try the <embed> element.

Question:

  • You must convert the audio to a different format.
  • The <audio> element cannot pass HTML 4 and XHTML validation.
  • The <embed> element cannot pass HTML 4 and XHTML validation.
  • The <embed> element cannot fallback to display error messages.

Note:Use <!DOCTYPE html> (HTML5) to solve validation issues.

The simplest way to add audio to a website

What is the simplest way to add audio to a webpage?

Yahoo's media player is definitely one of them.

Using Yahoo Media Player is a different approach. You just need to let Yahoo handle the song playback.

It can play mp3 and a series of other formats. With a simple line of code, you can add it to your webpage, easily transforming an HTML page into a professional playlist.

Yahoo Media Player

Example

<a href="song.mp3">Play Sound</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>

Try It Yourself

Using Yahoo Player is free. To use it, you need to insert this JavaScript at the bottom of your webpage:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Then simply link the MP3 file to your HTML, and JavaScript will automatically create a play button for each song:

<a href="song1.mp3">Play Song 1</a>
<a href="song2.mp3">Play Song 2</a>
...
...
...

Yahoo Media Player provides your users with a small play button, not a full player. However, when you click the button, a full player will pop up.

Note that this player always docks at the bottom of the window frame. Just click on it to slide it out.

Using Hyperlinks

If a web page contains hyperlinks to media files, most browsers will use an 'helper application' to play the file.

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

Example

<a href="song.mp3">Play the sound</a>

Try It Yourself

Inline Sound

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

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

Our best advice is to include them only where the user wants to hear inline sound. A positive example is, when the user needs to hear a recording and click on a link, the page will open and play the recording.

HTML 4.01 Multimedia Tags

Tag Description
<applet> Not recommended. Define embedded applet.
<embed> Not recommended in HTML4, allowed in HTML5. Define embedded objects.
<object> Define embedded objects.
<param> Define parameters for objects.

HTML 5 Multimedia Tags

Tag Description
<audio> The tag defines audio, such as music or other audio streams.
<embed> The tag defines embedded content, such as plugins.