HTML5 audio tag (<audio>) can be used to play an audio in HTML page. When multiple sources are specified, browser uses the first recognized format.
Audio tag attributes
| Attribute | Value | Description |
|---|---|---|
| src | url | The source of the resource |
| crossorigin | anonymous|use-credential | How the element handles crossorigin requests |
| preload | none|metadata|auto | Hints how much buffering the media resource will likely need |
| autoplay | boolean (present or not) | Start media automatically on load |
| mediagroup | text | Groups media elements together |
| loop | boolean (present or not) | Whether to loop |
| muted | boolean (present or not) | Whether to mute the media resource by default |
| controls | boolean (present or not) | Show user agent controls |
Browser support for various formats
- Mp3 (Broadly supported by Chrome, Firefox, IE, Edge, Safari, Opera)
- Wav audio format (Broadly supported by Chrome, Firefox, Edge, Safari, Opera)
- Ogg Vorbis (Broadly supported by Chrome, Firefox, Opera)
Example – Audio tag with controls
This example display an audio with controls (without autoplay) which runs in loop when played. Also note that attributes like loop and controls can be used without a value. So specifying loop is equivalent to loop="loop".
<style type="text/css">
audio {border: 2px solid lightgreen;}
</style>
<audio loop controls>
<source src="http://infoheap.s3-us-west-1.amazonaws.com/pub/video/non-existing-file.mp3">
<source src="http://infoheap.s3-us-west-1.amazonaws.com/pub/video/brook-with-waterfall-s.mp3">
</audio>Specification and Browser compatibility
| Specification | Status | Categories |
|---|---|---|
| Audio element | WHATWG Living Standard | HTML5 |
| Chrome | Firefox | IE | Edge | Safari | Opera |
|---|---|---|---|---|---|
| Yes 4+ | Yes 3.5+ | Yes 9+ | Yes 12+ | Yes 4+ | Yes 10.5+ |
| Android Chrome | Android Firefox | iOS Safari | IE Mobile | Opera Mobile |
|---|---|---|---|---|
| Yes 47+ | Yes 44+ | Yes 4.0-4.1+ | Yes 10+ | Yes 11+ |
source: caniuse.com
