HTML Audio

Quiz

The HTML <audio> element embeds an audio file to the webpage. You can add an audio player inside a webpage using the <audio> element.

HTML <audio> Element

The <audio> element is used to enable the support of audio files within a web page. We can include multiple sources of audio; however, the browser will choose the most appropriate file automatically. Most of the attributes of <video> element is also compatible with the <audio> element. The most frequently used attributes of the HTML audio element are controls, autoplay, loop, muted, and src.

Attributes of <audio> Elements

The following are the attributes used with the <audio> tag:

Attribute	Description
`controls`	This attribute adds built-in audio controls for play, pause, and volume.
`autoplay`	This attribute allows playing the audio automatically when the page is loaded.
`loop`	This attribute allows looping of the audio.
`muted`	This attribute mutes the audio by default when the page is loaded.
`preload`	This attribute specifies how the audio should be preloaded by the browser.
`src`	This attribute specifies the path to the audio file.	File URL

Embedding an Audio in HTML

You can embed an audio player using the <audio> tag by specifying the audio file path. The audio file path can be defined either by setting the src attribute or by including the <source> tag.

The current HTML5 draft specification does not specify which audio formats browsers should support in the audio tag. But the most commonly used audio formats are ogg, mp3, and wav. Therefore, it is also possible to supply all these formats by using multiple <source> tags within the <audio> element. Let the browser decide which format is more suitable for audio playback.

It is necessary to use the controls attribute so that users can manage audio playback functions such as volume adjustment, forward or backward navigation, and play or pause operations.

Syntax

Here is the syntax to embed an audio file:

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

Here,

<audio>: The main element to embed an audio player.
controls: Controls to add play, pause, and volume functionalities.
<source>: It specifies the audio file name (along with its path) and the audio file's format.
Fallback text: The text to be displayed if the browser doesn't support the <audio> element. In the above syntax, it will display:
"Your browser does not support the audio element."

Example of HTML Audio Element

Here is the complete example you can use to embed an audio player on the webpage:

<!DOCTYPE html>
<html>
<body>
   <p>Working with audio element</p>
   <audio controls>
      <source src= "/html/media/audio/sample_3sec_audio.mp3" type = "audio/mp3" />
      <source src= "/html/media/audio/sample_3sec_audio.wav" type = "audio/wav" />
      <source src= "/html/media/audio/sample_3sec_audio.ogg" type = "audio/ogg" />
      Your browser does not support the <audio> element.
   </audio>
</body>
</html>

Using autoplay, muted, and loop Attributes in Audio Player

We can also configure the audio to play automatically in a loop by using the autoplay and loop attributes. Remember, the Chrome browser does not support the autoplay feature unless the muted attribute is used. Therefore, it is recommended to use autoplay and muted attributes together.

The autoplay is a Boolean attribute that is used to play the audio automatically once the page is loaded. If the loop attribute is present on the <audio> element, the audio sound will automatically rewind to the beginning once the end of the audio is reached.

Example

The following example illustrates the autoplay and looping of audio −

<!DOCTYPE html>
<html>
<body>
   <p>Working with audio element</p>
   <audio controls autoplay muted loop>
      <source src= "/html/media/audio/sample_3sec_audio.mp3" type = "audio/mp3" />
      <source src= "/html/media/audio/sample_3sec_audio.wav" type = "audio/wav" />
      <source src= "/html/media/audio/sample_3sec_audio.ogg" type = "audio/ogg" />
      Your browser does not support the <audio> element.
   </audio>
</body>
</html>

Browser Support for Different Audio Formats

The table below illustrates the various audio formats that are supported by different browsers:

Browser	OGG	WAV	MP4
Chrome	Yes	Yes	Yes
Edge	Yes	Yes	Yes
Safari	No	Yes	Yes
Firefox	Yes	Yes	Yes
Opera	Yes	Yes	Yes

Print Page