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

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

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

HTML5 Audio 태그

<audio> 태그 속성

<source> 태그 속성

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