Usage of Audio Tag:

The audio tag is used to play sounds, like songs, podcasts or any other type of audio streams. With HTML audio Tag you can embed audio file on your website.

Real Example:

The following image show us some collection of audio files.

Let learn its essentials elements to start using it in our HTML.

Basic syntax:

<audio controls autoplay loop muted>
    <source src="Aarzu.mp3" type="audio/mpeg">
    <source src="Safna.mp3" type="audio/ogg">
    Your browser does not support Audio
</audio>

You don't have to worry I will explain everything one by one.

Still after reading the whole blog everything looks confuse. Just follow the basic syntax and you are good to go.

Tags:

Basic tags used are:

• Audio Tag: <audio blah blah blah ></audio>

The audio tags tell compiler that its an audio file.
Audio tags has both open and closing tags.

• Source Tag: <source blah blah>

It defines one file at a time with file source and its types (explained below). We can define as many files as we want just like I have defined two in this case.

Audio Tag Attributes:

Following attributes are used inside HTML audio Tag.

• Control Attribute: <audio controls ></audio>

  It specifies that this audio should have audio controlling options like pause and play icon/speaker icon etc.

• Automatic Play Attribute: <audio controls autoplay ></audio>

  This specify that the audio start playing as the page loads. Autoplay mean automatic play.

• Repeated Play Attribute: <audio controls autoplay loop></audio>

  The audios will play again and again when it ends.

• Silent Mode Attribute: <audio controls autoplay loop muted></audio>

  With this attribute the audio will be muted when the page loads and you have to manually unmute it.

• Preload Attribute: <audio preload="auto/metadata/none" ></audio>

  Preload attribute give us an option how did we want to LOAD the audio.

  • preload="auto" => Load entire file when page load.
  • preload="metadata" =>Load only metadata when page loads
  • preload="none" => load nothing.

*Important Note: * The preload attribute is ignored if autoplay is present.

Wrong: <audio controls autoplay preload="auto" loop muted></audio>

Correct: <audio controls preload="auto" loop muted></audio>

Source Tag Attributes:

src="file location"
SRC mean source of the file, like where is this file located. It can be a link or a directory path.

type=mpeg/wav/ogg There are three supported audio formats for HTML audio Tag that have different MIME type values.

• Mp3 -> audio/mpeg
• Wav -> audio/wav
• OGG -> audio/ogg

Don't worry about MIME now. Just know that it has 3 types.

What About the Text Inside Audio Tag?

Well the text will not display until the browser does not support audio.

Thanks for reading. Give it a Like, Comment and Share it.
Learn Little but Better