HTML Audio - Fullstackadda

What is HTML Audio Tag

The HTML <audio> tag is used to embed audio files on a web page. It can be used to play a variety of audio formats such as MP3, OGG, and WAV. The <audio> tag supports various attributes, such as src (to specify the source of the audio file), controls (to display the default audio player controls), and loop (to loop the audio file continuously). An example of an <audio> tag is:

<audio src="example.mp3" controls></audio>

This will embed an audio file called “example.mp3” and display the default audio player controls on the web page.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>HTML audio Tag</title>
   </head>

   <body>
      <p>Click the button to listen audio...</p>
      <p>(Song: pixabay)</p>
      
      <audio controls>
         <source src = "local.mp3" type = "audio/mpeg">
      </audio>
   </body>

</html>

Output

Here is a table that compares the HTML <audio> tag and the <video> tag:

Feature	`<audio>` Tag	`<video>` Tag
Purpose	Embed audio files	Embed video files
Supported file formats	MP3, OGG, WAV	MP4, OGG, WEBM
Default player controls	Available	Available
Autoplay	Supported	Supported
Loop	Supported	Supported
Width and Height	Not supported	Supported
Poster Image	Not supported	Supported

It is worth mentioning that <audio> and <video> tags both support the src, controls, autoplay, loop, muted, preload attributes, and some events like onplay, onpause, onended and onvolumechange .

It’s also worth noting that the <audio> tag is used for audio only, while the <video> tag can include both audio and video.

HTML Audio Tag Attributes

There is given a list of HTML audio tag.

Attribute	Description
controls	It defines the audio controls which is displayed with play/pause buttons.
autoplay	It specifies that the audio will start playing as soon as it is ready.
loop	It specifies that the audio file will start over again, every time when it is completed.
muted	It is used to mute the audio output.
preload	It specifies the author view to upload audio file when the page loads.

The HTML <audio> tag is used to embed audio files on a web page.
The <audio> tag supports various attributes, such as src (to specify the source of the audio file), controls (to display the default audio player controls), and loop (to loop the audio file continuously).