HTML5 audio 태그

앞서 video 태그에 대해서 알아봤는데요.
이번에는 HTML5에서 지원하는 audio 태그에 대해서 한번 정리해 보려고 합니다.

그래서 플래시 등과 같은 플러그인으로 처리했었고, 모든 브라우저를 똑같이 지원하지는 못했죠.
그래서 HTML5에서는 표준으로 sound 파일이나 audio 스트림을 재생하기 위한 audio 태그를 정의하게 됩니다.

HTML5의 video 태그에서 지원하는 포맷은 Ogg, MPEG 4, WebM의 세가지라고 했는데요..
audio 태그에서도 3가지 포맷을 지원합니다. Ogg Vorbis, MP3, Wav 포맷이 이에 해당합니다.

현재 각 브라우저별로 지원하는 동영상 포맷은 다음과 같습니다.

Format	IE 8	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis	No	Yes	Yes	Yes	No
MP3	No	No	No	Yes	Yes
Wav	No	Yes	Yes	No	Yes

audio 태그 활용

HTML5에서 audio를 재생하기 위해서는 다음과 같이 사용하면 됩니다.

<audio src="song.ogg" controls="controls"> </audio>

전에 살펴본 video 태그와 비슷합니다.
src 속성으로 audio 파일을 지정하고
control 속성을 통해서 "재생", "정지", "볼륨조절"과 같은 기능을 추가해 줍니다.

현재 IE8과 같이 HTML5의 audio 태그를 지원하지 않는 브라우저를 위해서
audio 태그 사이에 다음과 같은 문구를 사용해서 표시해 줄 수 있습니다.

Example <audio src="song.ogg" controls="controls"> 브라우저가 audio 태그를 지원하지 않습니다. </audio> 테스트 해보세요 »

그런데 위와 같이 ogg 파일을 source로 지정하면 FireFox, Opera, Chrome에서만 동작하게 됩니다.
Safari 브라우저에서는 MP3, Wav 포맷을 지원하므로 여러개의 audio 파일을 source로 지정하고 싶을 수도 있습니다.
이런 경우, 다음과 같이 를 여러 개 지정하게 되면 브라우저는 순서대로 체크해서 실행가능한 포맷일때 화면에 audio를 재생하게 됩니다.

Example <audio controls="controls">   <source src="song.ogg" type="audio/ogg" />   <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> 테스트 해보세요 »

IE8에서는 audio 태그를 지원하지 않지만 IE9부터는 지원할 예정이라고 합니다.

audio 태그 속성들
마지막으로 audio 태그에서 사용할 수 있는 속성들에 대해 정리해 봅니다.

Attribute	Value	Description
autoplay	autoplay	Specifies that the audio will start playing as soon as it is ready.
controls	controls	Specifies that controls will be displayed, such as a play button.
loop	loop	Specifies that the audio will start playing again (looping) when it reaches the end
preload	preload	Specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present.
src	url	Specifies the URL of the audio to play

이상으로 HTML5의 audio 태그에 대해 정리해 봤습니다.
앞서 설명한 video 태그와 큰 차이가 없는 듯 합니다.
핵심 내용이나 예제는 http://www.w3schools.com/ 을 참조했네요..

그럼 좋은 하루 되세요.