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 rookie tutorial summarizes the problems and solutions for you.
Use plug-ins
The browser plug-in is a minicomputer program that extends the standard functionality of the browser.
Plug-ins can be used <object> label or <embed> tags are added to the page.
These tags define containers for resources (usually non-HTML resources), and depending on the type, they are displayed both by the browser and by external plug-ins.
Use <embed> element
<embed> tags define containers for external (non-HTML) content. This is a HTML5 tag that is illegal in HTML4 but valid in all browsers.
The following code snippet displays the MP3 file embedded in the web page:
Example
<embed height="50" width="100" src="horse.mp3">
Question:
<embed>tags are not valid in HTML 4. The page cannot be validated by HTML 4.Different browsers have different support for audio formats.
If the browser does not support the file format, the audio cannot be played without a plug-in.
Audio cannot be played if the user’s computer does not have a plug-in installed.
If you convert the file to another format, it still cannot be played in all browsers.
Use <object> element
<object tag> tags can also define containers for external (non-HTML) content.
The following code snippet displays the MP3 file embedded in the web page:
Example
<object height="50" width="100" data="horse.mp3"></object>
Question:
Different browsers have different support for audio formats.
If the browser does not support the file format, the audio cannot be played without a plug-in.
Audio cannot be played if the user’s computer does not have a plug-in installed.
If you convert the file to another format, it still cannot be played in all browsers.
Use HTML5 <audio> element
HTML5 <audio> element is a HTML5 element that is illegal in HTML 4 but is valid in all browsers.
The <audio> element works in all modern browsers.
Browser compatibility
The number in the box represents the first browser version number that supports the property.
element |
|||||
|---|---|---|---|---|---|
< audio > |
4.0 |
9.0 |
3.5 |
4.0 |
10.5 |
We will use the following <audio> tag to describe MP3 files (valid in Internet Explorer, Chrome, and Safari), and also add an OGG type file (valid in Firefox and Opera browsers). If it fails, it displays an error text message:
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>
Question:
<audio>tags are not valid in HTML 4. Your page cannot be verified by HTML 4.You must convert the audio file to a different format.
<audio>elements do not work in older browsers.
The best HTML solution
The following example uses two different audio formats. HTML5 <audio> the element attempts to play the audio in mp3 or ogg. If it fails, the code will roll back the attempt <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>
Question:
You must convert the audio to a different format.
<embed>the element cannot be rolled back to display an error message.
Use hyperlinks
If a web page contains a hyperlink to a media file, most browsers use Auxiliary applications to play the file.
The following code snippet shows a link to the mp3 file. If the user clicks the link, the browser launches the Auxiliary Application to play the file:
Example
<a href="horse.mp3">Play the sound</a>
The inline voice indicates
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 your web application, you need to be aware that many people find inline sound exasperating. 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 users want to hear inline voices. A positive example is that when the user needs to hear the recording and click on a link, the page opens and the recording is played.
HTML multimedia tags
New: new HTML5 tag
Label |
Description |
|---|---|
< embed > |
Define embedded objects. It is not approved in HTML4 and allowed in HTML5. |
< object > |
Define embedded objects. |
< param > |
Define the parameters of the object. |
< audio > New |
Defines the sound content |
< video > New |
Define a video or movie |
< source > New |
Multimedia resources that define media elements (< video > and < audio >) |
< track > New |
A subtitle file or other file containing text that specifies the media element (< video > and < audio >) |