The HTML5 audio element makes it easy to embed audio content directly into your web pages without requiring plugins. You can add music, podcasts, sound effects, or any audio content with simple, native HTML.
The Audio Element
The <audio> element embeds sound content in documents. It can contain one or more audio sources using the src attribute or <source> elements.
Basic Audio
<audio src="song.mp3" controls>
Your browser does not support the audio element.
</audio>The text between the opening and closing tags is fallback content, displayed only if the browser doesn't support the audio element.
The Controls Attribute
The controls attribute displays the browser's default audio controls (play, pause, volume, progress bar):
<!-- With controls - users can play/pause/adjust volume -->
<audio src="podcast.mp3" controls>
Your browser does not support the audio element.
</audio>
<!-- Without controls - no visible interface (can be controlled with JavaScript) -->
<audio src="background-music.mp3">
Your browser does not support the audio element.
</audio>⚠️ Important:
Without the controls attribute, users have no way to play or control the audio (unless you provide custom JavaScript controls). Always include controls for user-initiated audio!
Audio Attributes
autoplay
The autoplay attribute makes the audio start playing automatically when the page loads:
<audio src="intro.mp3" autoplay controls>
Your browser does not support the audio element.
</audio>❌ Warning:
Most modern browsers block autoplay audio unless the audio is muted or the user has interacted with the page first. Autoplay is generally considered poor user experience and should be avoided.
loop
The loop attribute makes the audio repeat continuously:
<audio src="ambient-sound.mp3" loop controls>
Your browser does not support the audio element.
</audio>muted
The muted attribute starts the audio with sound turned off:
<audio src="background.mp3" muted controls>
Your browser does not support the audio element.
</audio>preload
The preload attribute suggests how the browser should load the audio:
<!-- Don't preload (best for saving bandwidth) -->
<audio src="song.mp3" preload="none" controls></audio>
<!-- Preload metadata only (duration, dimensions) -->
<audio src="song.mp3" preload="metadata" controls></audio>
<!-- Preload entire file (default if controls present) -->
<audio src="song.mp3" preload="auto" controls></audio>Combining Attributes
<audio src="podcast.mp3"
controls
preload="metadata"
loop>
Your browser does not support the audio element.
</audio>Audio Formats
Different browsers support different audio formats. The main formats used on the web are:
| Format | MIME Type | Browser Support | Best For |
|---|---|---|---|
| MP3 | audio/mpeg | All browsers | Music, podcasts |
| OGG | audio/ogg | Most modern | Open-source projects |
| WAV | audio/wav | All browsers | High quality, large files |
| AAC | audio/aac | Most modern | High quality, smaller files |
Multiple Audio Sources
Provide multiple formats to ensure compatibility across all browsers:
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
<source src="song.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>The browser will try each source in order and use the first one it can play.
Practical Examples
Podcast Player
<article>
<h2>Episode 42: Web Development Trends</h2>
<p>Published: January 15, 2024</p>
<audio controls preload="metadata">
<source src="podcast-ep42.mp3" type="audio/mpeg">
<source src="podcast-ep42.ogg" type="audio/ogg">
Your browser does not support the audio element.
<a href="podcast-ep42.mp3">Download episode</a>
</audio>
<p>In this episode, we discuss...</p>
</article>Music Player with Figure
<figure>
<figcaption>Listen to "Sunset Dreams"</figcaption>
<audio controls>
<source src="sunset-dreams.mp3" type="audio/mpeg">
<source src="sunset-dreams.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<p>Artist: Jane Smith | Album: Summer Vibes | Duration: 3:45</p>
</figure>Sound Effects Gallery
<section class="sound-effects">
<h2>Free Sound Effects</h2>
<div class="sound-item">
<h3>Button Click</h3>
<audio controls preload="none">
<source src="button-click.mp3" type="audio/mpeg">
</audio>
</div>
<div class="sound-item">
<h3>Notification</h3>
<audio controls preload="none">
<source src="notification.mp3" type="audio/mpeg">
</audio>
</div>
<div class="sound-item">
<h3>Success Chime</h3>
<audio controls preload="none">
<source src="success.mp3" type="audio/mpeg">
</audio>
</div>
</section>Audio with Transcript
<article>
<h2>Interview with Tech Leader</h2>
<audio controls>
<source src="interview.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<details>
<summary>View Transcript</summary>
<div class="transcript">
<p><strong>Interviewer:</strong> Welcome to the show...</p>
<p><strong>Guest:</strong> Thank you for having me...</p>
</div>
</details>
</article>Styling Audio Elements
While you can't directly style the native audio controls, you can style the container:
audio {
width: 100%;
max-width: 600px;
margin: 1rem 0;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Style the container */
.audio-player {
background: #f5f5f5;
padding: 1.5rem;
border-radius: 12px;
margin: 2rem 0;
}
.audio-player audio {
width: 100%;
}<div class="audio-player">
<h3>Now Playing: Summer Jazz</h3>
<audio controls>
<source src="summer-jazz.mp3" type="audio/mpeg">
</audio>
<p class="audio-info">Artist: Jazz Ensemble | Duration: 4:23</p>
</div>Accessibility Considerations
♿ Accessibility Best Practices:
- Always include the controls attribute
- Provide text alternatives or transcripts
- Don't rely solely on audio to convey information
- Use descriptive text around the audio element
- Provide download links as fallback
- Include captions or transcripts for spoken content
- Avoid autoplay (respects user preferences)
Accessible Audio Player
<section aria-label="Podcast episode">
<h2>Episode 5: Web Accessibility</h2>
<audio controls aria-label="Podcast audio player">
<source src="episode-5.mp3" type="audio/mpeg">
<p>
Your browser does not support the audio element.
<a href="episode-5.mp3">Download the episode</a>
</p>
</audio>
<details>
<summary>Read Transcript</summary>
<div class="transcript">
<!-- Full transcript here -->
</div>
</details>
</section>JavaScript Control (Preview)
While we haven't covered JavaScript yet, here's a preview of how you can control audio programmatically:
// Get audio element
const audio = document.querySelector('audio');
// Play audio
audio.play();
// Pause audio
audio.pause();
// Set volume (0.0 to 1.0)
audio.volume = 0.5;
// Jump to specific time (in seconds)
audio.currentTime = 30;
// Check if audio is playing
console.log(audio.paused); // true or falseBest Practices
✅ Do:
- Always include the controls attribute
- Provide multiple audio formats for compatibility
- Use preload="none" for better performance on pages with multiple audio files
- Include meaningful fallback content
- Provide transcripts for accessibility
- Compress audio files to reduce file size
- Test audio playback across different browsers
❌ Don't:
- Use autoplay (poor user experience and often blocked)
- Forget to include controls (users need control)
- Use only one audio format (compatibility issues)
- Upload uncompressed, huge audio files
- Rely on audio alone to convey important information
- Forget to test on mobile devices
Common Issues and Solutions
Audio Not Playing
- Check that the file path is correct
- Verify the audio format is supported
- Ensure file permissions allow access
- Check browser console for errors
- Try providing multiple formats
Autoplay Blocked
Modern browsers block autoplay to prevent annoying user experiences. Solutions:
- Remove autoplay and let users control playback
- Use muted autoplay (less intrusive)
- Wait for user interaction before playing
Key Takeaways
- The
<audio>element embeds sound content - Use the
controlsattribute to display playback controls - Provide multiple formats using
<source>elements - MP3 is the most widely supported audio format
- Avoid autoplay—let users control when audio plays
- Use
preloadattribute to optimize loading - Always provide fallback content for accessibility
- Include transcripts for spoken content
What's Next?
Now that you know how to add audio to your web pages, you're ready to learn about video elements. In the next lesson, we'll explore the HTML5 video element, which works similarly to audio but with additional considerations for visual content.