← Lesson
BitWithBite
HTML · Quick Reference

Lesson 26 — HTML Audio Cheat Sheet

HTML
In one line: At its most basic, <audio> needs just two things: a source and the controls attribute. Without controls, the audio plays in complete silence with no UI — almost never what...

Key Ideas

1The audio Element. At its most basic, <audio> needs just two things: a source and the controls attribute. Without controls, the audio plays in complete silence with no UI — almost ...
2Audio Formats & Browser Support. Every browser supports MP3 — it's safe to use as your only format. Add OGG as a secondary source for completeness. AAC (used in .m4a files) is also universally support...
3Attributes Reference controlsbooleanShows the browser's default playback UI (play/pause, seek bar, volume) autoplaybooleanStarts playing immediately on page load. Most browsers block this unless muted is also set mutedbooleanStarts muted. Required to allow autoplay in most browsers loopbooleanRestarts from the beginning when playback ends preload"none" | "metadata" | "auto"Hint to browser: don't preload / only load metadata / load whole file srcURL stringPath to the audio file. Omit when using <source> children instead HTMLBackground ambient audio (autoplay + muted + loop)Copy <!-- Autoplay only works reliably when muted --> <audio autoplay muted loop preload="auto"> <source src="ambient.mp3" type="audio/mpeg"> </audio> <!-- Podcast — metadata only, no buffering until play --> <audio controls preload="metadata"> <source src="episode-42.mp3" type="audio/mpeg"> </audio> ⚠️Autoplay policyChrome, Firefox, and Safari all block autoplay with audio unless the page has received a user gesture first. The exception: autoplay muted is allowed everywhere. Never autoplay audio with sound — it's an accessibility violation and will be blocked anyway. Use autoplay muted only for ambient/background tracks where starting muted is intentional. Section 4 Accessibility — Transcripts. Audio content must be accessible to deaf users and anyone who can't play audio (library, noisy environment). The requirement: provide a text transcript. Unlike video c...

Code Examples

<!-- Simplest form — single format --> <audio src="podcast.mp3" controls></audio> <!-- Better — multiple formats for browser compatibility --> <audio controls> <source src="podcast.ogg" type="audio/ogg"> <so...
<!-- Autoplay only works reliably when muted --> <audio autoplay muted loop preload="auto"> <source src="ambient.mp3" type="audio/mpeg"> </audio> <!-- Podcast — metadata only, no buffering until play --> <audio cont...
<figure> <figcaption>Episode 42: CSS Grid Deep Dive (28 min)</figcaption> <audio controls preload="metadata"> <source src="ep42.ogg" type="audio/ogg"> <source src="ep42.mp3" type="audio/mpeg"> </audi...