HTML Audio

The <audio> element plays sound files, such as music, a podcast or a recorded lesson.

The audio Element

Example

html

<audio src="lesson.mp3" controls></audio>

With controls, the browser shows a small player with play, a time bar and volume. Without controls, nothing is visible at all.

Several Sources

Like video, audio can list several files. The browser uses the first format it can play.

Example

html

<!DOCTYPE html>
<html>
<body>

<h2>Episode 1: Starting Freelancing</h2>

<audio controls>
  <source src="episode1.ogg" type="audio/ogg">
  <source src="episode1.mp3" type="audio/mpeg">
  Your browser cannot play this audio.
</audio>

<p>Put your own episode1.mp3 next to this page to hear it.</p>

</body>
</html>

Try it Yourself »

Audio Formats

Format	MIME type	Notes
MP3	`audio/mpeg`	Works in every browser. The safe choice
AAC / M4A	`audio/mp4`	Good quality at small sizes
Ogg Vorbis / Opus	`audio/ogg`	Open formats, small files
WAV	`audio/wav`	No compression, very large files

Watch the MIME type: an MP3 file is audio/mpeg, not audio/mp3.

Audio Attributes

Attribute	What it does
`controls`	Shows the player
`autoplay`	Tries to start at once (usually blocked)
`muted`	Starts with no sound
`loop`	Plays again and again
`preload`	`none`, `metadata` or `auto`

Browsers block audio that starts by itself. Sound should only play after the user clicks something. This is good for visitors too: nobody likes a page that suddenly makes noise in a classroom or office.

Playing a Sound with a Button

You can make your own controls with JavaScript. The audio element has play(), pause(), currentTime and volume.

Example

html

<!DOCTYPE html>
<html>
<body>

<audio id="bell" src="bell.mp3"></audio>

<button onclick="ring()">Ring the bell</button>
<button onclick="stopBell()">Stop</button>
<p id="status">Ready</p>

<script>
const bell = document.getElementById("bell");

function ring() {
  bell.currentTime = 0;   // start from the beginning
  bell.volume = 0.5;      // half volume
  bell.play();
  document.getElementById("status").innerHTML = "Playing...";
}

function stopBell() {
  bell.pause();
  document.getElementById("status").innerHTML = "Stopped";
}
</script>

</body>
</html>

Try it Yourself »

Property or method	Meaning
`play()`	Start playing
`pause()`	Pause
`currentTime`	The position in seconds (read or set)
`duration`	The total length in seconds
`volume`	From 0 (silent) to 1 (full)
`paused`	`true` if not playing

A Simple Playlist

Here three recorded lessons share one player. Each button changes the src and plays:

Example

html

<audio id="player" controls></audio>
<p>
  <button onclick="playLesson('lesson1.mp3')">Lesson 1</button>
  <button onclick="playLesson('lesson2.mp3')">Lesson 2</button>
  <button onclick="playLesson('lesson3.mp3')">Lesson 3</button>
</p>

<script>
function playLesson(file) {
  const player = document.getElementById("player");
  player.src = file;
  player.play();
}
</script>

Give Audio a Text Version

Deaf visitors cannot hear audio. For a podcast or a recorded lesson, add a transcript: the spoken words written as text under the player. A transcript also helps Google understand what the audio is about.

Example

html

<audio controls src="episode1.mp3"></audio>
<details>
  <summary>Read the transcript</summary>
  <p>Welcome to episode one. Today Ali talks about his first freelancing client...</p>
</details>

Exercise

What is the correct type for an MP3 file inside a source tag?

audio/mp3audio/mpegsound/mp3music/mpeg