**`<audio>`** works almost identically to `<video>`, minus the visual frame — it plays sound with the **`controls`** attribute showing native play/pause/volume/seek UI. Multiple `<source>` children let the browser choose a format it supports (MP3 has near-universal support today, making a single source often sufficient, though OGG/WAV are still used as fallbacks in some cases). It supports the same **`autoplay`**, **`loop`**, and **`muted`** attributes as `<video>`, with the same autoplay-requires-muted restriction.
1Understanding <audio>
`<audio>` works almost identically to <video>, minus the visual frame — it plays sound with the `controls` attribute showing native play/pause/volume/seek UI. Multiple <source> children let the browser choose a format it supports (MP3 has near-universal support today, making a single source often sufficient, though OGG/WAV are still used as fallbacks in some cases). It supports the same `autoplay`, `loop`, and `muted` attributes as <video>, with the same autoplay-requires-muted restriction.
MP3 support is now nearly universal across browsers, so many modern sites only provide a single MP3 <source> rather than juggling multiple formats — check your actual target browser support before assuming you need fallbacks.
<audio controls>
<source src="/podcast-episode-1.mp3" type="audio/mpeg">
Your browser doesn't support the audio element.
</audio>2Practical Example
Here is a real-world application of <audio> showing how it is used in production HTML.
<!-- Looping ambient background sound, muted by default -->
<audio autoplay loop muted id="ambience">
<source src="/rain.mp3" type="audio/mpeg">
</audio>
<button onclick="document.getElementById('ambience').muted = false">Enable sound</button>3Best Practices
Follow these guidelines when working with <audio>:
1. Include controls so users have a visible way to play/pause/adjust volume
2. Provide fallback text content for browsers that don't support the element at all
3. Use loop for short sound effects or ambient audio that should repeat
Tip: MP3 support is now nearly universal across browsers, so many modern sites only provide a single MP3 <source> rather than juggling multiple formats — check your actual target browser support before assuming you need fallbacks.
<audio controls>
<source src="/podcast-episode-1.mp3" type="audio/mpeg">
Your browser doesn't support the audio element.
</audio>