Audio

Difficulty: Intermediate

The <audio> element embeds sound content in an HTML document. Before HTML5, embedding audio required third-party plugins like Flash or Java applets. The native <audio> element provides a standardized, accessible way to play audio directly in the browser without any plugins. It supports multiple audio formats and provides built-in playback controls.

The controls attribute is essential -- it displays the browser's default audio player UI with play/pause, progress bar, volume control, and timestamp. Without the controls attribute, the audio element is invisible and the user has no way to interact with it (unless you build custom controls with JavaScript). Always include controls unless you have a specific reason to hide the player and are providing custom UI.

Multiple audio formats should be provided using <source> elements inside the <audio> tag to ensure broad browser compatibility. The most widely supported formats are MP3 (audio/mpeg), which works in all modern browsers; WAV (audio/wav), which is uncompressed and large but universally supported; OGG Vorbis (audio/ogg), which is open-source and supported in Firefox, Chrome, and Edge; and AAC (audio/aac), which is used by Apple devices. The browser evaluates sources from top to bottom and plays the first format it supports.

The autoplay attribute starts playback automatically when the page loads. However, most modern browsers block autoplay for audio with sound to prevent an annoying user experience. Autoplay is generally only allowed when the audio is muted (which is pointless for audio-only content) or after the user has interacted with the page. The preload attribute hints how much data the browser should preload: none (no preloading), metadata (only duration and dimensions), or auto (preload the entire file). Use preload="none" for pages with many audio files to save bandwidth.

Accessibility for audio content requires providing text alternatives. This can include transcripts for podcasts and spoken content, captions for audio that accompanies video, and descriptive text explaining what the audio contains. The <audio> element should also include fallback text between the opening and closing tags for browsers that do not support it, though this is rarely needed with modern browsers.

Code examples

Basic Audio with Controls

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

The controls attribute provides the default browser audio player. Multiple <source> elements provide format fallbacks. The text between the tags is shown in browsers that do not support <audio> (extremely rare today).

Audio with Preload and Loop

<!-- Background music (preload metadata only) -->
<audio controls preload="metadata">
  <source src="/audio/ambient.mp3" type="audio/mpeg">
  <source src="/audio/ambient.ogg" type="audio/ogg">
</audio>

<!-- Looping audio -->
<audio controls loop>
  <source src="/audio/rain-sounds.mp3" type="audio/mpeg">
</audio>

<!-- Muted by default -->
<audio controls muted preload="auto">
  <source src="/audio/preview.mp3" type="audio/mpeg">
</audio>

preload='metadata' loads only the duration and basic info, saving bandwidth. The loop attribute restarts playback when the audio ends. The muted attribute starts the audio muted, which also enables autoplay in most browsers.

Audio with Accessible Transcript

<figure>
  <figcaption>
    <strong>Episode 42: Web Accessibility Fundamentals</strong>
  </figcaption>
  <audio controls preload="metadata">
    <source src="/audio/ep42.mp3" type="audio/mpeg">
    <source src="/audio/ep42.ogg" type="audio/ogg">
    Your browser does not support audio playback.
  </audio>
  <details>
    <summary>View Transcript</summary>
    <p>Host: Welcome to episode 42 where we discuss 
    web accessibility fundamentals...</p>
    <p>Guest: Thanks for having me. Accessibility is 
    not just about compliance...</p>
  </details>
</figure>

Wrapping audio in a <figure> with <figcaption> provides semantic context. The <details>/<summary> pattern provides a collapsible transcript, making the content accessible to deaf and hard-of-hearing users without cluttering the page.

Multiple Audio Tracks on a Page

<section>
  <h2>Sound Effects Library</h2>
  
  <article>
    <h3>Thunder</h3>
    <audio controls preload="none">
      <source src="/sfx/thunder.mp3" type="audio/mpeg">
    </audio>
  </article>
  
  <article>
    <h3>Rain</h3>
    <audio controls preload="none">
      <source src="/sfx/rain.mp3" type="audio/mpeg">
    </audio>
  </article>
  
  <article>
    <h3>Wind</h3>
    <audio controls preload="none">
      <source src="/sfx/wind.mp3" type="audio/mpeg">
    </audio>
  </article>
</section>

When a page has multiple audio players, use preload='none' to prevent the browser from downloading all files simultaneously. This saves significant bandwidth and improves page load time.

Key points

Always include the controls attribute unless you are building a custom player with JavaScript. Without controls, the audio element is invisible.
MP3 (audio/mpeg) has universal browser support and is the safest single-format choice if you can only provide one format.
Avoid autoplay for audio content. Most browsers block it, and auto-playing audio is one of the most annoying web patterns for users.

Concepts covered

audio Element, source Element, controls Attribute, autoplay, Audio Formats, preload