HTMLオーディオタグ-htmlチュートリアル-php.cn

HTMLオーディオタグ

WBOY

リリース： 2024-09-04 16:33:47

オリジナル

1197 人が閲覧しました

HTML 5 で導入された HTML オーディオタグ。このタグは、すべてのオーディオファイルを HTML ページに追加するために使用されます。この audio タグは、再生、音量、一時停止などのオーディオコントロールも追加します。要素は、ブラウザが選択している代替オーディオファイルを選択するために使用されます。ブラウザは常に最初に認識される形式を選択します。タグがありますが、オーディオ機能は実行されていません。単なるプレーンテキストとして機能します。

ブラウザと許可される形式:

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

ブラウザ

形式

MP3 WAV

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

OGG

エッジ/IE

いいえ いいえ

クロム はい

はいはい

Firefox はい

はいはい

サファリ はい

はい

いいえ

オペラ

はい

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

ログイン後にコピー

はい

テーブル> HTML では audio タグはどのように機能しますか? HTML オーディオは、指定したオーディオファイルのタイプとそのファイル内で使用した属性に基づいて機能します。

HTMLオーディオタグ

オーディオ形式とメディアの種類:

ファイル形式

メディアの種類

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

オーディオ/mpeg OGG

オーディオ/ogg

WAV

オーディオ/wav

テーブル> 属性

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

ログイン後にコピー

これらは audio タグ内の異なる属性です。この各属性には、実行する機能があります。