Tuesday, August 14, 2012

Playing Sounds in HTML

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:

Example

<embed height="100" width="100" src="song.mp3" />

Try it yourself »

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.
NOTE: Using <!DOCTYPE html> (HTML5) solves the validation problem.

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.

Example

<object height="100" width="100" data="song.mp3"></object>

Try it yourself »

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>

Try it yourself »
The example above uses an mp3 file, to make it work in Internet Explorer, Chrome, and Safari.
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.
NOTE: Using <!DOCTYPE html> (HTML5) solves the validation problem.

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>

Try it yourself »
The example above uses two different audio formats. The HTML5 <audio> element tries to play the video either as mp3 or ogg. If this fails, the code "falls back" to try the <embed> element.

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.
NOTE: Using <!DOCTYPE html> (HTML5) solves the validation problem.

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>

Try it yourself »
Using the Yahoo player is free. To use it you insert this piece of JavaScript at the bottom of your web page:

<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:

Example

<a href="song.mp3">Play the song</a>

Try it yourself »


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

TagDescription
<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