HTML 5 audio elements

HTML audio

Audio element is used to play audio files in the browser by full control of the user’s. Before third-party browser plug-ins such as Flash Player or QuickTime were used for this. Currently, audio element has additional child element named source. It is used to find out the proper media file which you want to play. By this element, you can control start, stop and volume of the audio.

Audio formats:

MP3: An audio format of MPEG (Moving Pictures Expert Group)
AAC: Advanced Audio Coding, Use in standard IPhone and YouTube.
OGG: It’s an open container and free audio format.

Audio format’s browser compatibility:

Audio Formats Chrome Safari Firefox Opera IE
MP3 Yes Yes No No Yes
Wav Yes Yes Yes Yes No
Ogg Yes No Yes Yes No

Audio attributes:

Attribute Description
Src Determine the source URL of Audio.
Auto play The audio file will play immediately after it loads.
Controls Default audio controls are set of the browsers.
Loop Audio can be loop that means the audio file will start over again when finished.
Preload Audio will be loaded when the page loads. It has three values – none, metadata,
1
None: Before of playback is anything.
2
Metadata: Load the metadata (such as length) of the audio before of playback.

3

Auto: Download audio completed as quickly as possible.

Use of <audio> elements:

You can insert the audio of web page by this element. Declare audio tag and set source attribute with the location of the audio file.

Syntax:

<audio controls autoplay>
<source src=”tract.ogg” type=”audio/ogg”/>………</audio>
<source src=”tract.mp3″ type=”audio/mp3″/>……</audio>

Example:

First collect the audio file and save in a folder on your computer. Then type the following codes in Notepad.

HTML Code:

<!doctype html>
<html>
<style>body{font-family:verdana;}</style>
<body>
<audio autoplay="autoplay" controls="controls" loop="loop">
<source src="inception.ogg" type="audio/ogg"/>
<source src="inception.mp3" type="audio/mp3"/>
</audio>
</body>
</html>

Now audio.html or into any name, only use .html as the file extension to store in the same folder or directory on your computer. When you open the file, you will see the audio playback background. You will hear the song if you click the play button.

Display in Browser:

html audio

Multiple audio sources:

Audio file format is not supported by all browsers. So browser’s compatibility to ensure should be used in audio format as much as possible. In that case both of the source and the embedded element can be used. Browser can detect the type of audio file by type attribute. For use with the type attribute audio files can be – audio/mp3, audio/ogg, audio/wav.

Example:

HTML Code:

<!doctype html>
<html>
<style>body{font-family:verdana;}</style>
<body>
<audio autoplay="autoplay" controls="controls" loop="loop">
<source src="inception.ogg" type="audio/ogg"/>
<source src="inception.mp3" type="audio/mp3"/>
<embed height="60" width="120" source src="audio.mp3"/>
</audio>
</body>
</html>

 

One thought on “HTML 5 audio elements

Leave a Reply

Your email address will not be published. Required fields are marked *