Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

HTML

Learn step by step



HTML5 Audio

Before HTML5 media elements, there was no standard for playing audio files.

Before HTML5, plugins like flash were used to play audio files.

HTML5 has a new media element which embeds an audio file on a web page: the <audio> element.


<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

The control attribute adds audio controls, like play, volume, and pause.

You should also insert default text content between the <audio> and </audio> tags for browsers that do not support the <audio> element.

The <audio> element supports multiple <source> elements. <source> elements can link to different audio files. The browser will run the first recognized format.

Audio Formats and Browser Support

Currently, there are 3 supported file formats for the <audio> element: Wav,MP3 and Ogg:

Browser MP3 Wav Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox NO
Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3
YES YES
Safari YES YES NO
Opera NO YES YES
MIME Types for Audio Formats
Format MIME-type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav
HTML5 Audio Tags
Tag Description
<audio> Defines sound content
<source> Provides multiple media resources for media elements, such as <video> and <audio>
Audio Attribute Specification:

The HTML5 audio tag contains a number of attributes to control the look and feel and various functionalities of the control:

AttributeDescription
autoplayThis attribute when set will play the content as soon as its loaded.
autobufferThis attribute when set will buffer all contents.
controlsThis attribute when set will allow the user to control audio playback, including volume, seeking, and pause/resume playback.
loopThis attribute when set will allow audio automatically seek back to the start after reaching at the end.
preloadThis attribute when set will allow audio to be loaded at page load, and ready to run. Ignored if autoplay is present.
srcProvides URL of the audio to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed


Related Videos