ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLオーディオタグ

HTMLオーディオタグ

WBOYオリジナル: 2024-09-04 16:33:471226ブラウズ

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 タグ内の異なる属性です。この各属性には、実行する機能があります。

firefox chrome safari html edge format Attribute this

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTMLのAltタグ次の記事：HTMLのAltタグ

続きを見る

HTMLオーディオタグ

OGG

はい

オペラ

WAV

コントロール:

関連記事