Basic <audio controls>
The <audio> element is the browser's built-in audio player. In its
simplest useful form it has two things: a controls attribute and at least
one <source> child (or a src attribute directly on the
element). Adding controls tells the browser to render its native playback
interface — a play/pause button, a time scrubber, a volume control, and sometimes a
download button, depending on the browser.
Without controls, the element is invisible on the page. That is sometimes
deliberate — when you want to control playback entirely through JavaScript — but for
most educational and general-purpose use cases, controls is the right
default. It requires zero JavaScript and is fully accessible via keyboard and screen
reader.
The text "Your browser does not support the audio element." is fallback content. The
browser only shows it if it does not understand the <audio> element
at all. In practice, every modern browser has supported <audio>
since 2012, so this text is rarely seen — but it is good practice to include it
anyway, and it could contain a direct download link as a more useful fallback.
Attributes
<audio> supports a small set of boolean and enumerated attributes
that control its initial behavior. Understanding what each one does — and what it
does not do — prevents common mistakes.
controls
Renders the browser's native playback UI. This is a boolean attribute: its presence enables it, its absence disables it. There is no value to set.
autoplay
Instructs the browser to begin playback as soon as enough data is buffered, without waiting for user interaction. In theory this sounds useful; in practice browsers block it for audio. Modern browsers — Chrome, Firefox, Safari — all enforce an autoplay policy that prevents media with sound from playing until the user has interacted with the page (clicked, tapped, or typed something). The policy exists to protect users from unexpected noise on page load.
The exception is autoplay muted. A muted media element
has no audible output, so browsers allow it to autoplay freely. This combination is
common for decorative background video (covered in the video element tutorial), but
it is rarely appropriate for <audio> — muted audio is silent audio,
which is pointless unless you intend to unmute it programmatically in response to a
user gesture.
loop
Causes playback to restart from the beginning when it reaches the end. Useful for
ambient background sounds, short sound effects, or music loops. There is no built-in
"loop N times" option — looping is either on or off. If you need finite repetitions,
listen for the ended event in JavaScript and call play()
the desired number of times.
preload
Hints to the browser how much of the media data it should fetch before the user presses play. This is a hint, not a command — the browser is free to ignore it, especially on mobile where bandwidth is constrained.
| Value | Meaning | When to use |
|---|---|---|
none |
Download nothing until the user initiates playback | Audio below the fold; pages with many audio elements; metered connections |
metadata |
Download only the metadata (duration, sample rate, codec info) — not the audio frames | Good default: shows the duration in the controls without wasting bandwidth on the actual audio |
auto |
Download the entire file speculatively, even before the user presses play | Above-the-fold audio the user is very likely to play; short clips where prefetching improves perceived responsiveness |
metadata is a sensible default for most situations. It lets the native
controls display the duration without incurring the full download cost for every
visitor, many of whom may never press play.
Attribute summary: all together
The following example combines several attributes. The comments explain the intent of each one.
Multiple sources and fallback
Audio codec support is not uniform across browsers. MP3 (MPEG Layer 3, delivered as
audio/mpeg) has the broadest historical support. Ogg Vorbis
(audio/ogg) was pushed by Firefox as an open-source alternative. Opus
(audio/ogg; codecs=opus) is a modern, royalty-free codec with excellent
compression at low bitrates. AAC (audio/mp4) is common in Safari.
Rather than encoding one format and hoping for the best, you list multiple
<source> elements inside <audio>. The browser
inspects each type attribute in order, skipping any format it cannot
decode, and uses the first match. The type attribute is technically
optional — the browser can sniff the MIME type from the server response — but
including it is strongly recommended because it lets the browser skip formats it
cannot play before fetching the file, saving an unnecessary network request.
The fallback text
Any content inside <audio> that is not a <source>
or <track> element is treated as fallback content. It is only
rendered if the browser does not recognize the <audio> element at
all. A more helpful fallback than plain text is a direct download link:
For a full breakdown of which codec to choose for which use case — including modern options like Opus and AAC-LC — see Tutorial 04: Formats and Codecs.