HTML Audio

The HTML <audio> element allows audio playback directly in a web browser without any additional plugins.

Audio Element

The <audio> tag is used to embed sound content on a website page. It supports different audio file types and can include playback controls.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

Structure & Attributes

The <audio> element works with a few key attributes and tags:

controls: displays play, pause, and volume controls.
<source>: defines the audio file and its format.
Text between <audio> and </audio> shows as a fallback if the browser does not support audio.

<audio controls>
  <source src="sound.ogg" type="audio/ogg">
  <source src="sound.mp3" type="audio/mpeg">
  This browser does not support audio playback.
</audio>

Note: Including multiple <source> elements helps ensure compatibility across browsers.

Autoplay Attribute

Adding the autoplay attribute starts the audio automatically when the page loads.

Note: Most browsers require the audio to be muted or user-initiated for autoplay to work properly.

<audio autoplay muted>
  <source src="autoplay-audio.mp3" type="audio/mpeg">
</audio>

Supported Audio Formats

HTML supports several audio formats, with varying browser support:

MP3: Widely supported
OGG: Good quality, open format
WAV: High quality, larger file size

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
</audio>

Browser Compatibility

The <audio> element is supported in all modern browsers:

Chrome
Firefox
Edge
Safari
Opera

Note: Using multiple formats improves cross-browser functionality.

The <audio> tag makes it simple to add sound to web pages. Using standard formats and attributes ensures consistent playback across different browsers.

Watch Video on YouTube

HTML Audio