<audio>
The <audio> HTML element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 3 | 12 | 3.5 | 3.1 | 18 | 3 | |
| HTML attribute | ||||||
controls | 3 | 12 | 3.5 | 3.1 | 18 | 3 |
| The crossorigin attribute, valid on the audio, img, link, script, and video elements, provides support for CORS, defining how the element handles cross-origin requests, thereby enabling the configuration of the CORS requests for the element's fetched data. Depending on the element, the attribute can be a CORS settings attribute. | 33 | ≤18 | 74 | 10 | 33 | 10 |
loop | 3 | 12 | 11 | 3.1 | 18 | 3 |
muted | 15 | ≤18 | 11 | 6 | 18 | 6 |
preload | 3 | 12 | 4 | 3.1 | 18 | 3 |
src | 3 | 12 | 3.5 | 3.1 | 18 | 3 |
| DOM API | ||||||
| The HTMLAudioElement interface provides access to the properties of audio elements, as well as methods to manipulate them. | 3 | 12 | 3.5 | 3.1 | 18 | 3 |
| The Audio() constructor creates and returns a new HTMLAudioElement which can be either attached to a document for the user to interact with and/or listen to, or can be used offscreen to manage and play audio. | 4 | 12 | 3.5 | 3.1 | 18 | 3 |
- For Firefox to play audio, the server must serve the file using the correct MIME type.
- This browser only partially implements this feature
- This feature was removed in a later browser version (74)
- With `crossorigin="use-credentials"`, cookies aren't sent during seek. See bug 1532722.
- Defaults to `metadata` in Chrome 64.
- This feature was removed in a later browser version (4)
- Previously available under a different name: autobuffer (3.5)
- Defaults to `metadata` in Chrome Android 64.
Syntax
<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>Live demo
Multiplefo-mat with Source element.
Multiple. audiofo-mat specified, browser that supportshape notation selection. with source
Use cases
-
Narration and clips
Provide pronunciation guides, podcast segments, or supporting audio without custom playback UI.
-
User-controlled playback
Offer standard controls for short or long-form audio with minimal implementation overhead.
Cautions
- Autoplaying audio is disruptive and should be avoided except in tightly justified cases.
- Custom audio players often require substantial keyboard and accessibility work beyond the basic element.
Accessibility
- Provide captions, transcripts, or equivalent text alternatives when the audio contains meaningful spoken content.