Audio tag in HTML | Explanation, and Usage

Today, we will be discussing a very interesting topic i.e audio tag in HTML. The audio tag is useful when you want to add audio such as songs, interviews, voice recordings, etc to your webpage.

<audio> element

The <audio> element is useful when we want to embed any audio file in the webpage without requiring any additional plug-in like a Flash player. The <audio> element contains more than <source> with audio sources. The browser will choose the source it supports.

Syntax: <audio> <source src=”” type=””> </audio>

code
<!DOCTYPE html>
<html>
<body>

<h1>The audio element</h1>

<p>Click on the play button to play a sound:</p>

<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>
Output

The result of the above code would be an audio file that we can play by clicking the play button. Here, the play and pause control is in our hands because we have used the controls attribute in the audio tag.

Let’s discuss about the tags and attributes used int the above code.

  • <audio>: The <audio> element is used to insert audio file in the webpage.
    • controls: This specifies whether the audio controls should display or not such as the play/pause button etc.
  • <source>: The <source> element is used to provide different audio files.
    • src: This provides the URL of the media.
    • type: This specifies the MIME-type of the data.
  • The text inside the audio tag will only be visible if the browser doesn’t support the audio tag.
  • The audio tag only supports 3 file formats – mp3, wav, and ogg.

Note: We will be using a term in the following article i.e boolean attribute. The boolean attributes can only be true or false. The presence of these attributes consider as true and absence as false.

Attributes of <audio>

1. controls

  • Syntax: <audio controls>

2. autoplay

  • Syntax: <audio autoplay>.
  • the autoplay attribute is a boolean attribute.
  • Presence of this attribute makes the audio starts automatically and only stops when the audio ends.
<audio controls autoplay>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Hope you like our content on audio tag in html.

Leave a Comment

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