References

Beginner-friendly references for web development, with live, editable examples.

The HTML <audio> tag

Element All modern browsers Updated
Quick answer

The HTML <audio> element embeds playable sound. Add controls for the native player, and set the file with src or multiple <source> elements for format fallbacks.

Overview

The <audio> element plays sound natively — music, podcasts, sound effects, voice notes. As with <video>, you supply the file with a src attribute or several nested <source> elements, and add controls for the built-in player.

Auto-playing audio is both intrusive and an accessibility problem — it can clash with screen readers and startle users — so browsers block it unless the audio is muted, which rather defeats the purpose. The safe default is to let the user start playback themselves.

For spoken-word content, provide a text transcript near the player so the information is available to everyone, including deaf users and people who simply prefer to read. A transcript also makes the content searchable and indexable.

Syntax

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
</audio>

Attributes

The <audio> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
autoplay A boolean attribute — present or absent. Starts media playback automatically.
controls A boolean attribute — present or absent. Shows native media playback controls.
crossorigin anonymous (default when present) use-credentials Sets the CORS mode for fetching the resource.
loop A boolean attribute — present or absent. Replays media from the start when it ends.
muted A boolean attribute — present or absent. Mutes the media by default.
preload none metadata auto (default) Hints how much media to preload.
src A URL pointing to the resource. Specifies the URL of an embedded resource.

Example

Live example 
<audio controls style="width:100%;"></audio>

Best practices

  • Add the controls attribute so users can start, pause and seek the audio.
  • Offer multiple formats with nested <source> elements for broad support.
  • Do not autoplay audio — it is intrusive and browsers block it unless muted.
  • Provide a transcript for spoken-word audio so the content is accessible and searchable.

Accessibility

Provide a transcript for speech audio so it is accessible to deaf users and to search engines. Keep playback under user control and avoid auto-play.

Frequently asked questions

How do I embed audio in HTML?
Use an <audio> element with controls and a src or nested <source> elements.
How do I autoplay audio?
Browsers block autoplaying audio with sound. It will only autoplay if muted, so generally let the user start it instead.
How do I make audio content accessible?
Provide a text transcript of spoken-word audio near the player, so the content is available to everyone.
How do I support multiple audio formats?
Nest several <source> elements with different type values; the browser plays the first it supports.
aside b