How to Add Audio to Your Website with the HTML5 Tag? (Tutorial)

HTML5's

The tag in HTML5 makes it simple to embed sound directly into your webpage—no plugins or third-party players needed. Just a few lines of code get playback working across modern browsers.

Basic audio embedding with controls

Start with the minimal working version: include the element, point to your audio file using the src attribute, and add the controls attribute so users can play, pause, and adjust volume.

• Use common formats like MP3 (widely supported) or OGG (better compression, open format)
• Always provide at least one fallback format—browsers don't all support the same codecs
• Example:
  

Using for multiple formats

To maximize compatibility, use nested elements instead of relying on a single src . The browser picks the first supported format.

• List MP3 first for broadest support, then OGG or WAV
• Include a text fallback inside the tag for very old or unsupported browsers
• Example:
  

Controlling behavior with attributes

Add extra functionality using built-in boolean attributes:

• autoplay starts playback automatically (use sparingly—many browsers block it unless user interaction occurs first)
• loop repeats the audio continuously
• muted silences audio by default (often required with autoplay )
• preload="metadata" loads only duration, dimensions, and first frame—good for large files or bandwidth-conscious sites

Styling and accessibility basics

The default audio player is functional but basic. You can style it with CSS—though browser support for custom controls varies. For accessibility:

• Always include a descriptive title or surrounding text explaining what the audio is
• Use aria-label if the control isn't self-explanatory (eg, )
• Consider adding a transcript or summary nearby for users who can't or prefer not to listen

The above is the detailed content of How to Add Audio to Your Website with the HTML5 Tag? (Tutorial). For more information, please follow other related articles on the PHP Chinese website!