HTML Audio Tag-HTML Tutorial-php.cn

Table of Contents

OGG

YES

Opera

WAV

controls:

Home

Web Front-end

HTML Tutorial

HTML Audio Tag

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:33 PM

html html5 HTML Tutorial HTML Properties HTML tags

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

Chrome

YES

YES

YES

Firefox

YES

YES

YES

Safari

YES

Opera

YES

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<h1>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>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">
</audio>
</body>
</html>

Copy after login

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.

HTML Audio Tag

Audio formats and media type:

File Format	Media Type
<!DOCTYPE html> <html> <head> <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> </head> <body> <h1>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>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"> </audio> </body> </html> Copy after login MP3	audio/mpeg
OGG	audio/ogg
WAV	audio/wav

Attributes

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<h1>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>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">
</audio>
</body>
</html>

Copy after login

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

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn