HTML Audio Tag

The music and songs we listen to on web pages are an example of the HTML <audio> tag. This tag helps the developers to attach an audio file to an HTML document. This tutorial will teach you about the HTML <audio> tag.

What is HTML <audio> Tag?

The HTML <audio> tag is used to embed audio files on a web page. It allows audio files to be played directly in a web browser without needing additional plugins.

The <audio> tag is an inline tag that adds sound files to a web page. This is a helpful tag for developers to attach audio files like songs, music, etc., to their webpage. HTML developers know that not all web browsers support every audio format; They should encode the audio file using specific codecs. They can implement the <source> tag or the src attribute to demonstrate the interpretations of the same audio file. An absolute or relative URL can be included in the track of an audio file. The HTML <audio> tag comes in pairs. Developers can write content within the opening, i.e., <audio> tag, and closing, i.e., </audio>.

Here's an example of using the  <audio> tag to embed an audio file on a web page:

Example:

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

The src attribute specifies the URL of the audio file to be embedded. The control attribute adds audio controls to the tag, such as a play/pause button.

HTML <audio> Tag Attributes

The HTML audio tag also has some attributes that can be used to control the behavior of the audio player. Some common attributes include:

• src: This attribute specifies the URL of the audio file that you want to play.
• controls: This attribute adds the default audio player controls (e.g., play/pause, volume, etc.) to the audio tag.
• autoplay: This attribute causes the audio file to start playing automatically as soon as the page loads.
• loop: This attribute causes the audio file to loop (i.e., start over from the beginning) after it finishes playing.
• preload: This attribute specifies whether or not the browser should start loading the audio file as soon as the page loads. Possible values are "none", "metadata", and "auto".
• muted: This attribute specifies whether or not the audio should be muted (i.e., have no sound).

HTML <audio> Tag Audio Formats

Different web browsers support different audio formats. In general, the most commonly supported audio formats for the audio tag are:

• MP3 (MPEG audio stream)
• Ogg Vorbis
• WAV (Waveform Audio File Format)

The developer can specify multiple src attributes for the same audio tag, each with a different audio file in a different format. This allows the browser to provide multiple options to choose from, increasing the probability that the browser will support at least one audio format

Example:

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.wav" type="audio/wav">
  Sorry, your browser does not support the audio tag.
</audio>

It's also worth noting that some newer browsers support additional audio formats, such as MP4 (MPEG-4 audio) and WebM (a multimedia container format designed for use with HTML5 video and audio). These formats can be used like any other format by adding them as additional source tags within the audio tag.

Styling Audio Player

The appearance of the audio player can also be customized using CSS. For example, change the color and font of the controls, or hide the controls entirely.

Example:

<style>
audio {
  width: 400px;
  background-color: #ccc;
}

audio::-webkit-media-controls-panel {
  display: none;
}
</style>