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-

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:

BrowserMP3WAVOGG
Edge/IEYESYES*YES*
ChromeYESYESYES
FirefoxYESYESYES
SafariYESYESNO
OperaYESYESYES

HTML Audio – Media Types

File FormatMedia Type
MP3audio/mpeg
OGGaudio/ogg
WAVaudio/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

TagDescription
<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.


0 Comments

Leave a Reply

Avatar placeholder