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	O

 

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

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

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