<audio> focuses on sound without intrinsic visuals—podcasts, music snippets, UI sounds.
<audio controls preload="metadata">
<source src="/episode.opus" type="audio/ogg; codecs=opus">
<source src="/episode.mp3" type="audio/mpeg">
<p><a href="/episode.mp3">Download audio</a></p>
</audio>Controls
- Native controls offer baseline accessibility—custom skins must rebuild keyboard support.
- Expose transcripts adjacent or linked for long-form speech.
Autoplay etiquette
Autoplaying audio annoys users and fails many browsers unless muted—avoid surprise sound.
Background audio
Looping ambience belongs behind explicit user consent and pause controls.
Podcast-scale experiences
Long audio needs transcripts, chapters, skip controls, variable speed—not just <audio controls> dropped on a landing page.
Live demo — sample clip (CC0 from MDN)
Important interview questions and answers
- Q: Why should video/audio include fallbacks and tracks?
A: Codec support differs by browser and captions/transcripts are essential for accessibility and compliance. - Q: When is inline SVG better than bitmap icons?
A: For scalable, styleable, lightweight icons that inherit CSS and remain sharp across densities. - Q: What is a common embed risk with third-party iframes?
A: Privacy/performance overhead and policy issues; lazy-load and apply consent/security constraints where needed.
Tip: Provide controls and transcripts for podcast-style content.