Post
Ask Question

Audio Tag in HTML5

Introduction 

 
The Audio tag is a new tag introduced in HTML5. You can use it to play audio sound like .mp3, wav, and .ogg. I have used five types of sound formats to show which formats are compatible with browsers. A WAV file is a common sound that is supported by most browser versions.
 
Syntax
 
<audio src="URL" controls>  </audio>
 
Syntax for more than one audio format
 
<audio controls="controls" autoplay   loop>
        <source src="URL1" type="audio/mp3" />
        <source src="URL2" type="audio/wma" />
        <source src="URL3" type="audio/x-wav" />
</audio>
  
New Element-Specific Attributes
autobuffer This Boolean attribute indicates whether or not the browser should begin
 
buffering audio right away.
autoplay This is the Boolean attribute indicate whether or not the file should start playing audio as soon as it can.
loop This Boolean attribute indicates whether or not apply repetition on playing audio.
src This attribute is used to specify the URL (location of the audio file) of the audio to show.
controls This Boolean attribute specifies whether or not the browser should display audio controls (such as play/pause, volume and seek).
 
HTML5 Event Attributes
onabort onblur oncanplay oncanplaythrough
onchange onclick oncontextmenu ondblclick
ondrag ondragend ondragenter ondragleave
ondragover ondragstart ondrop ondurationchange
onemptied onended onerror onfocus
onformchange onforminput oninput oninvalid
onkeydown onkeypress onkeyup onload
onloadeddata onloadedmetadata onloadstart onmousedown
onmousemove onmouseout onmouseover onmouseup
onmousewheel onpause onplay onplaying
onprogress onratechange onreadystatechange onscroll
onseeked onseeking onselect onshow
onstalled onsubmit onsuspend ontimeupdate
onvolumechange onwaiting    
 

HTMLPage2.htm
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title></title>  
  5.     </head>  
  6.     <body>  
  7.         <p>  
  8.         mp3</p>  
  9.         <audio src="sound/cartoonimpact.mp3" controls></audio>  
  10.         <br />  
  11.         <p>  
  12.         aac</p>  
  13.         <audio src="sound/cartoonimpact.aac" controls></audio>  
  14.         <br />  
  15.         <p>  
  16.         wma</p>  
  17.         <audio src="sound/cartoonimpact.wma" controls></audio>  
  18.         <br />  
  19.         <p>  
  20.         wav</p>  
  21.         <audio src="sound/cartoonimpactwav.wav" controls></audio>  
  22.         <br />  
  23.         <p>  
  24.         ogg</p>  
  25.         <audio src="sound/cartoonOGG.ogg" controls></audio>  
  26.         <br />  
  27.         <p>  
  28.         All in one</p>  
  29.         <audio controls="controls" autoplay>  
  30.             <source src="sound/cartoonimpact.mp3" type="audio/mp3" />  
  31.             <source src="sound/cartoonOGG.ogg" type="audio/ogg" />  
  32.             <source src="sound/cartoonimpact.aac" type="audio/aac" />  
  33.             <source src="sound/cartoonimpact.wma" type="audio/wma" />  
  34.             <source src="sound/cartoonimpactwav.wav" type="audio/x-wav" />  
  35.         </audio>  
  36.     </body>  
  37. </html>  
Output
 
Chrome 
 
Audio tag
 
FireFox
 
Audio tag
 
Internet Explorer
 
Audio tag
 
You can use the loop attribute to play sound repeatedly.
 
loop.htm
  1. <html  
  2.     xmlns="http://www.w3.org/1999/xhtml">  
  3.     <head>  
  4.         <title></title>  
  5.     </head>  
  6.     <body>  
  7.         <audio controls="controls" autoplay loop>  
  8.             <source src="sound/cartoonimpact.mp3" type="audio/mp3" />  
  9.             <source src="sound/cartoonOGG.ogg" type="audio/ogg" />  
  10.             <source src="sound/cartoonimpact.aac" type="audio/aac" />  
  11.             <source src="sound/cartoonimpact.wma" type="audio/wma" />  
  12.             <source src="sound/cartoonimpactwav.wav" type="audio/x-wav" />  
  13.         </audio>  
  14.     </body>  
  15. </html>  
Output
 
Audio tag
 
You can play sound in the background of the page using the following code.   
  1. <audio>  
  2.     <bgsound src="sound/cartoonimpactwav.wav">  
  3.     </audio>  


Similar Articles