HTML5 Audio

2012. 6. 18. 19:41

HTML5 에서는 Audio를 재생할 수 있는 <audio> 태그를 지원해 별도의 작업없이 바로 Audio를 재생할 수 있다.
HTML5 에서 지원하는 Audio 형식은 .mp3 .wav .ogg .m4a 이지만 모든 형식을 모든 브라우저에서 지원하지는 않는다 그렇다고 표준이 정해져 있어 모든 브라우저에서 재생되는 형식도 없다.

ogg와 mp3를 함께 구성해 놓으면 거의 모든 브라우저에서 재생이 가능 하다.
서로다른 형식의 파일을 모두 source 태그에 포함해 두면 지원되는 형식이 재생이 된다.

audio tag는 5가지 속성과 1개의 하위 항목을 가질 수 있다.

audio tag 속성

autoplay
value - autoplay
자동 재생 여부를 설정 한다. "autoplay"로 설정한 경우 페이지 로딩 후 mp3를 재생한다.
controls
value - controls
재생 동작을 조작할 수 있는 제어화면 출력 여부를 설정 한다. Track 및 Volume을 조정할 수 있다.
loop
value - loop
재생 완료 후 다시 재생 여부를 설정 한다. "loop"가 설정된 경우 자동으로 다시 재생을 한다.
preload
value - auto, metadata, none
재생 해야 할 Audio를 미리 읽어들일지 여부를 설정 한다. "auto"로 설정한 경우 페이지 로딩 후 미리 읽기를 한다.
src
value - URL
재생하고자 하는 Audio 파일의 경로를 설정 한다.

Audio tag 의 하위 항목 으로 <source> 를 포함 할 수있다.
<source>는 재생을 하고자 하는 Audio 파일에 대한 자세한 정보를 담고 있다. <audio> 의 속성에 src 있어 지정을할 수 있지만 Audio 파일의 형식을 지정할 수 없어 <source>를 사용하는 것이 좋다.

source tag 속성

media
value - media_query
Audio 리소스의 type 대한 정의라 하는데 거의 사용이 되지 않는 듯 하다.
src
value - URL
재생하고자 하는 파일의 경로를 지정한다.
type
value - MIME_type (audio/aac, audio/mp4, audio/mpeg, audio/ogg, audio/wav, audio/webm)
재생하고자 하는 파일의 형식을 지정한다.