IMC Home Page | Library Home Page | UAlbany Home Page
Introduction to
Basic HTML 5 & CSS3 Effects

Audio

One of the most anticipated features of HTML5 is the ability to play video and audio without the need for extra players or plugins. The intention is that the media will play directly in the browser. This section is illustrate how this can be done with audio files.

Audio

Once the audio tag is supported by the browsers, it will no longer be necessary to use an audio player. Sound will play directly in the browser. Controls will be provided by the browser, not by secondary files of "skins."

Not all browser currently support all available file formats. OGG, MP3, and WAV are the supported formats, but not every browsers can play all three. In this section you will discover which browser plays what format, and you will find a solution to the problem below.

Be sure to try this page in different browsers to see which file formats they can play.

 

The player on the right will demonstrates the WAV file format. If you do not see working controls, your browser either does not support the audio tag in HTML5 or does not play WAV files.

The player on the right will demonstrates the MP3 file format. If you do not see working controls, your browser either does not support the audio tag in HTML5 or does not play MP3 files.

The player on the right will demonstrates the OGG file format. If you do not see working controls, your browser either does not support the audio tag in HTML5 or does not play OGG files.

Audio Tag Syntax

The basic syntax for the audio tag is very simple:

<audio src="mysound.ogg" controls="controls">

The attribute controls="controls" specifies whether or not control will be displayed.

Additional attributes include:

Be sure to specify the true file name in place of "mysound.ogg" in the example above.

You can get around the problem of not all browsers supporting all file formats by coding the tag this way:

<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

If your browser cannot play the first file format on the list it will try the second. If the second will not play, the browser will try the third on the list, if it is specified.

<-- Return to top of page -->