HTML audio (Audio)

Sound in HTML can play in different ways.

Problems and solutions

Play audio in HTML is not easy!

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

In this chapter, W3CSchool you summarize the problems and solutions.

The use of plug-in

Browser plug-in is an extension of the standard browser features a small computer program.

Plug-ins can use <object> tag or <embed> tag added to the page.

These labels define the resource (typically non-HTML resources) container, depending on the type, they will be displayed by the browser that is also displayed by the external plug-ins.

Using the <embed> element

<Embed> tag defines a container external (non-HTML) content. (This is a HTML5 tags in HTML4 is illegal, but all browsers are valid).

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

problem:

• <Embed> tag in HTML 4 is invalid. Page can not be verified by HTML 4.
• Different browsers support different audio formats for.
• If your browser does not support the file format, no plug-ins, then you can not play the audio.
• If the user's computer is not plug-in installed, you can not play audio.
• If the file is converted to other formats, still can not play in all browsers.

Use <object> element

<Object tag> tag can also be defined outside of the container (non-HTML) content.

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

problem:

• Different browsers support different audio formats for.
• If your browser does not support the file format, no plug-ins, then you can not play the audio.
• If the user's computer is not plug-in installed, you can not play audio.
• If the file is converted to other formats, still can not play in all browsers.

Use HTML5 <audio> element

HTML5 <audio> element is an HTML5 element in HTML 4 is illegal, but in all browsers are valid.

The <audio> element works in all modern browsers.

Below we will use the <audio> tag to describe the MP3 files (Internet Explorer, Chrome and Safari is effective), also added an OGG file types (Firefox and Opera browsers effective). If it fails, it displays an error text:

problem:

• <Audio> tag in HTML 4 is invalid. Your page can not be verified by HTML 4.
• You have to convert audio files to different formats.
• <Audio> element does not work in older browsers.

Best HTML Solution

The following example uses two different audio formats. HTML5 <audio> element tries to play ogg to mp3 or audio. If this fails, the code will attempt to rollback <embed> element.

problem:

• You must be converted to a different audio format.
• <Embed> element can not be rolled back to display an error message.

Yahoo Media Player - a simple way to add audio on your site

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

Yahoo player can play MP3 and various other formats. You only need to add one line of code to your page or blog, you can easily make your HTML page into a professional playlist:

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

Then simply put a link to your MP3 files in HTML, JavaScript automatically creates the play button for each song:

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

Yahoo media player for your users is a small play button instead of the full player. However, when you click on this button will pop up a complete player.

Please note that this player is always docked at the bottom of the window frame. Just click on it, you can slide it out.

Using hyperlinks

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

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

Description sound inline

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 your web applications, you need to realize that many people find inline sound annoying. Also note that users may have closed your browser inline sound option.

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

HTML multimedia tag

New: HTML5 new label