HTML audio: give recorded guidance native controls and a transcript

Use it for a real task

An operations page carries a short recorded explanation of the receipt workflow. A text transcript follows the player so the information remains available without sound, when playback fails, or when a user would rather scan than listen. The source path represents an owned media file; it must exist and be served with an appropriate type. The browser chooses what it can play.

<section aria-labelledby="guide-heading">
  <h2 id="guide-heading">Review workflow guide</h2>
  <audio controls preload="metadata">
    <source src="/media/review-guide-47.mp3" type="audio/mpeg">
    Your browser cannot play this recording.
  </audio>
  <details>
    <summary>Read the transcript</summary>
    <p>Verify the receipt ID, review the amount, then record the decision.</p>
  </details>
</section>

What the markup guarantees

The fallback sentence is shown when audio itself is unsupported; a playable file can still fail to load. The transcript must match the final recording, and any spoken instructions that change require the text to change too.

Cost and limits

Media bytes dominate the cost. Preloading metadata usually avoids requesting the full recording immediately, but network behavior still depends on the user agent and server response.

Common Mistakes

• Do not autoplay spoken guidance without a user request.
• Do not publish a player without the referenced asset.
• Do not use a transcript that omits instructions heard in the audio.

Connected lessons

• HTML video tracks: expose controls and a caption file
• HTML details and dialog: distinguish disclosure from a modal task
• HTML figure and figcaption: keep an asset with its explanation

Related: HTML audio transcript: make a recording readable without playback.