Sounds can be played in HTML by many different methods.
Problems, Problems, and Solutions
Playing audio in HTML is not easy!You must know a lot of tricks to make sure your audio files will play in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and on all hardware (PC, Mac , iPad, iPhone).
In this chapter W3Schools summarizes the problems and the solutions.
Using Plug-ins
A browser Plug-in is a small computer program that extends the standard functionality of the browser.Plug-ins can be used for many purposes: play music, display maps, verify your bank id, control your input, and much more.
Plug-ins can be added to HTML pages using the <object> tag or the <embed> tag.
These tags defines containers for resources (normally non-HTML resources), which, depending on the type, will either be displayed by the browsers, or by an external plug-in.
Using The <embed> Element
The <embed> tag defines a container for external (non-HTML) content. (It is an HTML5 tag, invalid in HTML 4, but works in all browsers).The following code fragment can display an MP3 file embedded in a web page:
Problems:
- The <embed> tag is invalid in HTML 4. Your page will not validate as HTML 4.
- Different browsers have different audio format support.
- If a browser does not support the file format, the audio will not play without a plug-in.
- If the plug-in is not installed on the users' computer, the audio will not play.
- If you convert the file to another formats, it will still not play in all browsers.
Using The <object> Element
The <object tag> tag can also define a container for external (non-HTML) content.The following code fragment can display an MP3 file embedded in a web page.
Problems:
- Different browsers have different audio format support.
- If a browser does not support the file format, the audio will not play without a plug-in.
- If the plug-in is not installed on the users' computer, the audio will not play.
- If you convert the file to another formats, it will still not play in all browsers.
Using the HTML5 <audio> Element
The <audio> element is an HTML5 element, invalid in HTML 4, but it works in all browsers.Example
<audio controls="controls">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>
Try it yourself »
To make the audio work in Firefox and Opera, a file of the type ogg is added. If it fails it displays an error.
Problems:
- The <audio> tag is invalid in HTML 4. Your page will not validate as HTML 4.
- You must convert your audio files into different formats.
- The <audio> element does not work in older browsers.
The Best HTML Solution
Example
<audio controls="controls" height="100" width="100">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>
Try it yourself »
Problems:
- You must convert your videos to different formats.
- The <audio> element does not validate as HTML 4 and XHTML.
- The <embed> element does not validate as HTML 4 and XHTML.
- The <embed> element cannot "fall-back" to display an error.
The Easiest Way to Add Audio to Your Site
The easiest way to add audio to your web pages?The Yahoo Media Player is definitely a favorite.
Using the Yahoo Media Player is a different approach. You simply let Yahoo do the job of playing your songs.
It plays mp3 and a variety of other formats. You can add it to your page (or blog) with a single line of code, and easily turn your HTML page into a professional playlist.
The Yahoo Media Player
Example
<a href="song.mp3">Play Song</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>
Try it yourself »
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
Then you simply link to your MP3 files in your HTML, and the JavaScript code automatically creates a play button for each song:
<a href="song1.mp3">Play Song 1</a>
<a href="song2.mp3">Play Song 2</a>
...
...
...
The Yahoo Media Player presents your readers with a small play button instead of a full player. However, when you click the button, a full player pops up.
Note that the player is always docked and ready at the bottom the window. Just click on it to slide it out.
Using A Hyperlink
If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file.The following code fragment displays a link to an mp3 file. If a user clicks on the link, the browser will launch a helper application to play the file:
Inline Sound
When sound is included 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, be aware that many people will find inline sound annoying. Also note that some users might have turned off the inline sound option in their browser.
Our best advice is to include inline sound only in web pages where the user expects to hear the sound. An example of this is a page which opens after the user has clicked on a link to hear a recording.
HTML 4.01 Multimedia Tags
| Tag | Description |
|---|---|
| <applet> | Deprecated. Defines an embedded applet |
| <embed> | Deprecated in HTML4 but not in HTML5. Defines an embedded object |
| <object> | Defines an embedded object |
| <param> | Defines a parameter for an object |
Complete HTML 4.01 Reference.
No comments:
Post a Comment