HTML Audio Tag

HTML audio tag introduced in HTML 5. This tag is used to add all audio files to the HTML page. This audio tag also adds audio controls like play, volume, pause, etc. In audio tag element is used to choose alternative audio files which browser is choosing, the browser is always chosen first recognized format. We can also add text between tag, but it is not performing audio functionality; it just acts as plain text.

Browsers and allowed formats:

Browsers	Formats
	MP3	WAV	OGG
Edge/IE	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

Browsers

Formats

 

MP3

WAV

File Format	Media Type
MP3	audio/mpeg
OGG	audio/ogg
WAV	audio/wav

OGG

Edge/IE

YES

NO

NO

Chrome

YES

YES

YES

Firefox

YES

YES

YES

Safari

YES

YES

NO

Opera

YES

YES

<meta charset="ISO-8859-1">
<title>Audio Tag</title>
<style type="text/css">
h1
{
color: red;
text-align: center;
}
p
{
color: green;
font-size: 20px;
border: 2px dotted brown;
}
</style>


<h1 id="Audio-Tag-Introduction">Audio Tag Introduction</h1>
<p>HTML audio tag introduced in HTML 5. This tag is used to add all
audio files to the HTML page. This audio tag also adds audio controls
like play, volume, pause etc. In audio tag source element is used for
choose alternative audio files which browser is choosing, browser is
always choose first recognized format. We can also add text between
audio and /audio tag but it is not performing audio functionality, it
is just act as plain text.</p>
<h1 id="MP-Audio-Demo-from-online-source">MP3 Audio Demo from online source</h1>
<audio controls>
<source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mpeg">
</source></audio>

YES

How does the audio tag works in HTML? HTML audio works based on the type of audio file we have given and which attributes we have used within it.

Audio formats and media type:

File Format	Media Type
<meta charset="ISO-8859-1"> <title>Audio Tag</title> <style type="text/css"> h1 { color: green; text-align: center; } p { color: blue; font-size: 20px; border: 2px solid orange; } </style> <h1 id="Audio-Tag-Introduction">Audio Tag Introduction</h1> <p>HTML audio tag introduced in HTML 5. This tag is used to add all audio files to the HTML page. This audio tag also adds audio controls like play, volume, pause etc. In audio tag source element is used for choose alternative audio files which browser is choosing, browser is always choose first recognized format. We can also add text between audio and /audio tag but it is not performing audio functionality, it is just act as plain text.</p> <h1 id="WAV-Audio-Demo-from-online-source">WAV Audio Demo from online source</h1> <audio controls> <source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_WAV_1MG.wav" type="audio/wav"> </source></audio> MP3	audio/mpeg
OGG	audio/ogg
WAV	audio/wav

Attributes

<meta charset="ISO-8859-1">
<title>Audio Tag</title>
<style type="text/css">
h1
{
color: blue;
text-align: center;
}
p
{
color: fuchsia;
font-size: 20px;
border: 2px dashed red;
}
</style>


<h1 id="Audio-Tag-Introduction">Audio Tag Introduction</h1>
<p>HTML audio tag introduced in HTML 5. This tag is used to add all
audio files to the HTML page. This audio tag also adds audio controls
like play, volume, pause etc. In audio tag source element is used for
choose alternative audio files which browser is choosing, browser is
always choose first recognized format. We can also add text between
audio and /audio tag but it is not performing audio functionality, it
is just act as plain text.</p>
<h1 id="OGG-Audio-Demo-from-online-source">OGG Audio Demo from online source</h1>
<audio controls autoplay>
<source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_OOG_5MG.ogg" type="audio/ogg">
</source></audio>

They are different attributes within the audio tag. This each attribute have their functionality to perform. Allowed attributes in

The above is the detailed content of HTML Audio Tag. For more information, please follow other related articles on the PHP Chinese website!