HTML - <audio> Tag

Quiz

Introduction to <audio> Tag

The HTML <audio> tag is used to embed audio in a webpage, providing a simple way to play sound files like music, podcasts or other audio formats. It supports various various audio formats such as MP3, Ogg, and WAV ensuring compatibility across different browsers.

Syntax

Following is the syntax of HTML <audio> tag −.

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

Example : Basic Audio with Controls

In the following example, we are going to display the audio player with play, pause and volume controls using the controls attribute.

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

Example : Using with Autoplay

Consider the following example, where we are going to play the audio automatically when the page loads.

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

Example : Muted Audio

Lets look at the following example, where the audio player starts with the sound muted.

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

Example : Applying in Loop

Following is the example, where 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>

Supported Browsers

Tag
audio	Yes 4.0	Yes 9.0	Yes 3.5	Yes 3.1	Yes 11.5

html_tags_reference.htm

Print Page