HTML Audio

HTML Audio

---

Sound can be played differently in HTML.

---

problems and solutions

Playing audio in HTML is not easy!

You need to know a lot of tricks to make sure that your audio files play in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and all hardware (PC, Mac, iPad, iPhone).

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

You can get more details by referring to the section of the HTML Reference Manual for more details!

---

Use plug-ins

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

Plug-ins can be added to the page using the hashtags or the hashtags.

These labels define containers for resources ,usually non-HTML resources, which, depending on the type, are displayed by the browser and by external plug-ins.

---

Use the elements of the .lt;embed

Labels define containers for external (non-HTML) content. (This is an HTML5 tag that is illegal in HTML4, but valid in all browsers).)

The following snippets can show MP3 files embedded in a Web page:

Problem:

• The label is not valid in HTML 4. The page cannot be verified by HTML 4.

• Different browsers also have different support for audio formats.

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

• If the user's computer does not have a plug-in installed, audio cannot be played.

• If you convert the file to a different format, it still doesn't play in all browsers.

---

Use the element of the

Labels can also define containers for external (non-HTML) content.

The following snippets can show MP3 files embedded in a Web page:

Problem:

• Different browsers also have different support for audio formats.

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

• If the user's computer does not have a plug-in installed, audio cannot be played.

• If you convert the file to a different format, it still doesn't play in all browsers.

---

Use HTML5 and the audio-gt; element

The HTML5 element is an HTML5 element that is illegal in HTML 4 but valid in all browsers.

The <audio> element works in all modern browsers.

The browser is compatible

The number in the grid supports the first browser version number of the property.

Below we'll describe the MP3 file (valid in Internet Explorer, Chrome, and Safari), as well as an OGG type file (valid in Firefox and Opera browsers), and if it fails, it will display an error text message:

Problem:

• The label is not valid in HTML 4. Your page cannot be verified by HTML 4.

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

• The elements don't work in older browsers.

---

The best HTML solution

The following example uses two different audio formats. H TML5 and audio-gt; elements try to play audio as mp3 or ogg. If it fails, the code rolls back the element of the attempt.

Problem:

• You must convert the audio to a different format.

• The element cannot fall back to display the error message.

---

Yahoo Media Player - A simple way to add audio to your website

Use of Yahoo Player is free of charge. To use it, you need to insert this JavaScript into the bottom of the page:

Yahoo players can play MP3 and a variety of other formats. You can easily make your HTML page a professional playlist by adding just one line of code to your page or blog:

If you want to use it, you need to insert this JavaScript code into the bottom of the page:

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

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

Yahoo Media Player provides your users with a small play button instead of a full player. However, when you click the button, the full player pops up.

Note that the player is always docked at the bottom of the window frame. Just click on it and slide it out.

---

Use hyperlinks

If a Web page contains hyperlinks to media files, most browsers use Secondary Applications to play the files.

The following snippets show links to MP3 files. If the user clicks on the link, the browser launches a "secondary application" to play the file:

---

Inline voice description

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

If you plan to use inline sound in a web application, you need to realize that many people find inline sound annoying. Also note that the user may have turned off the inline sound option in the browser.

Our best advice is to include inline sounds only where users want to hear them. A positive example is when the user needs to hear the recording and click a link, the page opens and the recording is played.

---

HTML multimedia tags

New : HTML5 new label

Label	describe
<embed>	Define embedded objects.It is not approved in HTML4, and HTML5 is allowed.
<object>	Define embedded objects.
<param>	Define the parameters of the object.
<audio> New	Define sound content
<video> New	Define a video or video
<source> New	定义了media元素的多媒体资源(<video> 和 <audio>)
<track> New	规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)