HTML Audio

The <audio> element is used to play an audio file on a web page.

The HTML <audio> Element

To play an audio file in HTML, use the <audio> element, with one or more <source> elements for the audio files.

Example

An audio player with controls and two source formats.

An audio player with the controls attribute and two source files (horse.ogg and horse.mp3), plus fallback text for browsers that do not support the audio element.

> Output: complete HTML page

Prompt

An audio player with the controls attribute and two source files (horse.ogg and horse.mp3), plus fallback text for browsers that do not support the audio element.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Basic</title>
</head>
<body>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

</body>
</html>

HTML Audio - How It Works

The controls attribute adds audio controls like play, pause, and volume. The <source> element lets you offer several audio files; the browser uses the first format it recognizes. The text between <audio> and </audio> shows only in browsers that do not support the element.

HTML <audio> Autoplay

To start an audio file automatically, use the autoplay attribute.

Note: Chromium browsers usually block autoplay, but muted autoplay is always allowed. Add muted after autoplay to let the audio start automatically (but muted).

Autoplay

An audio player that starts automatically.

An audio player with controls that also starts automatically using the autoplay attribute, with ogg and mp3 sources and fallback text.

> Output: complete HTML page

Prompt

An audio player with controls that also starts automatically using the autoplay attribute, with ogg and mp3 sources and fallback text.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Autoplay</title>
</head>
<body>

<audio controls autoplay>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

</body>
</html>

Autoplay muted

An audio player that autoplays muted so it works in Chromium browsers.

An audio player with controls that autoplays muted (autoplay and muted attributes), with ogg and mp3 sources and fallback text, so it can start automatically in Chromium browsers.

> Output: complete HTML page

Prompt

An audio player with controls that autoplays muted (autoplay and muted attributes), with ogg and mp3 sources and fallback text, so it can start automatically in Chromium browsers.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Autoplay Muted</title>
</head>
<body>

<audio controls autoplay muted>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

</body>
</html>

Browser Support

The <audio> element is supported in all modern browsers (from Chrome 4, Edge 9, Firefox 3.5, Safari 4, and Opera 10.5).

HTML Audio Formats

HTML supports three audio formats: MP3, WAV, and OGG. MP3 works in all major browsers; WAV and OGG work in all of them except that OGG is not supported in Safari (and WAV and OGG support in Edge starts from Edge 79).

HTML Audio - Media Types

The media types for the supported formats are: MP3 is audio/mpeg, OGG is audio/ogg, and WAV is audio/wav.

HTML Audio - Methods, Properties, and Events

The HTML DOM defines methods, properties, and events for the <audio> element. These let you load, play, and pause audio, set the duration and volume, and respond to events such as the audio starting or being paused.

HTML Audio Tags

The audio-related tags are: <audio> (defines sound content) and <source> (defines several media resources for <video> and <audio>).