Embedding Audio with <audio>

The HTML <audio> element is used to embed sound content in documents. You can add a single audio file directly using the src attribute, and the controls attribute will display standard audio controls like play, pause, and volume for the user. This is the simplest way to get audio playing on your website.

Example 1: Basic Audio Player

<audio src="background-music.mp3" controls>
</audio>

Explanation The src attribute points to the audio file you want to play. The controls attribute is a boolean attribute; its presence is enough to make the browser's default audio controls visible.

Example 2: Adding the autoplay Attribute

<audio src="notification.mp3" controls autoplay>
</audio>

Explanation The autoplay attribute tells the browser to start playing the audio as soon as it can. However, modern browsers often restrict this feature to improve user experience.

Example 3: Looping Audio

<audio src="looping-beat.wav" controls loop>
</audio>

Explanation The loop attribute causes the audio to start over from the beginning every time it finishes. This is useful for background music or repeating sound effects.

Example 4: Muted Audio

<audio src="intro-video-sound.mp3" controls muted>
</audio>

Explanation The muted attribute sets the initial state of the audio to be silent. Users can unmute it using the player controls. Muting is often required for autoplay to work in modern browsers.

Example 5: All Attributes Combined

<audio src="ambient-soundscape.mp3" controls autoplay muted loop>
</audio>

Explanation You can combine boolean attributes to create specific behaviors. This example creates a looping background track that starts automatically but is initially silent to avoid disrupting the user.

Providing Multiple Audio Formats with <source>

Different browsers support different audio formats. To ensure your audio works for the widest possible audience, you can provide multiple audio files using the <source> element inside an <audio> tag. The browser will check each source and play the first one it supports.

Example 1: Basic MP3 and OGG Fallback

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

Explanation The browser reads the <source> elements from top to bottom. It will use the first format it understands (like OGG for Firefox) and ignore the rest, ensuring cross-browser compatibility.

Example 2: Multiple Fallbacks

<audio controls>
  <source src="audio-track.opus" type="audio/opus">
  <source src="audio-track.ogg" type="audio/ogg">
  <source src="audio-track.mp3" type="audio/mpeg">
</audio>

Explanation Here, we offer the modern Opus format first for efficiency. If the browser doesn't support Opus, it will try OGG, and finally fall back to the universally supported MP3 format.

Example 3: Including Fallback Text

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

Explanation Any content placed between the opening and closing <audio> tags (but after any <source> elements) will be displayed as a fallback. This is for very old browsers that don't recognize the audio tag.

Example 4: Using Attributes with <source>

<audio controls loop autoplay muted>
  <source src="background.opus" type="audio/opus">
  <source src="background.mp3" type="audio/mpeg">
</audio>

Explanation Attributes like controls, loop, and autoplay are placed on the parent <audio> element. They apply to whichever <source> the browser ultimately decides to play.

Example 5: Linking to the Audio File as a Final Fallback

<audio controls>
  <source src="interview.ogg" type="audio/ogg">
  <source src="interview.mp3" type="audio/mpeg">
  <p>Your browser doesn't support embedded audio.
     <a href="interview.mp3">Download the interview</a> instead.
  </p>
</audio>

Explanation Providing a direct download link within the fallback content is a great practice. This ensures that even if a user's browser is ancient, they can still access the audio content.