The HTML <audio> element embeds sound content—such as MP3, WAV, or OGG audio files—directly into web pages with interactive sound controls.
Like video, the <audio> tag uses nested <source> tags to supply compatible audio formats to different browsers:
<audio controls preload="auto">
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
Supported audio format types:
audio/mpeg): The universal standard audio format supported across all browsers and devices.audio/wav): Uncompressed lossless audio format delivering high quality at larger file sizes.audio/ogg): Open-source compressed audio format supported by Firefox, Chrome, and Opera.Key attributes:
controls: Displays native play, pause, volume, and playback seeker UI.autoplay: Plays audio automatically upon loading (blocked by default in modern browsers).loop: Repeats audio playback infinitely.flowchart TD
A["<audio controls> Tag"] --> B["User Clicks Play Button"]
B --> C["Browser Decodes MP3 / OGG Audio Stream"]
C --> D["Audio Output Sent to Headphones / Speakers"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Audio Demonstration</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h2>Podcast Episode Player</h2>
<div style="background-color: #1e293b; padding: 1.5rem; border-radius: 8px; max-width: 450px;">
<h3>Episode 12: Building Clean HTML Architecture</h3>
<p style="color: #94a3b8; font-size: 0.9rem;">Duration: 24 mins | Published Aug 2026</p>
<!-- Native accessible audio player -->
<audio controls style="width: 100%; margin-top: 1rem;">
<source src="https://www.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</body>
</html>
controls attribute: Omitting controls hides the audio player visually, leaving users with no way to pause or stop sound.Write an <audio> player tag containing controls, loop, and an MP3 file source pointing to music.mp3!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.
You've completed this section! Take a quick 5-question quiz to check your understanding.