HTML Basic Tutorial

HTML Media

HTML Reference Manual

HTML5 Basic Tutorial

HTML5 API

HTML5 Media

HTML Video (Video) Playback HTML Plugins

HTML Audio (Audio)

Sound can be played in HTML in different ways.

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, the basic tutorial summarizes the problems and solutions.

using plugins

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

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

These tags define containers for resources (usually non-HTML resources), according to the type, they will be displayed by the browser or displayed by external plugins.

using <embed> element

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

The following code snippet can display MP embedded in the web page3 File:

Online example

Example

!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<object　height="50" width="100"　data="/run/html/horse.mp3></object>
<p>If you cannot hear the audio, it may be that your computer or browser does not support the file format.</p>
<p>Or you have not turned on the speaker.</p>
</body>
</html>

Test to see ‹/›

Problem:

The <embed> tag in HTML 4 is invalid. The page cannot pass HTML 4 Verification.
Different browsers have different support for 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 install the 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 following code snippet can display MP embedded in the web page3 File:

Online example

Example

!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<object　height="50" width="100"　data="/run/html/horse.mp3></object>
<p>If you cannot hear the audio, it may be that your computer or browser does not support the file format.</p>
<p>Or you have not turned on the speaker.</p>
</body>
</html>

Test to see ‹/›

Problem:

Different browsers have different support for 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 install the 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

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

The <audio> element 　 works in all modern browsers.

Browser compatibility

The numbers in the format indicate the first browser version that supports the property.

element	Chrome	IE	Firefox	Safari	Opera
<audio>	4.0	9.0	3.5	4.0	10.5

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

Online example

Example

!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<audio controls>
　　<source src="/run/html/horse.mp3" type="audio/mpeg">
　　<source src="/run/html/horse.ogg" type="audio/ogg">
　　Your browser does not support this audio format.
</audio>
</body>
</html>

Test to see ‹/›

Problem:

The <audio> tag in HTML 4 is invalid. 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. HTML5 The <audio> element will try to play audio with mp3 or ogg to play audio. If that fails, the code will fallback to try the <embed> element.

Online example

Example

!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<audio controls>
　　<source src="/run/html/horse.mp3" type="audio/mpeg">
　　<source src="/run/html/horse.ogg" type="audio/ogg">
　　<embed height="50" width="100" src="/run/html/horse.mp3">
</audio>
</body>
</html>

Test to see ‹/›

Problem:

You must convert the audio to a different format.
The <embed> element cannot fallback to display error messages.

Use hyperlinks

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

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

Online example

Example

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

Test to see ‹/›

Inline sound description

When sound is included in a web page or is 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 the user may have already turned off the inline sound option in the browser.

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 the recording will play.

HTML multimedia tags

New : 　HTML5 New tag

Tag	Description
<embed>	Defined an embedded object. HTML4 Not recommended, HTML5 Allowed in.
<object>	Defined an embedded object.
<param>	Defined the parameters of the object.
<audio>HTML5	Defined sound content
<video>HTML5	Defined a video or movie
<source>HTML5	Defined multimedia resources of the media element (<video> and <audio>)
<track>HTML5	Specify the subtitle file or other text-containing files for the media element (<video> and <audio>)

HTML Video (Video) Playback HTML Plugins