본문 바로가기

웹프로그래밍/HTML

HTML5 오디오태그 <audio></audio>

반응형

오디오 태그는 웹브라우저에서 플러그인의 도움 없이 음악을 재생할 수 있게 만들어주는 HTML5 태그 이다.

HTML5에서 추가된 기능이므로 IE8 이하에서는 사용할 수 없다.


audio 태그의 속성

<audio src="Kalimba.mp3" controls="" autoplay="" loop="" preload="auto"></audio>


속성 이름

값 

설명 

src

URL 

음악파일의 경로지정 

controls

"controls", "" , -  

음악 재생 도구를 출력할지 지정 

autoplay 

"autoplay", "", - 

음악을 자동 재생할지 지정 

loop 

"loop", "", - 

음악을 반복할지 지정 

preload

"none", "metadata", "auto" 

음악을 재생하기 전에 모두 불러올지 지정

none : 사용자가 오디오를 필요로하지 않을 것이라고 명시, 미리 다운로드 하지 않음

metadata : 사용자가 오디오를 필요로 하지 않을 것이지만, 기본정보(크기,첫프레임,오디오길이 등)는 가져온다.

auto : 사용자가 비디오를 필요로 하고 미리 다운로드를 한다 (기본값)

 


※브라우저마다 지원하는 오디오 확장자 형식이 다르기 때문에 모든 브라우저에서 오디오태그가 실행 되기 위해서 source 태그를 사용한다.


 

<audio controls="controls">

    <source src="Kalimba.mp3" type="audio/mp3" />

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

</audio>


 *웹브라우저에서 지원하는 음악파일 형식

 

 IE

크롬 

파이어폭스 

사파리 

오페라 

MP3

O 

O 

X 

O 

X 

OGG 

X 

O 

O 

O 

O 

WAV 

X 

O 

O 

X 

 


source 태그의 type 속성을 입력하지 않아도 상관없다. 

하지만 type 속성을 입력하지 않으면 웹브라우저가 음악 파일을 내려받은 뒤에 재생 가능한 파일인지 확인하므로 트래픽이 낭비된다. 

따라서 type 속성을 꼭 지정해준다.

반응형