[HTML5] <audio> 요소

HTML <audio>요소는 문서의 소리 콘텐츠를 포함할 때 사용한다. HTML5 이전에는 웹 페이지에서 오디오를 들려주기 위한 표준안이 없어서 오디오를 삽입하기 위해서는 플래시와 같은 외부 플러그인에 의존해야했다. 하지만 HTML5에서는 <audio>요소를 이용하여 웹 페이지에 오디오를 삽입하는 표준화된 방식을 제공한다. src 값 또는 <source>요소를 사용하여 하나 이상의 오디오 소스를 지정할 수 있으며, 다수를 지정한 경우 가장 적절한 소스를 브라우저가 자동으로 선택한다. MediaStream을 사용하면 미디어 스트림을 할 수도 있다.

오디오 파일 형식

HTML5 표준이 공식적으로 지원하는 오디오 파일 형식은 MP3, WAV, OGG이다.

오디오 관련 요소

요소	설명
<audio>	오디오와 음악 등 오디오 파일을 명시한다.
<source>	audio 요소의 원본 파일에 대한 파일 형식 및 파일 주소를 여러 개 명시함.웹 브라우저는 위쪽에서부터 순서대로 가장 먼저 인식되는 파일 형식과 파일 주소를 사용한다.

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

메소드

<audio>요소의 메소드는 다음과 같다.

메소드	설명
addTextTrack()	오디오/비디오에 새로운 텍스트 트랙을 추가한다.
canPlayType()	브라우저가 특정한 오디오/비디오 타입을 재생할 수 있는 지 확인한다.
load()	오디오/비디오 요소를 다시 로드한다.
play()	오디오/비디오를 재생한다.
pause()	현재 재생중인 오디오/비디오를 멈춘다.

속성

<audio>요소의 속성은 다음과 같다.

특성	타입	설명
src	string	오디오 파일의 경로
autoplay	boolean	true인 경우 전체 오디오 파일의 다운로드를 기다리지 않고, 가능한 빠른 시점에 재생을 시작한다.
controls	boolean	true인 경우 오디오 재생, 볼륨, 탐색, 일시 정지 컨트롤을 브라우저에서 제공한다.
currentSrc	string	현재 오디오의 URL
currentTime	number	오디오의 현재 재생 위치를 반환하거나 설정한다.(초단위)
duration	number	현재 오디오의 길이를 반환합니다.(초단위)
loop	boolean	true인 경우 오디오 반복 재생
preload	boolean	true인 경우 오디오를 재생하기 전에 파일의 내용을 모두 불러옴
muted	boolean	오디오가 음소거인지 아닌지를 반환하거나 설정한다.
paused	boolean	오디오가 멈춰있는지 아닌지를 반환하거나 설정한다.
volume	number	오디오의 볼륨을 반환하거나 설정한다.