HTML - <audio>
The HTML <audio> 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.
Examples
Basic usage
<!-- Simple audio playback --> <audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay> Your browser does not support the <code>audio</code> element. </audio> <!-- Audio playback with captions --> <audio src="foo.ogg"> <track kind="captions" src="foo.en.vtt" srclang="en" label="English"> <track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska"> </audio>
Audio element with source element
<audio controls="controls"> Your browser does not support the <code>audio</code> element. <source src="foo.wav" type="audio/wav"> </audio>
Description
The HTML <audio> 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.
Fallback content for browsers not supporting the <audio> element can be added too, inside the opening and closing <audio></audio> tags.
The most basic playback functionality can be made available using the controls attribute (see below); for more advanced usage, audio playback and controls can be manipulated using the HTML Media API, and more specifically the features defined in the HTMLAudioElement interface.
You can also use the Web Audio API to directly generate and manipulate audio streams from JavaScript code. See Web Audio API for details.
- Permitted content: If the element has a
srcattribute: zero or more<track>elements, followed by transparent content that contains no media elements — that is, no<audio>or<video>elements. - Else: zero or more
<source>elements, followed by zero or more<track>elements, followed by transparent content that contains no media elements, that is no<audio>or<video>elements.
| Content categories | Flow content, phrasing content, embedded content. If it has a controls attribute: interactive content and palpable content. |
|---|---|
| Permitted content | If the element has a src attribute: zero or more <track> element, followed by transparent content that contains no media elements, that is no <audio> or <video>Else: zero or more <source> element, followed by zero or more <track> element, followed by transparent content that contains no media elements, that is no <audio> or <video>. |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parent elements | Any element that accepts embedded content. |
| DOM interface | HTMLAudioElement |
Browser Compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 3.0 | 3.5 (1.9.1) [1] | 9.0 | 10.5 | 3.1 |
autoplay attribute |
3.0 | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
buffered attribute |
? | 4.0 (2.0) | ? | ? | ? |
controls attribute |
3.0 | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
loop attribute |
3.0 | 11.0 (11.0) | 9.0 | 10.5 | 3.1 |
muted attribute |
? | 11.0 (11.0) | ? | ? | ? |
played property |
? | 15.0 (15.0) | ? | ? | ? |
preload attribute |
3.0 | 4.0 (2.0) | 9.0 | (Yes) [2] | 3.1 |
src attribute |
3.0 | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
| volume attribute |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | 1.0 (1.0) [1] | ? | ? | ? |
autoplay attribute |
? | 1.0 (1.0) | ? | ? | ? |
buffered attribute |
? | 4.0 (2.0) | ? | ? | ? |
controls attribute |
? | 1.0 (1.0) | ? | ? | ? |
loop attribute |
? | 11.0 (11.0) | ? | ? | ? |
muted attribute |
? | 11.0 (11.0) | ? | ? | ? |
played property |
? | 15.0 (15.0) | ? | ? | ? |
preload attribute |
? | 4.0 (2.0) | ? | ? | ? |
src attribute |
? | 1.0 (1.0) | ? | ? | ? |
| volume attribute |
[1] For Gecko to play audio, the server must serve the file using the correct MIME type.
[2] Supported under the older name autobuffer
See Also
Specifications
| Specification | Status | Comment |
|---|---|---|
| WHATWG HTML Living Standard The definition of '<audio>' in that specification. |
Living Standard | |
| HTML5 The definition of '<audio>' in that specification. |
Recommendation |
An audio element can fire various events.
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/html/element/audio