Adding Audio to HTML5 Webpages with the `

Learn how to embed audio files into your HTML5 websites using the `



Adding Audio to HTML with the `

The HTML <audio> element allows you to embed audio files directly into your web pages, enriching the user experience.

Basic Audio Playback

To play an audio file, use the <audio> element. The src attribute specifies the audio file's URL, and the text between the opening and closing tags provides fallback content for browsers that don't support the <audio> element.

Example: Basic Audio Playback

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

The controls attribute adds standard audio player controls (play, pause, volume).

Autoplay

The autoplay attribute starts audio playback automatically. Note that many modern browsers restrict autoplay due to user experience considerations. Autoplay generally works best when the audio is muted initially (using the muted attribute).

Example: Autoplay (Muted)

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

Browser Support

Browser Version
Edge/IE 79+
Chrome 9.0+
Firefox 3.5+
Safari 4.0+
Opera 10.5+

Supported Audio Formats

Commonly supported audio formats include MP3, WAV, and OGG. Browser support for each format can vary (check browser specifications for full compatibility).

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

HTML Audio DOM

The HTML DOM (Document Object Model) provides methods, properties, and events for controlling audio playback (play, pause, volume, duration, etc.). See the HTML Audio/Video DOM Reference for details.

Summary Table

Tag Description
<audio> Embeds audio content.
<source> Specifies multiple audio sources for browser compatibility.