The audio tag adds sound to web pages without plugins. It gives you control to play, pause, loop, or mute audio in modern browsers.

Understand the <audio> Tag in HTML

The <audio> tag lets you add sound files to your web page. It plays music, effects, or voice tracks in supported formats. It replaces old plugin-based methods.

The <audio> tag works in all major browsers and gives you native controls or allows full control through JavaScript.

Here is the basic tag:

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

• <audio> is the main tag.
• src points to the sound file.
• controls shows a default play bar with play and pause.

These are the key attributes you can use with the <audio> Tag:

Here are different formats that are supported in browsers:

If a browser cannot play a format, write multiple <source> tags inside <audio>.

Here is the difference between <audio> and other media tags like <video>:

• <audio> plays sound only.
• <video> plays both sound and picture.
• <audio> works with smaller files.
• <video> adds more layout rules and UI space.

Use <audio> for background music or narration, and <video> when you need visuals.

Use <source> Inside <audio>

You can include multiple audio formats inside the <audio> tag with the <source> element. That specifies the path to the audio file in different formats.

Here is an example:

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

The browser plays the first file it supports, while the last line shows if none of the formats work.

Here is another example:

<audio controls>
  <source src="alert.mp3" type="audio/mpeg">
  <source src="alert.ogg" type="audio/ogg">
</audio>

This plays a sound called alert.mp3 or alert.ogg. The browser checks support and loads the first one it can play. The controls attribute adds a default play bar.

The controls attribute shows you many buttons, such as:

• Play
• Pause
• Volume
• Seek options

Here is a tag with controls attribute:

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

Browsers add a simple UI. It works on desktop and mobile.

Customize the UI of the HTML <audio> Tag with JavaScript and CSS

Use JavaScript to link buttons to audio actions and use CSS to style those buttons. But don’t forget to hide the default controls

Here’s a sample example:

<audio id="myAudio" src="track.mp3"></audio>
<button onclick="document.getElementById('myAudio').play()">Play</button>
<button onclick="document.getElementById('myAudio').pause()">Pause</button>

This gives full control without the browser UI.

Use the autoplay attribute:

<audio src="intro.mp3" autoplay></audio>

The browser starts the file once it loads. Some browsers block autoplay unless muted.

Add loop:

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

The audio restarts every time it ends.

Here is an example:

<audio src="background.mp3" autoplay loop muted></audio>

This starts playing at load, plays again after each end, and starts with sound off.

How to Style the HTML <audio> Tag

You can style the size, border, or visibility of the player. For full control, hide it and use custom buttons.

Here is an example:

<audio id="customPlayer" src="clip.mp3"></audio>
<button onclick="document.getElementById('customPlayer').play()">Play</button>
<style>
  button {
    background: black;
    color: white;
    padding: 5px 10px;
    border: none;
  }
</style>

This removes the default bar and replaces it with a styled play button.

Examples of the <audio> Tag in HTML

Simple Player with Multiple Sources

<audio controls>
  <source src="theme.mp3" type="audio/mpeg">
  <source src="theme.ogg" type="audio/ogg">
  This browser does not support audio.
</audio>

This uses two formats. The browser loads one that it can play. The user sees a simple play bar.

Autoplay and Loop Background Audio

<audio src="ambient.mp3" autoplay loop muted></audio>

This runs a muted sound in the background. It loops without showing controls. It works best for background sound effects.

Custom Audio Buttons with JavaScript:

<audio id="voice" src="speech.mp3"></audio>
<button onclick="document.getElementById('voice').play()">Play</button>
<button onclick="document.getElementById('voice').pause()">Pause</button>

This setup gives full control. It links buttons to the play and pause actions. It hides the default player.

Styled Controls with CSS:

<audio id="alert" src="notice.mp3"></audio>
<button onclick="document.getElementById('alert').play()">Play Alert</button>
<style>
  button {
    background-color: red;
    color: white;
    font-size: 16px;
  }
</style>

This shows how to style the button. It gives a clear design and connects to audio playback.

Wrapping Up

In this article, you learned how the <audio> tag works and how to control it with attributes and code.

Here is a quick recap:

• The <audio> tag adds sound to web pages.
• Use src, controls, autoplay, loop, and muted to control playback.
• Add multiple <source> tags for fallback.
• Customize the UI with JavaScript and CSS.
• Use autoplay and loop for background audio.
• Style your player to fit your page layout.

FAQs

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

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

<audio src="clip.mp3" controls autoplay loop></audio>

<audio controls>
  <source src="sound.mp3" type="audio/mpeg">
  <source src="sound.ogg" type="audio/ogg">
</audio>

Similar Reads