* * *
Sound can be played in HTML in different ways.
* * *
## Problems and Solutions
Playing audio in HTML is not easy!
You need to be well-versed in a lot of techniques to ensure your audio files can play in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and on all hardware (PC, Mac, iPad, iPhone).
In this chapter, the Novice Tutorial summarizes the problems and solutions for you.
* * *
## Using Plugins
Browser plugins are small computer programs that extend the standard functionality of a browser.
Plugins can be added to a page using the
tag or the tag.
These tags define a container for resources (usually non-HTML resources), which will be displayed either by the browser or by an external plugin depending on the type.
* * *
## Using the Element
The tag defines a container for external (non-HTML) content. (This is an HTML5 tag, illegal in HTML4, but works in all browsers).
The following code snippet can display an MP3 file embedded in a webpage:
## Example
[Try it Β»](
### **Problems:**
* The tag is invalid in HTML 4. The page cannot pass HTML 4 validation.
* Different browsers support different audio formats differently.
* If the browser does not support the file format, the audio cannot be played without a plugin.
* If the user's computer does not have the plugin installed, the audio cannot be played.
* If you convert the file to another format, it still may not play in all browsers.
* * *
## Using the Element
The tag can also define a container for external (non-HTML) content.
The following code snippet can display an MP3 file embedded in a webpage:
## Example
[Try it Β»](
### **Problems:**
* Different browsers support different audio formats differently.
* If the browser does not support the file format, the audio cannot be played without a plugin.
* If the user's computer does not have the plugin installed, the audio cannot be played.
* If you convert the file to another format, it still may not play in all browsers.
* * *
## Using the HTML5 Element
The HTML5 element is an HTML5 element, illegal in HTML 4, but works in all browsers.
The element works in all modern browsers.
### Browser Support
The numbers in the table specify the first browser version that fully supports the element.
| Element | | | | | |
| --- | --- | --- | --- | --- | --- |
| | 4.0 | 9.0 | 3.5 | Ξ4.0 | 10.5 |
Here we will use an tag to describe an MP3 file (valid in Internet Explorer, Chrome, and Safari), and also add an OGG type file (valid in Firefox and Opera browsers). If it fails, it will display an error text message:
## Example
Your browser does not support this audio format.
[Try it Β»](
### **Problems:**
* The tag is invalid in HTML 4. Your page cannot pass HTML 4 validation.
* You must convert the audio files into different formats.
* The element does not work in older browsers.
* * *
## The Best HTML Solution
The following example uses two different audio formats. The HTML5 element will try to play the audio as either mp3 or ogg. If it fails, the code will fall back to try the element.
## Example
[Try it Β»](
### **Problems:**
* You must convert the audio into different formats.
* The element cannot fall back to display an error message.
* * *
## Using Hyperlinks
If a webpage contains hyperlinks to media files, most browsers will use a "helper application" to play the file.
The following code snippet shows a link to an mp3 file. If a user clicks on the link, the browser will launch a "helper application" to play that file:
## Example
Play the sound
[Try it Β»](
* * *
## Inline Sound Explanation
When you include sound in a webpage, or as part of a webpage, it is called inline sound.
If you plan to use inline sound in web applications, you need to be aware that many people find inline sound annoying. Also note that users may have turned off inline sound options in their browsers.
Our best advice is to include inline sound only where users expect to hear it. A positive example is when a user needs to hear a recording and clicks on a link, a page opens and then plays the recording.
* * *
## HTML Multimedia Tags
New: New HTML5 Tags
| Tag | Description |
| --- | --- |
| []( | Defines an embedded object. Deprecated in HTML4, allowed in HTML5. |
| []( | Defines an embedded object. |
| []( | Defines parameters for an object. |
| []( | Defines sound content |
| []( | Defines a video or movie |
| []( | Defines multiple media resources for media elements ( and ) |
| []( | Defines text tracks for media elements ( and ) |