Path // www.yourhtmlsource.com → Reference → <AUDIO> ELEMENT

<audio> element

The <audio> element embeds sound content in documents. It can contain one or more audio sources using the src attribute or nested <source> elements, allowing browsers to choose the most suitable format. The element provides built-in playback controls and a JavaScript API for custom player interfaces.

Page Navigation:
Syntax | Attributes | Examples | When to Use | Related Elements

This page was last updated on 2025-11-17

Syntax

The <audio> element can include fallback content between its opening and closing tags:

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

Key Attributes

src — The URL of the audio file. Can be omitted if using <source> elements inside.
controls — Boolean attribute. Displays the browser’s default audio controls (play/pause, volume, seek bar, time display).
autoplay — Boolean attribute. Audio begins playing automatically. Most browsers block this unless muted is also set.
muted — Boolean attribute. Starts the audio muted. Required for autoplay to work in most browsers.
loop — Boolean attribute. Audio restarts automatically when it reaches the end.
preload — Hints how much of the audio to preload. Values: none (don’t preload), metadata (preload only metadata), or auto (browser decides, default).
crossorigin — Configures CORS requests for the audio. Values: anonymous or use-credentials.

Examples

Basic Audio with Controls

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

The controls attribute displays the browser’s native audio player interface.

Multiple Sources for Browser Compatibility

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

The browser uses the first source it can play. Including multiple formats ensures wider compatibility.

Background Music (Muted Autoplay)

<audio src="ambient.mp3" autoplay muted loop>
Your browser does not support the audio element.
</audio>

Muted autoplay is allowed by browsers, but consider user experience before using auto-playing audio.

When to Use

Accessibility Considerations:

Always provide captions or transcripts for audio content with spoken words
Include the controls attribute so users can pause, adjust volume, and seek
Avoid autoplay, as it can be disruptive to users with screen readers or cognitive disabilities
Provide alternative ways to access the content (download links, text transcripts)
Ensure sufficient color contrast if creating custom controls

Best Practices:

Provide multiple audio formats (MP3 and OGG) for maximum browser compatibility
Use preload="none" or preload="metadata" to save bandwidth if audio is optional
Include fallback content for browsers that don’t support the audio element
Consider providing download links for users who prefer to download audio
For podcasts or long-form content, consider adding chapter markers via JavaScript

Common Audio Formats: