In this section, we will learn what HTML <audio> element is and how it works.

What is <audio> Tag in HTML?

The HTML <audio> tag is a way of bringing audio into a webpage. This element has attributes that allow us to set the address of an audio file and control elements that could be used to stop, play, change the volume etc. on the audio file.

HTML <audio> Tag Syntax:

<audio src = "audio-file-address" > </audio>

<audio>

<source src = "audio-file-address" type = "type-of-the-audio">

</audio>

HTML <audio> Tag Values

In its simplest form, the HTML <audio> element does not take a value within its body (between opening and closing tags). All we need to do is to set the address of the target audio file as the value of the `src` attribute and that’s it, the file will be played on the page after loading.

But you should know that browsers are not capable of displaying every type of audio file! For this reason, we need to supply different formats of the same audio file and put them as the value of One or more HTML <source> element. This will help browsers to pick the format of the audio file that they can actually work with and play.

Note: We can put as many HTML <source> element within the body of HTML <audio> element to support more formats.

Also, when using <source> element in the body of <audio> tag, there’s no need to use the `src` attribute for <audio> element anymore.

Example: HTML audio play

See the Pen HTML audio play by Omid Dehghan (@odchan1) on CodePen.

Example: HTML audio play with <source> element

See the Pen HTML audio play with <source> element by Omid Dehghan (@odchan1) on CodePen.

HTML <audio> Tag Attributes

Name	Description
autoplay	With this attribute, the audio file will automatically play after being loaded on the webpage.
controls	Using this attribute forces Browsers to supply the controls needed to play the audio file.
loop	Using this attribute will replay the audio file after it is reached to its end.
muted	Using this attribute will mute the audio file.
preload	This attribute tells the browsers what to do with the audio file when the page loaded. Basically, this attribute controls how and when the audio file should be downloaded into the page.
src	With this attribute, we set the address of the target audio file to be used by the audio player.