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 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