본문 바로가기

[R]HTML5 오디오(HTML5 Audio)

Audio on the Web

웹상의 오디오


Before HTML5, audio files could only be played in a browser with a plug-in (like flash).

HTML5 이전에는 오디오 파일을 플러그인과 같은 브라우저에서만 재생할 수있었습니다 (예 : 플래시).

The HTML5 <audio> element specifies a standard way to embed audio in a web page.

HTML5 <audio>요소는 웹 페이지에 오디오를 삽입하는 표준 방법을 지정합니다.




Browser Support

브라우저 지원


The numbers in the table specify the first browser version that fully supports the <audio> element.

표의 숫자는 <audio>요소 를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다 .


Element

<audio>

4.0

9.0

3.5

4.0

10.5




The HTML <audio> Element

HTML <audio> 요소


To play an audio file in HTML, use the <audio> element:

HTML 형식의 오디오 파일을 재생하려면 다음 <audio>요소를 사용하십시오 .


Example

1
2
3
4
5
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
cs





HTML Audio - How It Works

HTML 오디오 - 작동 원리


The controls attribute adds audio controls, like play, pause, and volume.

이 controls속성은 재생, 일시 중지 및 볼륨과 같은 오디오 컨트롤을 추가합니다.

The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format.

<source>요소는 브라우저에서 선택할 수 있습니다 다른 오디오 파일을 지정할 수 있습니다. 브라우저는 인식 된 첫 번째 형식을 사용합니다.

The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.

<audio>와 </audio>태그 사이의 텍스트 는 <audio>요소를 지원하지 않는 브라우저에서만 표시됩니다 .




HTML Audio - Browser Support

HTML 오디오 - 브라우저 지원


In HTML5, there are 3 supported audio formats: MP3, Wav, and Ogg.

HTML5에는 MP3, Wav 및 Ogg 등 3 가지 오디오 형식이 지원됩니다.

The browser support for the different formats is: 

다양한 형식에 대한 브라우저 지원은 다음과 같습니다. 


Browser MP3 Wav Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES




HTML Audio - Media Types

HTML 오디오 - 미디어 유형


File Format Media Type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav




HTML Audio - Methods, Properties, and Events

HTML 오디오 - 메서드, 속성 및 이벤트


HTML5 defines DOM methods, properties, and events for the <audio> element.

HTML5는 DOM 메소드, 속성 및 <audio>요소에 대한 이벤트를 정의합니다 .

This allows you to load, play, and pause audios, as well as set duration and volume.

이를 통해 오디오를로드, 재생 및 일시 중지 할 수있을뿐만 아니라 기간 및 볼륨을 설정할 수 있습니다.

There are also DOM events that can notify you when an audio begins to play, is paused, etc.

오디오가 재생되기 시작하거나 일시 중지 된 경우 사용자에게 알릴 수있는 DOM 이벤트도 있습니다.

For a full DOM reference, go to our HTML5 Audio/Video DOM Reference.

전체 DOM 참조는 HTML5 오디오 / 비디오 DOM 참조로 이동하십시오 .




HTML5 Audio Tags

HTML5 오디오 태그


Tag Description
<audio> Defines sound content
사운드 컨텐트 정의
<source> Defines multiple media resources for media elements, such as <video> and <audio>
<video> 및 <audio>와 같은 미디어 요소에 대해 여러 미디어 리소스를 정의합니다.