액티브액스가 필요 없는 html5 내장 미디어 - 오디오 태그 사용 방법

오디오 요소와 비디오 요소는 사운드의 재생과 동영상의 재생을 위한 요소입니다.
두 요소 모두 HTML4.01 이전에는 없었고 HTML5에 새로 추가된 요소입니다. 이전 버전의 HTML 문서에서도 사운드 파일과 비디오 파일을 재생할 수 있었습니다. 그러나 이전에는 embed요소와 object 요소를 사용했습니다. 하지만 많은 개발자와 디자이너, 퍼블리셔가 웹표준을 지향하고 공유할 수 있는 웹을 만들고자 하는 시대에 이것들을 하나의 문서가 아닌 플래시나 실버라이트, 미디어플레이어나 퀵타임 플레이어와 같은 외부 플러그인으로 작업하는 것은 장애와도 같은 것이라는 생각이 듭니다.
하지만 html5에서 제공하는 오디오 요소와 비디오 요소를 사용하면 외부의 플러그인을 사용하지 않고 내장된 플레이어로 음악이나 동영상을 감상할 수 있습니다. 이것은 멀티미디어 요소가 웹페이지의 일부분의 되는 것입니다. 이렇게 되면 웹의 기본 정신에도 부합되는 것이고 시맨틱한 웹페이지를 만드는 데 있어서 동영상도 그영역 안에 포함할 수 있게 됩니다.

사운드 재생을 위한 오디오 요소

ie9 익스플로러	firefox 파이어폭스	safari 사파리	chrome 크롬	opera 오페라
9.0 버전부터 지원	3.5 버전부터 지원	3.2 버전부터 지원	3.0 버전부터 지원	10.5 버전부터 지원

가장 기본적인 오디오 요소 사용 예

가장 간단한 사용 방법입니다. 이렇게 하면 사운드를 재생하기 위한 플레이어가 올라와 있는 상태가 됩니다. 하지만 아무런 소리도 들리지 않을 것입니다. wav파일을 가지고 테스트 해보시면 됩니다.

페이지가 열리면 자동으로 사운드 재생

autoplay 속성을 추가해 주면 플레이어는 보이지 않지만 페이지가 로드되자마자 사운드가 재생됩니다.

오디오 태그를 지원하지 않는 브라우저의 경우 에러 문구 출력

오디오 요소가 지원되지 않는 브라우저에서는 소리가 재생되지 않지만 안내문구가 보이게 됩니다.

오디오 태그를 지원하지 않는 브라우저는 embed 태그로 대체 사운드 재생

위와 같이 작성할 경우 오디오 태그를 지원하는 브라우저에서는 오디오 태그를 통해서 사운드를 재생하고, 오디오 태그를 지원하지 않는 구 브라우저는 embed 태그를 통해서 사운드를 재생할 수 있습니다.

컨트롤 패널 보이기

위와 같이 확장 태그를 붙이면 플레이어 컨트롤 패널을 표시할 수 있습니다. controls 속성만 추가하면 플레이어의 모습을 확인할 수 있습니다.

오디오 요소에서 사용할 수 있는 속성

속성명	값	기능 및 역할
src	파일 경로	재생할 사운드 파일의 경로를 지정
autoplay	빈 값, autoplay	페이지가 로드되자마자 사운드를 재생할지 지정
controls	빈 값, controls	플레이어를 표시
loop	재생횟수(숫자)	사운드를 반복 재생할 횟수를 지정, 기본값은 1
preload	none, auto, meta	페이지가 열리면 미리 로드해 둠 none - 프리로드를 사용하지 않음 auto - 페이지가 모드 열리면 비디로를 프리로드 meta - 페이지가 모두 열리면 비디오 메타정보만 로드

오디오 코덱 정리

오디오 코덱은 브라우저마다 지원하는 파일 포멧이 약간씩 다릅니다. 브라우저 지원별 코덱은 아래와 같습니다.

구분	ie9 익스플로러	firefox 파이어폭스	safari 사파리	chrome 크롬	opera 오페라
vorbis(oga, ogg)	지원 안함	지원함	지원 안함	지원함	지원함
wav, wma	지원함	지원함	지원함	지원 안함	지원함
mp3	지원함	지원 안함	지원함	지원함	지원 안함
AAC	지원함	지원 안함	지원함	지원함	지원 안함