HTML Audio

The HTML audio element is used to play an audio file on a web page.

The HTML <audio> tag is used to add any audio file to a webpage. HTML helps you to add multimedia files on your site by providing different multimedia tags/element like <audio>, <video>, <embed>, and <object>.

In this tutorial, you will learn-

In this article, you will learn-

1 The HTML <audio> Element
2 HTML Audio – How It Works
3 HTML <audio> Autoplay
4 HTML Audio Formats
5 HTML Audio – Media Types
6 HTML Audio – Methods, Properties, and Events
7 HTML_Audio Tags

The HTML <audio> Element

To play an audio file in HTML, use the <audio> element:

Example

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

HTML Audio – How It Works

The controls attributes adds audio controls, similar to play, interruption, and volume.

The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first perceived format.

The content between the <audio> and </audio> tags might be shown in browsers that don’t support the </audio>

HTML <audio> Autoplay

To begin an audio file automatically, use the autoplay attribute:

Example

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Note: Chromium browsers don’t allow autoplay as a rule. Notwithstanding, quieted autoplay is constantly allowed.

Add muted after autoplay to allow your audio file begin playing automatically (but muted):

Example

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

HTML Audio Formats

There are three supported audio formats: MP3, WAV, and OGG. The browser support for the various formats is:

Browser	MP3	WAV	OGG
Edge/IE	YES	YES*	YES*
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

HTML Audio – Media Types

File Format	Media Type
MP3	audio/mpeg
OGG	audio/ogg
WAV	audio/wav

HTML Audio – Methods, Properties, and Events

The HTML DOM defines strategies, properties, and occasions for the <audio> element.

This allows you to load, play, and pause audios, just as set term and volume.

There are likewise DOM occasions that can inform you when an audio starts to play, is paused, and so forth

HTML_Audio Tags

Tag	Description
<audio>	Defines sound content
<source>	Defines multiple media resources for media elements, such as <video> and <audio>

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.