HTML Audio: Adding Sound with the audio Element

The audio element plays sound without any plugin.

index.html

HTML

<audio controls>
  <source src="interview.mp3" type="audio/mpeg">
  <source src="interview.ogg" type="audio/ogg">
  Your browser does not support audio. <a href="interview.mp3">Download the interview</a>.
</audio>

The parts

controls shows the play button, timeline and volume. Without it the player is invisible.
source lists a file and its type. The browser plays the first one it can.
The text inside is shown only if the browser does not support audio. Offer a download link there.

Useful attributes

Attribute	Purpose
`controls`	Show the player
`loop`	Start again after it ends
`muted`	Start silent
`preload`	`none`, `metadata` or `auto`: how much to download early

Autoplay

Browsers block sound that starts by itself, because it is annoying and surprising. Let people press play.

Formats

MP3 and AAC work almost everywhere. If you provide one file, make it MP3.

lightbulb

Provide a transcript

Not everyone can listen to audio. A written transcript near the player helps deaf visitors, and also helps search engines and people who prefer to read.