What does the <audio> element do?
The <audio> element is used to play sound on a web page: music, podcasts, effects, voiceover recordings, and so on.
It works similarly to <video>, but without a video stream: the browser creates an audio player with "play / pause" buttons, volume, and a timer.
1. Simplest example
<audio src="music.mp3" controls></audio>What's here:
src="music.mp3": the path to the audio file;controls: displays the standard control panel (play, pause, volume).
Result: the browser embeds an audio player, and the user can listen to the sound right on the page.
2. The recommended approach: via <source>
To support different formats (MP3, OGG, WAV), you can specify several <source> tags: the browser will pick the right one:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<p>Your browser does not support the audio element.</p>
</audio>If the browser does not support any of the formats, it shows the text from <p>.
3. Main attributes of <audio>
| Attribute | Purpose | Example |
|---|---|---|
src | Path to the audio file (if <source> is not used) | src="sound.mp3" |
controls | Shows the control panel | controls |
autoplay | Starts the audio automatically when the page loads (usually requires muted) | autoplay |
loop | Repeats playback in a loop | loop |
muted | Mutes the sound by default | muted |
preload | Controls preloading (none, metadata, auto) | preload="metadata" |
4. How preload works
| Value | Behavior |
|---|---|
none | The audio does not load until the user clicks play |
metadata | Only information (duration, title, tags) is loaded |
auto | The audio may load fully in advance |
Example:
<audio src="podcast.mp3" preload="metadata" controls></audio>5. Example with several attributes
<audio controls autoplay loop muted preload="auto">
<source src="track.mp3" type="audio/mpeg">
<source src="track.ogg" type="audio/ogg">
Your browser does not support audio playback.
</audio>Behavior:
- starts playing automatically,
- without sound (otherwise browsers block autoplay),
- loops continuously,
- loads in advance.
6. Supported formats
| Format | MIME type | Support |
|---|---|---|
.mp3 | audio/mpeg | All browsers |
.ogg | audio/ogg | Firefox, Chrome, Opera |
.wav | audio/wav | All modern browsers (large size) |
Summary:
| Element | <audio> |
|---|---|
| Purpose | Play sound right in the browser |
| Source | Via src or several <source> tags |
| Main attributes | controls, autoplay, loop, muted, preload |
| Advantages | No plugins, works natively in all browsers |
| Supported formats | MP3, OGG, WAV |
In simple terms:
<audio> is a built-in player for sound.
You specify the file via src or <source>,
and the browser provides the playback buttons on its own:
no plugins, no external services.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.