<audio> 태그, 오디오 지원 파일, 오디오의 Media Type, <audio> 태그 형식, <audio> 태그 속성

<audio> 태그

·       MP3, WAV, AIFF 등의 오디오 파일을 웹 페이지에 삽입하여 배경음악이나 효과음 등을 표현하는데 사용하는 태그입니다.

·       HTML5에서 추가된 임베디드 컨텐츠 태그 중 하나

·       여러 개의 오디오 소스를 포함할 수 있습니다.

·       이전에는 <object> 태그를 이용하였는데, HTML5에서 추가된 <audio> 태그는 <object> 태그에 비해 간편하게 경로 및 간단한 속성만으로 오디오 첨부가 가능해졌습니다.

·       예전에는 외부 플러그인스크립트를 추가해서 사운드를 출력했었지만 HTML5에서는 audio태그로 간단히 사운드 출력이 가능합니다.

 

 

오디오 지원 파일

·       해당 브라우저에서 지원하는 오디오 파일 형식을 확인한 후 사용해야 합니다.

·       mp3 형식은 대부분 지원합니다.

 

브라우저	MP3	Wav	Ogg
Chrome	O	O	O
Firefox	O	O	O
Safari	O	O	X
Opera	O	O	O
Internet Explorer	O	X	X

 

 

오디오의 Media Type

파일형식	Media Type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

 

 

<audio> 태그 형식

<audio src="오디오파일경로" 속성="값"></audio>

<audio src="http://www.audiotest.com/test.wav"></audio> <audio controls autoplay> <source src="sample.ogg"> </audio>

 

 

<audio> 태그 속성

속성	설명
src	·       음악 파일의 경로 지정
controls	·       오디오 제어를 위한 컨트롤을 표시하고 싶은 경우 사용(음악 재생도구를 출력)합니다. ·       표시하고 싶지 않은 경우 속성을 입력하지 않으면 표시 되지 않습니다.
autoplay	·       음악을 자동 재생 할지를 지정합니다. ·       페이지 로드시 자동으로 재생할 것인지 설정하며 자동 재생을 원치 않으면 속성을 입력하지 않으면 됩니다
loop	·       음악을 반복 재생 할지를 지정합니다. ·       디폴트는 1번이고, 무한반복하고 싶으면 loop라고 속성을 입력하면 됩니다
preload	·       음악을 재생하기 전에 미리 불러올지 지정합니다.