Skip to main content

HTML <audio> Tag

HTML <audio> tag is used to embed audio files on a web page. It allows users to play audio files directly on the web page, without the need to download the file or use a separate audio player.

The <audio> tag is an empty element, which means that it doesn't have a closing tag. It can be used in two ways:

To embed an audio file directly into the web page using the src attribute:

<audio src="song.mp3" controls>
	Your browser does not support the audio element.
</audio>

To link to an external audio file using the <source> tag:

<audio controls>
	<source src="song.mp3" type="audio/mpeg">
	Your browser does not support the audio element.
</audio>

The controls attribute adds the default audio player controls to the web page, such as play, pause, and volume controls.

Here are some additional attributes that can be used with the <audio> tag:

  • autoplay: Automatically starts playing the audio file when the page loads.
  • loop: Loops the audio file when it reaches the end.
  • muted: Mutes the audio file by default.
  • preload: Specifies whether or not the audio file should be preloaded.

Here's an example of an <audio> tag with multiple attributes:

<audio src="song.mp3" controls autoplay loop muted>
	Your browser does not support the audio element.
</audio>

You can also use JavaScript to control the audio player, such as playing, pausing, and setting the volume of the audio file. Here's an example of using JavaScript to play the audio file when a button is clicked:

<audio id="myAudio" src="song.mp3"></audio>
<button onclick="document.getElementById('myAudio').play()">Play</button>
<button onclick="document.getElementById('myAudio').pause()">Pause</button>

That's a brief overview of the HTML <audio> tag and some of its attributes and uses. You can use it to add audio files to your web pages and control them with JavaScript.