BitWithBite
HTML Worksheet
🌐 HTML Audio
SCORE___ / 20
NameClassDate
After this worksheet you can
Embed audio with controlsMultiple sources for compatautoplay/loop/mutedFallback text📚 Quick Recap
The <audio> element lets you embed sound files directly in a page — no plugins, no Flash. You control playback, offer multiple formats for browser compatibility, and make it accessible by providing a text transcript. This lesson covers everything from the simplest one-liner to the full multi-source accessible pattern.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Play sound with:
2Show play/pause UI via:
3Multiple formats are offered with:
4Autoplay with sound is:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5<audio > shows the player UI.
6 restarts the track when it ends.
7Embed song.mp3 with controls.
8Offer mp3 + ogg fallback.
9Why do browsers block audible autoplay?
🚀 Section C · Challenge ● CHALLENGE 5
10What is preload="none" for?
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-A 2-A 3-A 4-A | 5 controls 6 loop 7 = <audio controls src="song.mp3"></audio> 8 = <audio controls><source src="a.mp3" type="audio/mpeg"><source src="a.ogg" type="audio/ogg"></audio> 9 = User experience - unexpected sound is intrusive | 10 = Saves bandwidth - loads audio only when played