Balise audio HTML-tutoriel HTML-php.cn

Balise audio HTML

WBOY

Libérer： 2024-09-04 16:33:47

original

1215 Les gens l'ont consulté

Balise audio HTML introduite dans HTML 5. Cette balise est utilisée pour ajouter tous les fichiers audio à la page HTML. Cette balise audio ajoute également des commandes audio telles que la lecture, le volume, la pause, etc. Dans la balise audio L'élément est utilisé pour choisir des fichiers audio alternatifs choisis par le navigateur, le navigateur est toujours choisi en premier format reconnu. Nous pouvons également ajouter du texte entre balise, mais il n'exécute pas de fonctionnalité audio ; il agit simplement comme du texte brut.

Navigateurs et formats autorisés :

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

Navigateurs

Formats

MP3 WAV

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

OGG

Edge/IE

NON NON

Chrome OUI

OUI OUI

Firefox OUI

OUI OUI

Safari OUI

OUI

NON

Opéra

OUI

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

Copier après la connexion

OUI

Comment fonctionne la balise audio en HTML ? L'audio HTML fonctionne en fonction du type de fichier audio que nous avons donné et des attributs que nous y avons utilisés.

Balise audio HTML

Formats audio et type de média :

Format de fichier

Type de média

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

Copier après la connexion

MP3

audio/mpeg OGG

audio/ogg

WAV

audio/wav

Attributs

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

Copier après la connexion

Ce sont des attributs différents au sein de la balise audio. Chaque attribut a sa fonctionnalité à exécuter. Les attributs autorisés dans