search

Home >Web Front-end >HTML Tutorial >HTML Audio Tag

HTML Audio Tag

WBOY
WBOYOriginal
2024-09-04 16:33:471226browse

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 
    <!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>
    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>
    MP3

    		 audio/mpeg
    OGG

    		 HTML Audio Tagaudio/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>
    They are different attributes within the audio tag. This each attribute have their functionality to perform. Allowed attributes in
    firefox chrome safari html edge format Attribute this
    Statement：
    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
    Previous article：Alt Tag in HTMLNext article：Alt Tag in HTML

    Related articles

    See more