HTML Audio

The HTML <audio> element allows you to embed sound content — such as music, podcasts, or sound effects — directly into a web page.

Basic Syntax

Use the <audio> tag with a src attribute and the controls attribute to show the play/pause buttons:

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

Note: Without the controls attribute, the audio player is invisible and the user has no way to play it. Always add controls for normal use.

The <audio> Attributes

Attribute	Description
`src`	Path or URL to the audio file
`controls`	Shows built-in play/pause/volume controls
`autoplay`	Starts playing automatically (often blocked by browsers)
`loop`	Repeats the audio indefinitely
`muted`	Starts audio muted
`preload`	Hints how much to preload: `auto`, `metadata`, `none`

Multiple Sources (Format Fallback)

Different browsers support different audio formats. Use <source> tags inside <audio> to provide fallbacks:

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

The browser plays the first format it supports and ignores the rest. The text at the bottom shows only if audio is not supported at all.

Supported Audio Formats

Format	MIME Type	Browser Support
MP3 (.mp3)	`audio/mpeg`	All modern browsers ✓
OGG (.ogg)	`audio/ogg`	Chrome, Firefox, Opera
WAV (.wav)	`audio/wav`	All modern browsers ✓
FLAC (.flac)	`audio/flac`	Chrome, Firefox, Safari
AAC (.aac)	`audio/aac`	Safari, Chrome, Edge
WebM (.webm)	`audio/webm`	Chrome, Firefox, Opera

Best Practice: Use MP3 as your primary format — it works in all modern browsers. Add an OGG version as a secondary fallback for maximum compatibility.

autoplay and muted

Most browsers block autoplay with sound. To autoplay, you must also add muted:

<!-- Autoplays silently (muted required) -->
<audio src="background.mp3" autoplay muted loop></audio>

preload Attribute

Control how much of the audio file is downloaded before the user presses play:

Value	Description
`auto`	Browser downloads the whole file on page load
`metadata`	Downloads only duration, file info — not audio data
`none`	Downloads nothing until user presses play

<audio controls preload="metadata"
       src="podcast.mp3"></audio>

Styling the Audio Player

The default audio player appearance depends on the browser. You can apply basic CSS to size it:

audio {
    width: 100%;
    border-radius: 8px;
}

For a fully custom player design, you would use JavaScript along with the HTMLAudioElement API to control playback.

« Previous Lesson Next Lesson »