HTML Audio


Sound can be played in different ways in HTML.


Problems and Solutions

Playing audio in HTML is not easy!

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

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


Use Plug-Ins

A browser plug-in is a small computer program that extends the standard functions of a browser.

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

These tags define the container of resources (usually non-HTML resources). Depending on the type, they will be displayed either by the browser or by external plug-ins.


Use the <embed> element

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

The following code snippet can display MP3 files embedded in web pages:

Example

<embed height="50" width="100" src="horse.mp3">

Try It! 

problem:

  • The <embed> tag is invalid in HTML 4. The page cannot pass HTML 4 verification.

  • Different browsers support different audio formats.

  • If the browser does not support the file format, the audio cannot be played without a plug-in.

  • If the plug-in is not installed on the user's computer, audio cannot be played.

  • If the file is converted to other formats, it still cannot be played in all browsers.


Use the <object> Element

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

The following code snippet can display MP3 files embedded in web pages:

Example

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

Try It! 

problem:

  • Different browsers support different audio formats.

  • If the browser does not support the file format, the audio cannot be played without a plug-in.

  • If the plug-in is not installed on the user's computer, audio cannot be played.

  • If the file is converted to other formats, it still cannot be played in all browsers.


Use HTML5 <audio> Element

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

The <audio> element works in all modern browsers.

Browser compatible

The number in the box indicates the first browser version number that supports the attribute.

element




<audio>4.09.03.54.010.5

Below we will use the <audio> tag to describe MP3 files (available in Internet Explorer, Chrome and Safari), and also add an OGG type file (available in Firefox and Opera browsers). If it fails, it will display an error Text information:

Example

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

Try It! 

problem:

  • The <audio> tag is invalid in HTML 4. Your page cannot pass HTML 4 verification.

  • You must convert the audio file to a different format.

  • The <audio> element does not work in older browsers.


The Best HTML Solution

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

Example

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

 Try It! 

problem:

  • You must convert the audio to a different format.

  • The <embed> element cannot be rolled back to display an error message.


Use Hyperlink

If the web page contains hyperlinks to media files, most browsers will use "helper applications" to play the files.

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

Example

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

 Try It! 


Inline Sound Description

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 sounds in a web application, you need to realize that many people find inline sounds annoying. Please also note that the user may have turned off the inline sound option in the browser.

Our best advice is to include them only where the user expects to hear inline sounds. A positive example is that when the user needs to hear the recording and click on a link, the page will be opened and the recording will be played.


HTML Multimedia Tags

New : HTML5 New Tab

TagDescription
<embed>Define embedded objects. Deprecated in HTML4, but allowed in HTML5.
<object>Define embedded objects.
<param>Define the parameters of the object.
<audio>NewDefined sound content.
<video>NewDefine a video or movie
<source>NewThe multimedia resources (<video> and <audio>) that define the media element
<track>NewSubtitle files or other files containing text (<video> and <audio>) that specify the media element