Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
The <audio> element allows you to embed sound files directly in your HTML without requiring Flash plugins. It provides built-in controls for playing, pausing, and adjusting volume.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio><audio> - Main container<source> - Audio file pathUse multiple <source> elements with different formats for better browser compatibility:
<source src="audio.mp4" type="audio/mp4">
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">Shows playback controls (play, pause, volume slider)
<audio controls>Starts playing automatically (often requires muted)
<audio autoplay muted>Repeats playback when audio ends
<audio loop>Silences audio by default
<audio muted>Loads audio before playing: none, metadata, auto
<audio preload="metadata">Control via JavaScript: audio.volume = 0.5
// 0.0 to 1.0 (muted to full)Most compatible format. Good compression.
type="audio/mpeg"✅ All browsers
Uncompressed, high quality audio.
type="audio/wav"⚠️ Large file size
Open format with good compression.
type="audio/ogg"⚠️ Limited IE support
Various audio configurations and playback options
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Audio Element Examples</title>
</head>
<body>
<h2>🎵 Audio Element Examples</h2>
<div class="audio-container">
<h3>1. Basic Audio Player</h3>
<audio controls class="audio-player">
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p class="info">✅ Click play to listen to sample audio</p>
</div>
<div class="audio-container">
<h3>2. Multiple Format Support (Fallback)</h3>
<audio controls class="audio-player">
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3" type="audio/mpeg">
<source src="https://upload.wikimedia.org/wikipedia/commons/b/b7/Example.ogg" type="audio/ogg">
Your browser does not support audio playback.
</audio>
<p class="info">🔄 Browser uses first supported format - MP3 or OGG</p>
</div>
<div class="audio-container">
<h3>3. Autoplay & Loop</h3>
<audio controls autoplay loop class="audio-player">
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3" type="audio/mpeg">
</audio>
<p class="info">⚠️ Autoplay may require user interaction in some browsers</p>
</div>
<div class="audio-container">
<h3>4. Preload Strategy Comparison</h3>
<div>
<p class="label">preload="metadata" - Load duration only</p>
<audio controls preload="metadata" class="audio-player">
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3" type="audio/mpeg">
</audio>
<p style="font-size: 0.85rem; color: #6b7280; margin-top: 0.5rem;">Faster initial load - only metadata cached, audio loads on play</p>
</div>
<div style="margin-top: 1.5rem;">
<p class="label">preload="auto" - Load entire file</p>
<audio controls preload="auto" class="audio-player">
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-5.mp3" type="audio/mpeg">
</audio>
<p style="font-size: 0.85rem; color: #6b7280; margin-top: 0.5rem;">Downloads entire audio in background for instant playback</p>
</div>
</div>
<div class="audio-container">
<h3>5. No Controls (Background Audio)</h3>
<p class="label" style="margin-bottom: 1rem;">🔇 Audio plays without user controls</p>
<audio autoplay muted class="audio-player">
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
</audio>
<p class="info">Muted by default - use for background music or notifications</p>
</div>
</body>
</html>Loading preview...
Create your own audio player and experiment with different attributes!