In this article I am going to describe about <audio> tag.

Audio Tag

<audio> tag is used to add audio to the html page or web page.<audio> tag defines sound or a audio stream . Any text between <audio> will be displayed in the browser that does not support audio. It is introduced in HTML5.Basically , it is a paired tag.

<audio> tag can play sound files and there are three main audio file format supported by an audio element

  1. mp3
  2. ogg
  3. wav

<audio> Tag attributes in HTML5

  • autoplay : It specifies that the audio will will start playing as soon as it is ready.

syntax : <audio autoplay="autoplay">

  • loop : It specify that the audio will start every time it is finished.

syntax : <audio loop="loop">

  • Preload : It tells the browser how the audio file should be loaded when the page loads.

syntax : <audio preload="value">

where value=auto (Browser should load the entire audio file when the page loads.)

value=metadata (Browser should load onl;y metadata when the page loads.)

value=none (Browser should not load audio file when the page loads.)

  • Controls : It will add the play , pause , volume button.

syntax : <audio controls = "controls">

  • src : It specifies the location(URL) of the audio file i.e source file.

syntax : <audio src="URL">

Browser support for <audio> element

Format Firefox 3.6+ Safari 5+ Chrome 6 Opera 10.5+ Internet Explorer 9 (Beta)
Ogg Yes Yes Yes
MP3 Yes Yes Yes
Wav Yes Yes Yes Yes

Example of <audio> tag in Html5

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<audio controls="controls" preload="none">

<source src="C:\Users\Public\Music\Sample Music\Kalimba.mp3" type="audio\mp3" loop/>

<source src="C:\Users\Public\Music\Sample Music\Maid with the Flexen Hair.mp3" />

</audio>

</body>

</html>