Implementing Audio tag in HTML.

Posted by manasvisawant45 on March 2, 2021 3:43 pm


The audio tag is one of the important tags as it is used to implement sound or audio in the document as well as, in any project.

The <audio> tag contains one or more different audio sources. The browser may support in the first come first serve way or you can play both together.

The text between the opening and closing audio tag will only be displayed when the browser is unable to display any sound content included in the audio tag. There are three available supported audio formats in HTML: MP3, WAV, and OGG.

Below is a simple code snippet:


  <!DOCTYPE html>                                                                   
  <html>                                                                          
  <body>
     <h1>The audio element</h1>
     <p>please play the audio:</p>
    <audio
       controls source src="bensound.mp3" type="audio/mpeg">
        Not able to play
    </audio>
 </body>
</html>

You can see there are other attributes also present inside the audio tag such as controls .

controls: It offers to have controls on the pause and play button which is displayed when we use this attribute.

There are many other attributes like autoplay, loop, muted, preload and src and is described below.

autoplay: It will start playing audio as soon it is ready.

loop: The audio will repeat itself over and over again, once it is finished, it will start all over again.

muted: It specifies that audio output will be muted.

preload: Audio gets loaded once the page is loaded even if refreshing by user takes place.

src: It is the url of the audio.

Audio used is taken from Bensound.com. Above given is simple example of <audio>, try and feel free to comment below.