Suggest an edit

Improve this article

Refine the answer for “What does the <audio> element do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

The `<audio>` element is used to **play sound** on a web page: music, podcasts, effects, voiceover recordings, and so on.
It works similarly to `<video>`, but without a video stream: the browser creates an **audio player** with "play / pause" buttons, volume, and a timer.

---

### 1. Simplest example

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

What's here:

- `src="music.mp3"`: the path to the audio file;
- `controls`: displays the standard control panel (play, pause, volume).

Result: the browser embeds an **audio player**, and the user can listen to the sound right on the page.

---

### 2. The recommended approach: via `<source>`

To support different formats (MP3, OGG, WAV), you can specify several `<source>` tags: the browser will pick the right one:

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

If the browser does not support any of the formats, it shows the text from `<p>`.

---

### 3. Main attributes of `<audio>`

| Attribute | Purpose | Example |
|---|---|---|
| `src` | Path to the audio file (if `<source>` is not used) | `src="sound.mp3"` |
| `controls` | Shows the control panel | `controls` |
| `autoplay` | Starts the audio automatically when the page loads *(usually requires* `muted`*)* | `autoplay` |
| `loop` | Repeats playback in a loop | `loop` |
| `muted` | Mutes the sound by default | `muted` |
| `preload` | Controls preloading (`none`, `metadata`, `auto`) | `preload="metadata"` |

---

### 4. How `preload` works

| Value | Behavior |
|---|---|
| `none` | The audio does not load until the user clicks play |
| `metadata` | Only information (duration, title, tags) is loaded |
| `auto` | The audio may load fully in advance |

Example:

```html
<audio src="podcast.mp3" preload="metadata" controls></audio>
```

---

### 5. Example with several attributes

```html
<audio controls autoplay loop muted preload="auto">
  <source src="track.mp3" type="audio/mpeg">
  <source src="track.ogg" type="audio/ogg">
  Your browser does not support audio playback.
</audio>
```

Behavior:

- starts playing automatically,
- without sound (otherwise browsers block autoplay),
- loops continuously,
- loads in advance.

---

### 6. Supported formats

| Format | MIME type | Support |
|---|---|---|
| `.mp3` | `audio/mpeg` | All browsers |
| `.ogg` | `audio/ogg` | Firefox, Chrome, Opera |
| `.wav` | `audio/wav` | All modern browsers (large size) |

---

### Summary:

| Element | `<audio>` |
|---|---|
| Purpose | Play sound right in the browser |
| Source | Via `src` or several `<source>` tags |
| Main attributes | `controls`, `autoplay`, `loop`, `muted`, `preload` |
| Advantages | No plugins, works natively in all browsers |
| Supported formats | MP3, OGG, WAV |

---

**In simple terms:**
`<audio>` is a **built-in player for sound**.
You specify the file via `src` or `<source>`,
and the browser provides the playback buttons on its own:
no plugins, no external services.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts485 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.