[HTML5 연재] HTML5 오디오(Audio)

 |   웹 개발/기술/HTML5

 

 

 

HTML5는 오디오 파일 재생을 위한 표준을 제공합니다.

Web에서의 오디오

 

현재에 이르기까지, 웹페이지에서 오디오 파일을 재생하기 위한 표준은 존재하지 않았습니다.

오늘날 대부분의 사운드 파일은 플래시와 같은 플러그인을 통해 재생됩니다. 이러한 플러그인들은 플러그인을 설치하지 않은 사용자가 파일을 보거나 들을 수 없도록 함으로서 인터넷의 접근성을 악화시켜 왔고, 또한 각종 보안 문제를 일으킴으로서 인터넷 환경을 더욱 복잡하고 위험하게 만들어 왔습니다.

 

HTML5는 이러한 문제들을 해결하기 위해 웹페이지에서 플러그인 없이도 사운드 파일을 바로 재생할 수 있도록 표준적인 새 방법을 정의했습니다. 그 방법이 바로 <audio> 요소(태그)를 사용하도록 하는 것입니다.

 

 

오디오 요소, 웹브라우저 지원 상황


아래와 같은 웹브라우저가 HTML5의 <audio> 요소를 지원합니다.

  • Internet Explorer 9
  • Firefox
  • Opera
  • Chrome
  • Safari


참조: Internet Explorer 8과 이전 버전은 <audio> 요소를 지원하지 않습니다.

 

 

HTML5 오디오 - 어떻게 동작하는가

 

HTML5에서 사운드 파일을 재생하고 싶다면, 아래와 같은 태그만 웹페이지에 넣어주면 됩니다.

<audio controls="controls">

     <source type="audio/ogg" src="Windows_95_Startup_Sound.ogg">

     <source type="audio/mpeg" src="Windows_95_Startup_Sound.mp3">

     당신의 웹브라우저는 audio 요소를 지원하지 않습니다.

</audio>


위 태그가 삽입된 곳에 오디오 재생을 위한 플레이어가 표시될 것입니다.

보시는 바와 같이 audio 태그에 controls 속성을 추가할 경우 재생, 일시정지, 볼륨과 같은 재생 컨트롤들을 화면에 표시해 주게 됩니다.

 

HTML5와 오디오 태그를 지원하지 않는 웹브라우저를 위해 안내 메시지를 표시해 주는것이 좋으므로 <audio> 태그와 </audio> 태그 사이에는 오디오 태그를 지원하지 않는 웹브라우저에서 표시될 메시지를 넣어줘야 합니다.

 

<audio> 태그 안쪽에는 여러개의 <source> 요소를 정의할 수 있습니다. <source> 요소는 실제 오디오 파일에 대한 경로를 지정해 줄 수 있습니다. 여러개의 <source> 요소가 지정되었을 경우, 웹브라우저는 가장 먼저 인식된 지원 가능한 파일 포맷을 가진 <source> 요소의 파일을 재생할 것입니다.

 

 

웹브라우저별 오디오 포맷 지원 상황

 

현재, <audio> 요소를 위해 총 3개의 파일 포맷이 지원되고 있습니다:

  • MP3
  • WAV
  • OGG

 

웹브라우저별 오디오 포맷 지원 상황은 아래와 같습니다.

 

브라우저

 MP3

Wav

Ogg

Internet Explorer 9 YES NO NO
Firefox 4.0 NO YES YES
Google Chrome 6 YES YES YES
Apple Safari 5 YES YES NO
Opera 10.6 NO YES YES

 


HTML5 Audio 태그


태그

설명

<audio>
 오디오 요소(사운드 플레이어)를 정의합니다.
<source>

<video>나 <audio>와 같은 미디어 요소에 대해 여러개의 미디어 자원을 정의할 수 있도록 합니다.



<audio> 태그 속성


속성 값 설명
autoplay autoplay 로드가 끝나자 마자 바로 재생되게 할것인지 자동 재생 여부를 지정합니다.
controls controls

오디오 재생 관련 컨트롤이 표시되어야 할지를 지정합니다. (오디오 재생 관련 컨트롤에는 재생, 정지 버튼등이 있습니다)

loop loop 반복 재생 여부를 지정합니다.
preload auto
metadata
none

오디오가 재생되기 전 파일을 미리 다운로드 해야 할지 그 여부를 지정합니다.

  • auto: 자동으로 다운로드
  • none: 사용자가 컨트롤을 조작하기 전까지 다운로드 금지
  • metadata: 오디오에 대한 부가 정보인 메타 데이터만 가져옴. 사용자가 컨트롤을 조작하면 실제 오디오 부분을 다운로드 하도록 함.

src 주소
 오디오 파일의 주소(URL)을 지정해 줍니다.


<source> 태그 속성


속성 값 설명
media media_query 미디어 자원의 타입을 지정합니다.
src 주소 미디어 파일의 주소(URL)을 지정합니다.
type 마임 타입(MIME type)
 미디어 자원의 마임 타입(MIME Type)을 지정합니다.

 

다음글에선 HTML5 표준에서 제공하는 드래그 앤 드롭 기능에 대해서 살펴 보도록 하겠습니다. ^^