Table of Contents

HTML – <audio> Tag

”;

HTML <audio> tag is used to embed audio files on a website. It enables the direct playback of audio files within a web browser without the requirement for extra plugins. The audio file should be encoded using certain codes because all web browsers do not support all audio formats.

Syntax

<audio>
   <source src=" " type=" ">
</audio>

Attribute

HTML audio tag supports Global and Event attributes of HTML. And some specific attributes as well which are listed bellow.

Attribute	Value	Description
autoplay	autoplay	This Boolean attribute if specified, the audio will automatically begin to play back as soon as it can do so without stopping to finish loading the data.
muted	muted	Specifies that the audio should be muted.
controls	controls	If this attribute is present, it will allow the user to control audio playback, including volume, seeking, and pause/resume playback.
loop	loop	This Boolean attribute if specified, will allow audio automatically seek back to the start after reaching at the end.
preload	auto metadata none	This attribute specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present.
src	URL	The URL of the audio to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed.

Examples of HTML audio Tag

Bellow examples will illustrate the usage of audio tag. Where, when and how to use it to render audio player and how we can manipulate audio player using CSS.

Embedding Audio Element

Following is an example where we are going to use the <audio> tag to add a music file to the webpage.

<!DOCTYPE html>
<html>
<body style="background-color:#D5F5E3">
   <audio controls>
      <source src=
"https://samplelib.com/lib/preview/mp3/sample-3s.mp3" 
   type="audio/mpeg">
   </audio>
</body>
</html>

Autoplay Audio after Page load

Consider another scenario where we are going to add the autoplay attribute to the <audio> tag.

<!DOCTYPE html>
<html>
<body style="background-color:#E8DAEF">
   <audio controls autoplay>
      <source src=
"https://samplelib.com/lib/preview/mp3/sample-3s.mp3" 
   type="audio/mpeg">
   </audio>
</body>
</html>

Muted Audio element with Autoplay

Let’s look at another example where we are going to use the muted attribute to the <audio> tag along with the autoplay.

<!DOCTYPE html>
<html>
<body style="background-color:#CCCCFF">
   <audio controls autoplay muted>
      <source src=
"https://samplelib.com/lib/preview/mp3/sample-3s.mp3" 
   type="audio/mpeg">
   </audio>
</body>
</html>

Audio playing on a loop

In the following example, we are going to use the <audio> tag along with the loop attribute.

<!DOCTYPE html>
<html>
<body style="background-color:#FCF3CF ">
   <audio controls autoplay loop>
      <source src=
"https://samplelib.com/lib/preview/mp3/sample-3s.mp3" 
   type="audio/mpeg">
   </audio>
</body>
</html>