The audio element

Definition

audio embeds recorded sound. With controls, browsers provide platform playback controls and accessibility mappings. Multiple source children let the browser select a supported format.

Minimal syntax

<audio controls preload="metadata">
  <source src="/media/interview.ogg" type="audio/ogg" />
  <source src="/media/interview.mp3" type="audio/mpeg" />
  <p><a href="/media/interview.mp3">Download the interview</a>.</p>
</audio>
<p><a href="/media/interview-transcript">Read the transcript</a>.</p>

Fallback inside the element is for unsupported playback. Keep the transcript link visible outside so modern browsers expose it too.

Loading and formats

preload is a hint. Metadata can provide duration without requesting the entire recording, but browser decisions and caching vary. Declare accurate MIME types and test the deployed response rather than relying on the filename.

Accessibility

Provide a transcript for prerecorded speech and meaningful sounds. Identify speakers, include relevant non-speech audio, and make corrections alongside the recording. Do not autoplay sound because it interferes with screen-reader speech and makes the stop control harder to find.

Decisions and trade-offs

Prefer native controls unless the product requires behavior they cannot provide and the custom alternative is fully tested. Streaming services in an iframe add privacy, performance, focus, and fallback considerations beyond the audio element itself.

Common failures

• A transcript is hidden only inside modern fallback content.
• The server returns an incorrect audio content type.
• A custom player has unlabeled controls or no keyboard seeking.
• Autoplay begins without an immediate, perceivable stop action.
• The full recording downloads before a person chooses to play.

Verification checklist

Use keyboard and screen reader to play, pause, seek, mute, change volume, and leave the player. Compare the transcript with the recording, block and throttle each source, inspect response types and sizes, and confirm the download path. Test focus visibility, 200% zoom, narrow reflow, and the no-JavaScript baseline.

Maintenance note

Review the transcript, source URLs, formats, duration, and fallback whenever the recording changes. A player can remain technically valid while its transcript or declared media facts become stale.

Recheck the experience when the recording is replaced by a longer edit because loading and transcript navigation needs may change.