HTML <audio> Tag Tutorial - Usage, Syntax,
Attributes and Example

calender-iconPublished: 29 Jan 2025

clock-icon5-min read

printer-icon whatsapp-icon share-icon



close-button
HTML
Table of Contents

INTRODUCTION

The <audio> element is used to embed audio files, such as music or sound effects, into a webpage. It supports multiple formats and provides controls for playback.

The <audio> element can contain one or more <source> and <track> element, <a> element, <p> element and other. The text/content between the opening and closing <audio></audio> tags appears as a fallback for browsers that do not support the <audio> element.

Display: The HTML audio tag is displayed in the browser as a media player with default controls—but only if the controls attribute is used. The exact appearance varies slightly by browser and OS.

Example: 

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



<audio controls>
 <source src="audio.mp3" type="audio/mp3">
 <source src="audio.ogg" type="audio/ogg">
 <a href="AudioTest.ogg" download="AudioTest.ogg">Download OGG audio</a>
</audio>
Output:

Attributes

1. autoplay

autoplay is an boolean attribute. This attribute causes the audio to start playing automatically as soon as it is ready, without waiting for the entire file to download. Websites that autoplay audio (or videos with sound) can be disruptive for users and should be avoided whenever possible.


2. controls

controls is an boolean attribute. When this attribute is included, the browser provides controls that let the user manage audio playback, such as adjusting the volume, seeking, and pausing or resuming playback.


3. controlslist

The controlsList attribute is used to customize which controls appear in the default media player. It allows developers to hide specific controls, such as download, volume, and fullscreen options. This attribute is always used with the controls attribute.

The possbile values of this attribute is listed below.

  • nodownload - When this value is used it hides the download button.
  • nofullscreen - When this value is used it hides the fullscreen button.
  • noremoteplayback - When this value is used it disables remote playback features like casting to external devices.

4. crossorigin

The crossorigin attribute provides support for CORS. Cross-Origin Resource Sharing(CORS) is an mechanism that allows server to specify any origins(meaning external server/website) other that itself from which browser is permitted to access resources. For security reasons Browsers restrict cross-origin requests

This attributes defines whether user credentials should be sent during CORS request. User Credentials are generally cookies, TLS client certificates or HTTP authentication header containing username and password. By default these credentials are not sent in Cross-Origin request which makes a site vulnerable to Cross-site Request Forgery. The possible values of this attribute are listed below.

  • anonymous: Cross-Origin request is performed without user-credentials.
  • use-credentials: Cross-Origin request is performed using user-credentials.
  • If this attribute is not present the resource is fetched without CORS request.
  • If the value of this attribute is invalid, then it resolves to anonymous.

5. src

The src attribute is used to specify URL of the audio to embed. This attribute is optional, as the <source> element within the <audio> block can also be used to specify the audio file.

When the src is used, then <audio> element can contain zero or more <track> element but not <source> element.

When the src is not used, then <audio> element can contain zero or more <track> element and zero or more <source> element.


6. loop

The loop is a Boolean attribute that, when present, causes the audio player to automatically restart from the beginning once it reaches the end.


7. muted

The muted is Boolean attribute which determines whether the audio is muted initially. By default, it is set to false.


8. preload

The preload attribute specifies how the browser should handle loading the audio file before playback begins. It helps optimize performance and user experience based on network conditions and expected usage. It is an enumerated attribute. The possbile values are listed below.

  • none - When this value is used the audio file is not preload; it loads only when the user initiates playback.
  • metadata - When this value is used the browser loads only basic metadata (e.g., duration, file size) but not the full audio file.
  • auto - When this value is used the browser loads the entire audio file as soon as the page loads.
  • empty string - When the value is empty then it resolves to auto value.


Tag Omission

The HTML <audio> element must have have both start tag and end tag.

Usage Guidelines

  • Different browsers support varying audio types and audio codecs. To ensure compatibility, you can include multiple sources within nested <source> elements, allowing the browser to select the first one it recognizes.
  • The <audio> element has no intrinsic visual output of its own unless the controls attribute is specified, in which case the browser's default controls are shown.
  • If the controls attribute is not specified, the audio player will not display the browser's default controls.
  • It's also a good practice to include fallback content, such as a direct download link or text, for users with browsers that do not support the <audio> element.
  • The <audio> element does not natively support captions and transcripts using WebVTT. To add captions, you can use a library or framework that enables this functionality or write custom code to display them. Another option is to play the audio using a <video> element, which does support WebVTT.

Frequently Asked Questions(FAQ)

How to insert audio in HTML ?
In HTML, you can use the <audio> element to embed audio files into a webpage. The <audio> tag supports different file formats like MP3, OGG, and WAV and provides built-in controls for playback.


How to add background music in html?
To add background music to a webpage using HTML, you can use the audio tag with the autoplay, loop, and hidden attributes.

How is the html audio tag displayed?
The HTML audio tag is displayed in the browser as a media player with default controls—but only if the controls attribute is used. The exact appearance varies slightly by browser and OS.

If you omit the controls attribute, the audio element is invisible by default (no UI), unless styled otherwise with CSS or controlled via JavaScript.
How to Remove the Download Option from HTML Audio Tag ?
By default, the HTML <audio> element provides built-in controls, including a download button in some browsers. You can remove the download option using the controlsList="nodownload" attribute . The below example will make it clear. 


<audio src="audio.mp3" controls controlsList="nodownload"></audio>

Which audio formats are supported by the audio element?
The audio element supports multiple formats, including MP3 (audio/mpeg), Ogg (audio/ogg), and WAV (audio/wav). However, browser support for these formats varies, so it's advisable to provide multiple formats to ensure compatibility.

Is the audio element accessible to screen readers and assistive technologies?
The audio element is accessible, especially when the controls attribute is used, as it provides a user interface for interaction. However, it's important to include descriptive text and ensure that all functionalities are accessible via keyboard and other assistive devices.

How can I handle browsers that do not support the audio element?
For browsers that do not support the audio element, you can provide fallback content between the opening and closing audio tags. This content can include a message or a link to download the audio file.

What is the preload attribute in the audio element?
The preload attribute specifies how the browser should handle loading the audio file before playback begins. It helps optimize performance and user experience based on network conditions and expected usage. It is an enumerated attribute. The possbile values are listed below.
  • none - When this value is used the audio file is not preload; it loads only when the user initiates playback.
  • metadata - When this value is used the browser loads only basic metadata (e.g., duration, file size) but not the full audio file.
  • auto - When this value is used the browser loads the entire audio file as soon as the page loads.
  • empty string - When the value is empty then it resolves to auto value.

How can I add audio controls like play, pause, and volume to the audio element?
By adding the controls attribute to the audio tag, the browser will display built-in audio controls, allowing users to play, pause, and adjust the volume of the audio. ​

Is it possible to autoplay audio using the audio element?
Yes, by including the autoplay attribute in the audio tag, the audio will start playing automatically as soon as it is ready. However, some browsers may restrict autoplay to enhance user experience, often requiring the audio to be muted initially or initiated by user interaction.

How do I loop an audio file using the audio element?
To make an audio file play continuously, add the loop attribute to the audio tag. This will cause the audio to start over again each time it finishes.