HTML 오디오 태그

WBOY원래의: 2024-09-04 16:33:471226검색

HTML 5에 도입된 HTML 오디오 태그. 이 태그는 모든 오디오 파일을 HTML 페이지에 추가하는 데 사용됩니다. 이 오디오 태그는 재생, 볼륨, 일시 정지 등과 같은 오디오 컨트롤도 추가합니다. 오디오 태그 요소는 브라우저가 선택하는 대체 오디오 파일을 선택하는 데 사용되며, 브라우저는 항상 가장 먼저 인식되는 형식을 선택합니다.

브라우저 및 허용 형식:

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

아니요 아니요

크롬 예

예 예

파이어폭스 예

예 예

사파리 예

예

아니요

오페라

예

<!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에서 오디오 태그는 어떻게 작동하나요? 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>

오디오 태그 내에서는 서로 다른 속성입니다. 각 속성에는 수행할 기능이 있습니다.

firefox chrome safari html edge format Attribute this

성명：

이전 기사：HTML의 Alt 태그다음 기사：HTML의 Alt 태그

HTML 오디오 태그

OGG

예

오페라

WAV

controls:

관련 기사