HTML <audio> Tag
HTML
The <audio> HTML content is used to embed sound content in documents.
HTML <audio> Tag
➔ The <audio> tag is used to embed sound content in a document, such as music or other audio stream.
➔ The <audio> tag contains one or more
➔ Text between the <audio> and </audio> tags will only appear in browsers that do not support the <audio> tag.
audio tag syntax
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
<source src="audiofile.web" type="audio/web">
<source src="audiofile.ogg" type="audio/ogg">
This browser does not support the audio element.
</audio>
Best use and good practice.
➔ Most browsers support the audio tag.
➔ Not all browsers may support all types of audio files, so we should provide multiple audio files through the source tag, if one file type fails, another file type can be played by the browser.
➔ The browser will play an audio file when it is able to play that file format from the source list. If all are valid for the browser, If all are valid for the browser, the first match file will be played.
Element Attributes
| Attribute | Value | Description |
|---|---|---|
autoplay |
autoplay | Specifies that it will start playing as soon as the audio is ready. |
controls |
controls | Specifies that audio controls should be displayed. |
loop |
loop | Specifies that the audio will start again, each time it ends. |
muted |
muted | Specifies that the audio output should be muted. |
preload |
auto metadata none |
Specifies whether and how the author thinks the audio should be loaded when the page is loaded. |
src |
audio_url | Specifies the URL of the audio file. |
Supported Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>,
<class>,
<contenteditable>,
<contextmenu>,
<data-*>,
<dir>,
<draggable>,
<dropzone>,
<hidden>,
<id>,
<lang>,
<spellcheck>,
<style>,
<tabindex>,
<title>,
<translate>.
Supported Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>,
<onautocomplete>,
<onautocompleteerror>,
<onblur>,
<oncancel>,
<oncanplay>,
<oncanplaythrough>,
<onchange>,
<onclick>,
<onclose>,
<oncontextmenu>,
<oncuechange>,
<ondblclick>,
<ondrag>,
<ondragend>,
<ondragenter>,
<ondragleave>,
<ondragover>,
<ondragstart>,
<ondrop>,
<ondurationchange>,
<onemptied>,
<onended>,
<onerror>,
<onfocus>,
<oninput>,
<oninvalid>,
<onkeydown>,
<onkeypress>,
<onkeyup>,
<onload>,
<onloadeddata>,
<onloadedmetadata>,
<onloadstart>,
<onmousedown>,
<onmouseenter>,
<onmouseleave>,
<onmousemove>,
<onmouseout>,
<onmouseover>,
<onmouseup>,
<onmousewheel>,
<onpause>,
<onplay>,
<onplaying>,
<onprogress>,
<onratechange>,
<onreset>,
<onresize>,
<onscroll>,
<onseeked>,
<onseeking>,
<onselect>,
<onshow>,
<onsort>,
<onstalled>,
<onsubmit>,
<onsuspend>,
<ontimeupdate>,
<ontoggle>,
<onvolumechange>,
<onwaiting>.
Run HTML with "Try it Now"
The best way to learn is to try coding on your own projects.
HTML audio tag with controls
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML audio tag example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"/>
</head>
<body>
<h1>HTML audio tag example</h1>
<audio controls>
<source src="resources/media/seaside.mp3" type="audio/mp3">
<source src="resources/media/seaside.ogg" type="audio/ogg">
<source src="resources/media/seaside.mp3" type="audio/mpeg">
The browser does not support audio tags.
</audio>
</body>
</html>
Try it Now »
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML audio tag example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"/>
</head>
<body>
<h1>HTML audio tag example</h1>
<audio controls>
<source src="resources/media/seaside.mp3" type="audio/mp3">
<source src="resources/media/seaside.ogg" type="audio/ogg">
<source src="resources/media/seaside.mp3" type="audio/mpeg">
The browser does not support audio tags.
</audio>
</body>
</html>
Click on the "Try it Now" button to see how it works.
HTML audio tag with autoplay
Example (autoplay)
<!DOCTYPE html>
<html>
<head>
<title>HTML audio tag example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"/>
</head>
<body>
<h1>HTML audio tag example</h1>
<audio controls autoplay>
<source src="resources/media/seaside.mp3" type="audio/mp3">
<source src="resources/media/seaside.ogg" type="audio/ogg">
<source src="resources/media/seaside.mp3" type="audio/mpeg">
The browser does not support audio tags.
</audio>
</body>
</html>
Click on the "Try it Now" button to see how it works.
HTML audio tag with muted
Example (muted)
<!DOCTYPE html>
<html>
<head>
<title>HTML audio tag example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"/>
</head>
<body>
<h1>HTML audio tag example</h1>
<audio controls autoplay muted>
<source src="resources/media/seaside.mp3" type="audio/mp3">
<source src="resources/media/seaside.ogg" type="audio/ogg">
<source src="resources/media/seaside.mp3" type="audio/mpeg">
The browser does not support audio tags.
</audio>
</body>
</html>
Click on the "Try it Now" button to see how it works.