HTML Audio
In this page:
Embedding Audio Natively
To embed an audio file, you use the audio tag. Inside this container, you place source elements pointing to your audio file paths, which allows the browser to select and play the first compatible format it finds.
Note: Offer both MP3 and OGG formats to ensure your audio files play smoothly on all devices.
Warning: Always write fallback text inside your audio tag to assist users on ancient, unsupported devices.
Example: Embedding Audio Natively
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>Playback Controls (controls)
By default, browsers hide audio players completely unless you include the controls attribute. The controls attribute tells the browser to display standard system buttons for playing, pausing, adjusting volume, and skipping tracks.
Note: Always include the controls attribute so your users have full control over the audio playback.
Warning: Failing to add the controls attribute will make your audio player completely invisible and unclickable on the page.
Example: Playback Controls (controls)
<audio src="song.mp3" controls></audio>Muting and Auto-playing Audio
Modern browsers block audio files from auto-playing with sound enabled to protect user experience. To make an audio file start playing automatically on page load, you must include both the autoplay and muted attributes.
Note: Use JavaScript to trigger sound effects in response to user clicks (like clicking a submit button) instead of auto-playing on load.
Warning: Attempting to auto-play audio files with sound enabled will be blocked by the browser.
Example: Muting and Auto-playing Audio
<audio src="song.mp3" autoplay muted></audio>Optimizing with preload
The preload attribute tells the browser how much of the audio file to download in the background when the page loads. You can set this attribute to none (to save bandwidth), metadata (to download file duration and specs), or auto (to download the entire file).
Note: Use preload="none" on pages with multiple audio players to keep your site loading quickly.
Warning: Overusing preload="auto" can waste substantial server bandwidth and slow down page loads for mobile users.
Example: Optimizing with preload
<audio src="song.mp3" controls preload="none"></audio>Selecting the Best Formats
Web performance relies heavily on selecting the correct audio format. Use MP3 for maximum compatibility, OGG for high performance open-source compression, or WAV when you need high-fidelity, uncompressed audio.
Note: Provide both MP3 and OGG formats to ensure your audio files play smoothly on all devices.
Warning: WAV files are uncompressed and can be very large; avoid using them for long audio tracks to keep page speeds fast.
Example: Selecting the Best Formats
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
</audio>Track Element for Audio Captions
Just like video, the audio element supports the track element for adding captions or subtitles, which is especially valuable for podcasts, interviews, or any spoken content. Captions let users follow along in noisy environments or when they cannot use sound at all.
Note: Always provide at least an English caption track for any spoken audio content to make it usable without sound.
Warning: Not all browsers display audio captions with the same built-in interface as video captions — always test the actual behavior in your target browsers.
Example: Track Element for Audio Captions
<audio controls>
<source src="podcast.mp3" type="audio/mpeg">
<track src="captions.vtt" kind="captions" srclang="en" default>
</audio>Building an Accessible Audio Player
An accessible audio player always includes visible native controls, a text alternative like a transcript link nearby, and never autoplays with sound, which can be jarring or even disorienting for some users, including people using screen readers.
Note: Link to a full text transcript next to every audio element so users who cannot or prefer not to listen still get the content.
Warning: Autoplaying audio with sound the moment a page loads is one of the most reported accessibility and usability complaints on the web.
Example: Building an Accessible Audio Player
<audio src="podcast.mp3" controls></audio>
<a href="transcript.html">Read the full transcript</a>- Forgetting to include the controls attribute, leaving your audio player completely invisible on the page.
- Attempting to auto-play audio files with sound enabled, which modern browsers will block.
- Using large, uncompressed WAV files for long tracks, which slows down your site's load speed.
- The audio tag embeds a native, mobile-friendly media player directly inside your webpage.
- Always include controls for user convenience, and provide both MP3 and OGG formats to ensure maximum browser support.
- Use the preload attribute to optimize background loading speeds and save server bandwidth.
HTML5 audio elements and core file formats are supported natively by all modern web browsers.
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: