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.
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. |
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>
.
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>
.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<h1>HTML audio tag example</h1>
<audio controls>
<source src="soundbee.ogg" type="audio/ogg">
<source src="soundbee.mp3" type="audio/mpeg">
The browser does not support audio tags.
</audio>
Click on the "Try it Now" button to see how it works.
Sample Code
Copy each file contents and paste it to your own project and run to see the final output
Example
<h1>HTML audio tag example</h1>
<audio controls autoplay>
<source src="soundbee.ogg" type="audio/ogg">
<source src="soundbee.mp3" type="audio/mpeg">
The browser does not support audio tags.
</audio>
Click on the "Try it Now" button to see how it works.
Example
<h1>HTML audio tag example</h1>
<audio controls autoplay muted>
<source src="soundbee.ogg" type="audio/ogg">
<source src="soundbee.mp3" type="audio/mpeg">
The browser does not support audio tags.
</audio>
Click on the "Try it Now" button to see how it works.