# HTML <audio> Tag
This is a boolean attribute that specifies whether or not to display the audio controls (ie. start/pause button, scroll, volume).
Note: If it’s missing, the audio file will not be displayed. Typically, you should always include this. Unless you want to create your own control panel using JavaScript
autoplay
This is a boolean attribute that plays the audio file automatically after the page loads.
Note: this feature might not work due to Chrome’s autoplay policy change
muted
This is a boolean attribute that specifies whether the audio will be initially silenced. The default is false or un-muted.
loop
This is a boolean attribute that specifies if the audio file will repeat continuously from the beginning after it’s done playing.
preload
This attribute is used to specify how the audio should be loaded when the page loads. It’s your way of communicating to the browser whether it should download and cache the audio file or not.
The browser should not load the audio when the page loads. Helpful if you want to minimize unnecessary traffic and when the user is not expected to use the media resource right away.
The browser should only load the metadata when the page loads. Again, this is used when the user doesn’t need the media resource right away. The metadata that you can fetch may include the audio length, track list, dimensions. etc
The browser should load the entire audio when the page loads.
Note sometimes this attribute may be ignored in certain instances (ie. when preload is present).
# Single Audio Source
You can set the <audio> with a single source using the src attribute:
You can also do it via the <source> tag:
# Multiple Audio Sources
ogg audio files have a better sound quality and lower file size compared to mp3 files. Unfortunately, it’s not supported by all browsers. Luckily we can pass multiple sources in the audio tag. Hence doing it like this:
It goes top down. That is why we listed ogg first and we add a default text if the browser doesn’t support the audio tag.
You can view more audio support from w3schools
# CSS Styling Audio Elements
You can’t style individual components of the audio player such as the button size or icons, or the font style. It will take on the default of the particular browser. But you can style the outer player unit.
# JavaScript Audio Events
There are a lot of events you can listen to on the audio file. For example:
| Event | Fired when |
|---|---|
| play | When the audio starts to play |
| pause | When the audio is paused |
| ended | When the audio is completed |
You can find the full event list on MDN
# Basic Usage
You can add an event listener like this:
Alternately, you can also add the event using the event attributes like this:
Essentially, the syntax for the event attributes is like this:
# Browser Support
The support is excellent for all modern browsers, including Internet Explorer 9 and up ��
# Community Input
@iamjaydeep1: What is autoplay and What were the problems with it? Browsers have historically been poor at helping the user manage sound. When users open a webpage and receive sound they did not expect or want, they have a poor user experience. This poor user experience is the problem we are trying to solve. Unwanted noise is the primary reason that users do not want their browser to autoplay content. To overcome the problems with autoplay chrome have did some policy change. follow the link
for more details. What is solution? Simple audio won’t play automatically. you must need user interaction to play audio like click on button to play or pause.
HTML Audio
The HTML <audio> element is used to play an audio file on a web page.
The HTML <audio> Element
To play an audio file in HTML, use the <audio> element:
Example
HTML Audio — How It Works
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.
HTML <audio> Autoplay
To start an audio file automatically, use the autoplay attribute:
Example
Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
Add muted after autoplay to let your audio file start playing automatically (but muted):
Example
Browser Support
The numbers in the table specify the first browser version that fully supports the <audio> element.
| Element | |||||
|---|---|---|---|---|---|
| <audio> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
HTML Audio Formats
There are three supported audio formats: MP3, WAV, and OGG. The browser support for the different formats is:
| Browser | MP3 | WAV | OGG |
|---|---|---|---|
| Edge/IE | YES | YES* | YES* |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
HTML Audio — Media Types
| File Format | Media Type |
|---|---|
| MP3 | audio/mpeg |
| OGG | audio/ogg |
| WAV | audio/wav |
HTML Audio — Methods, Properties, and Events
The HTML DOM defines methods, properties, and events for the <audio> element.
This allows you to load, play, and pause audios, as well as set duration and volume.
There are also DOM events that can notify you when an audio begins to play, is paused, etc.
HTML <audio> Tag
The <audio> is one of the HTML5 elements added to allow embedding audio files to a web page. Since not all browsers support all audio formats, the audio file is encoded using special codecs.
The <source> tag or the src attribute is used to indicate the variations of the same audio file. The path to an audio file can contain an absolute or relative URLs.
Syntax
The <audio> tag comes in pairs. The content is written between the opening (<audio>) and closing (</audio>) tags.
Example of the HTML <audio> tag:
The Loop Attribute
Using the loop attribute will make the audio file play over and over again:
Displaying Browser Controls
You can let the browser display to the user such controls, as volume or play/pause. It is done with the help of controls attribute.
Example of the HTML <audio> tag with the controls attribute:
Several File Formats
With the <audio> tag you can define multiple formats of the same audio file.
Attributes
The <audio> tag has attributes, that indicate the path to the audio file, the way how the audio file should be played, etc. Here the controls , autoplay , loop and muted attributes are used, and their values can be omitted. If the attribute is specified, then by default this function is considered to be enabled.
How to Add Background Audio/Music to Your Website
Learn how to add background audio or music files to your website by using the HTML <audio> element and its various attributes.
To add background music/audio on your website, you can use the HTML audio element ( <audio>. </audio> ).
Let’s say you have an audio file that you want to play in the background as soon as users visit your website. Here’s the general HTML code required to do that:
The <audio> element’s src attribute accepts both internal and external audio sources as values.
Notice the autoplay attribute. That’s required if you want the audio to start playing as soon as the user enters your webpage.
Demo: to hear an example, turn down the volume on your computer/headphones and click on this demo.
There are three supported audio formats in HTML: MP3, WAV, and OGG. In the <audio> element you specify the format in the type attribute:
| File Format | Media Type |
|---|---|
| MP3 | audio/mpeg |
| OGG | audio/ogg |
| WAV | audio/wav |
In this tutorial I use the WAV format, therefore I added the type="audio/wav" attribute on the element above.
Audio element attributes
The following is a handful of useful attributes that are built-in to the <audio> element, and provide you fine-grained control.
Loop background audio
To loop your background audio, you can add the loop attribute:
Mute background audio
To mute your background audio, you can add the mute attribute:
Why would you use the muted attribute? Well, you might want to disable your audio element’s audio source temporarily and switch it back on again later, without removing the entire element from your webpage.
Add control interface
To add controls (play, pause, etc.), use the controls attribute:
Now the user can click play if they want to hear your audio file.
Browser support for audio formats
- MP3 is supported in all browsers,
- WAV is supported in all browsers except Edge/IE
- OGG is supported in all browsers except Edge/IE and Safari
As of July 2020.
Tip: add an extra <source> to your <audio> element as a fallback, in case that your end user uses a browser that doesn’t support your primary file format:
Now if the end user’s browser doesn’t support the WAV format, it will play the MP3 source instead.
Has this been helpful to you?
You can support my work by sharing this article with others, or perhaps buy me a cup of coffee ��