HTML5

How to Add Controls to an Audio in HTML5?

To show the browser's built-in play, pause, and volume controls on an HTML5 <audio> element, add the boolean controls attribute. Without it, the audio element is present but has no visible interface for the user.

Direct Answer

Add the controls attribute to the <audio> tag. It is a boolean attribute — simply including the word controls turns on the browser's default audio player UI. You do not assign it a value.

Runnable Example

Audio with visible browser controls

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Audio Controls Demo</title>
</head>
<body>
  <h2>Play the Audio</h2>
  <audio controls>
    <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>
</body>
</html>

Related Boolean Attributes

Attribute	Effect
controls	Shows play/pause/volume UI
autoplay	Starts playing automatically (often needs muted)
loop	Repeats the audio when it ends
muted	Starts with the sound muted

⚠️

Without controls (and without autoplay), the audio element loads but the user has no way to start it. Always add controls unless you build your own player with JavaScript.

Key Takeaways

The controls attribute displays the browser's audio player UI.
It is a boolean attribute — no value is needed.
Combine with loop, muted, or autoplay as required.
Include fallback text for unsupported browsers.