HTML Audio Controls

HTML audio controls allow visitors to play, pause, adjust the volume, and manage audio playback directly on a website. They are useful for music players, podcasts, voice recordings, online lessons, and other audio content.

HTML provides the controls attribute for displaying the browser’s built-in audio player. You can add it to the <audio> element without writing JavaScript.

What Are HTML Audio Controls?

HTML audio controls are the playback options displayed by a browser when you add the controls attribute to an <audio> element.

Here is a basic example:

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  Your browser does not support HTML audio.
</audio>

The controls attribute displays the audio player, while the <source> element specifies the audio file.

You can learn more about adding sound to a web page in our HTML Audio tutorial.

Common HTML Audio Control Features

The browser’s audio player typically includes several playback features. Their appearance can vary depending on the browser and device.

Control	Purpose
Play	Starts audio playback
Pause	Temporarily stops playback
Timeline	Moves to a different part of the audio
Volume	Adjusts the sound level
Mute	Turns the sound off
Duration	Shows the audio’s playback time

These features help visitors control audio according to their preferences.

Adding Audio Controls to an HTML Page

You can create a complete HTML page with an audio player using the following example:

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

  <h1>My Audio Player</h1>
  <p>Listen to the audio using the controls below.</p>

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

</body>
</html>

Save the file as index.html and place a supported audio file named song.mp3 in the same folder. Open the HTML file in your browser to test the audio player.

What Happens Without the Controls Attribute?

If you remove the controls attribute, the browser does not normally display its standard audio player interface.

<audio>
  <source src="song.mp3" type="audio/mpeg">
</audio>

Visitors may not have a visible way to start or manage playback. You can create custom audio controls with JavaScript, but this requires additional code.

Using Audio Controls with Other Attributes

You can combine controls with attributes such as loop, muted, and preload.

For example, the following code repeats the audio after it finishes:

<audio controls loop>
  <source src="music.mp3" type="audio/mpeg">
</audio>

You can also start the player muted:

<audio controls muted>
  <source src="music.mp3" type="audio/mpeg">
</audio>

The muted attribute starts the audio without sound. Visitors can usually unmute it through the player controls.

Explore our tutorials on HTML Media and HTML Video Controls to learn more about multimedia playback.

Best Practices for HTML Audio Controls

Follow these practices when adding audio to your website:

• Use the controls attribute so visitors can manage playback.
• Provide a supported audio format and a correct file path.
• Compress audio files to reduce loading time.
• Avoid unexpected autoplay with sound.
• Provide a transcript for important spoken content.
• Test the audio player on mobile devices and different browsers.

The built-in controls attribute is a simple way to make audio accessible and convenient for website visitors.