# The HTML audio tag
> Learn how to embed audio in HTML with the audio tag, from the controls, autoplay, loop and preload attributes to multiple sources and play events.
Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2019-08-06 | Updated: 2019-11-02 | Topics: [HTML](https://flaviocopes.com/tags/html/) | Canonical: https://flaviocopes.com/html-audio-tag/
The `audio` tag allows you to embed audio content in your HTML pages.
This element can stream audio, maybe using a microphone via [`getUserMedia()`](https://flaviocopes.com/getusermedia/), or it can play an audio source which you reference using the `src` attribute:
```html
```
By default the browser does not show any controls for this element. Which means the audio will play only if set to autoplay (more on this later) and the user can't see how to stop it, or control the volume or move through the track.
To show the built-in controls, you can add the `controls` attribute:
```html
```
Controls can have a custom skin.
You can specify the MIME type of the audio file using the `type` attribute. If not set, the browser will try to automatically determine it:
```html
```
An audio file by default does not play automatically. Add the `autoplay` attribute to play the audio automatically:
```html
```
> Note: mobile browsers don't allow autoplay
The `loop` attribute restarts the audio playing at 0:00 if set, otherwise if not present the audio stops at the end of the file:
```html
```
You can also play an audio file muted using the `muted` attribute (not really sure what's the usefulness of this):
```html
```
## CORS
Audio is subject to [CORS](https://flaviocopes.com/cors/) and unless you allow it on the server side, an audio file can't be played cross-origin.
## Preloading the audio
If you don't set `autoplay`, the spec says that browsers will only download the audio metadata (to find out the length, for example) but will not download the audio itself.
You can force preloading the audio using
```html
```
## Displaying content if `audio` is not supported
The `audio` tag is [very well supported](https://caniuse.com/#feat=audio), up to IE9, so nowadays there should be no need to have a placeholder text, but we have this option. You just add a closing tag, and insert text between the opening and closing tag:
```html
```
## Adding native controls
Instead of autoplaying the audio in the background, you can choose to ask the browser display a set of controls to let the user play the audio when they want, have some indication of the length, set the volume and let them navigate the track:
```html
```
This is how it looks in Chrome:
You can style controls using CSS, although this is out of the scope for this introduction.
## Adding multiple sources
Browsers can implement one audio codec but not another. Maybe you want to use a newer standard which cuts file size in half but you still want to support older browsers.
You do so with the `source` tag:
```js
```
## Working with audio events
We can listen for events on each `audio` element using [JavaScript](https://flaviocopes.com/javascript/), to create interesting projects and interfaces. There is a lot of different events to play with.
The `play` event is fired when the audio playback starts:
```js
document.querySelector('video').addEventListener('play', () => {
alert('Audio is playing!!!')
})
```
You can also directly add this event (as the others) using the `on` attribute directly on the HTML element:
```html
```
```js
const playing = () => {
alert('Audio is playing!!!')
}
```
These are a few events you can listen to:
- `play` audio started playing
- `pause` audio was paused
- `ended` audio playing completed
- `timeupdate` the user interacted with the playback timeline and went forward/backwards
- `volumechange` the user changed the volume
There are a lot more events related to the audio loading, and [you can find the full list on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#Events).