HTML Audio Sounds

Sounds can be played in HTML by many different methods.

Problems and Solutions

Displaying audio in HTML is not easy!

You must add 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.

The Easiest Way to Add Audio to Your Site

The easiest way to add Audio to your web pages?

The Yahoo Media Player (described at the bottom of this page) is definitely a favorite.

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.

Example

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

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">

</script>

Try it yourself »

Using Plugins

A Plugin is a small computer program that extends the standard functionality of a web browser. Plugins can be used for many purposes. They can be used to display music, display maps, verify your bank id, control your input, and much more.

Plugins can be added to HTML pages using <object> or <embed> tags.

Playing Audio in HTML

Example

<audio controls="controls" height="50px" width="100px">

  <source src="song.mp3" type="audio/mpeg" />

  <source src="song.ogg" type="audio/ogg" />

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

</audio>

Try it yourself »

Using The <embed> Element

The purpose of the <embed> tag is to embed multimedia elements in HTML pages.

The following code fragment displays an MP3 file embedded in a web page.

Example

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

Try it yourself »

Problems:

The <embed> tag is unknown to HTML 4. Your page will not validate correctly.
If your browser does not support the file format, your audio will not play.
If you convert your file to another format, it will still not play in all browsers.

Using The <object> Element

The purpose of the <object> tag is to embed multimedia elements in HTML pages.

The following code fragment displays an MP3 file embedded in a web page.

Example

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

Try it yourself »

Problems:

If your browser does not support the file format, your audio will not play.
If you convert your file to another format, it will still not play in all browsers.

Using the <audio> Element

The <audio> element is an HTML 5 element, unknown to HTML 4, but it works in new browsers.

Example

<audio controls="controls">

  <source src="song.mp3" type="audio/mpeg" />

  <source src="song.ogg" type="audio/ogg" />

Your browser does not support this audio

</audio>

Try it yourself »

The example above uses an Ogg file, to make it work in Firefox, Opera and Chrome. To make the audio work in Internet Explorer and Safari, a file of the type MP3 is added.

Currently, there are 3 main formats for the audio element: Ogg Vorbis, MP3, and Wav.

Problems:

You must convert your audio files into many different formats.
The <audio> element does not work in older browsers.
The <audio> element does not validate in HTML 4 and XHTML.

The Best HTML Solution

Example

<audio controls="controls" height="50px" width="100px">

  <source src="song.mp3" type="audio/mpeg" />

  <source src="song.ogg" type="audio/ogg" />

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

</audio>

Try it yourself »

The example above uses 4 different audio formats. The HTML 5 <audio> element tries to play the video either as ogg or mp3. If this fails, the code "falls back" to try the <embed> element. If this also fails, it displays an error.

Problems:

You must convert your videos to many different formats.
The <audio> element does not validate in HTML 4 and XHTML.
The <embed> element does not validate in HTML 4 and XHTML.

NOTE: Using <!DOCTYPE html> solves the validation problem.

Using the Yahoo Media Player

Using the Yahoo Media Player is a different approach. You simply let Yahoo do the job of playing your songs.

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 Google

Example

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

<embed type="application/x-shockwave-flash" wmode="transparent" src="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=song.mp3" height="27" width="320"></embed>

Try it yourself »

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

vishnubrundha-computerworld

Friday 2 March 2012