How to Add Controls to an Audio in HTML5?

The controls Attribute

controls is a boolean attribute. Simply including it on the <audio> element tells the browser to display its built-in player interface — no value is needed.

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

Combining With Other Attributes

You can pair controls with other attributes such as autoplay, loop, muted, and preload to fine-tune playback behaviour.

<audio controls loop muted preload="metadata">
  <source src="background.mp3" type="audio/mpeg">
</audio>

Without controls

If you omit controls, the audio has no visible interface. You would then control playback programmatically from JavaScript using methods like play() and pause().

const audio = document.querySelector("audio");
audio.play();   // start playback
audio.pause();  // pause playback