[HTML5] 오디오 태그

 HTML5 에서 가장 바뀐 점이 있다면 HTML 자체에서 멀티미디어를 지원한다는 것 입니다.

예전에는 동영상을 보거나 음악을 듣기 위해서 별도의 프로그램을 설치하여서 그에 의존하여야 하였습니다.

예를 들면 액티브X라던지 어도비 플래시를 사용하여야 했지요.

하지만 HTML5에서는 이를 직접적으로 지원합니다!

1. 오디오 출력

기본적인 태그 형태는 이러합니다.

<audio src="파일주소"></audio>

이런 식으로 하면 페이지에 오디오가 재생되게 됩니다.

오디오 태그에 속성을 부여하게 되면 다양한 설정을 부여할 수 있는데요.

<audio src="파일주소" controls="controls" loop></audio>

위 예시 처럼 속성을 입력할 때 두 가지가 가능합니다.

controls 속성에다가 값으로 controls를 굳이 넣어주셔도 되고, 아니면 그냥 속성만 적어두셔도 정상적으로 적용이 됩니다.

src : 파일 주소를 지정합니다.

controls : 오디오 재생의 컨트롤을 보이게 함.(웹 브라우저 기본 모양으로 출력이 됩니다.

loop : 오디오 재생을 무한 반복 합니다.

preload : 오디오를 페이지를 불러올 때. 같이 불러올지 지정합니다.

autoplay : 자동 재생

오디오 파일에도 다양한 확장자가 있습니다. mp3도 있고 ogg도 있고 wav도 있습니다.

이런 다양한 파일 확장자에 대해서 모든 브라우저가 이들을 지원하는 것은 아닙니다.

그렇다면 지원하지 않는 브라우저에서는 그냥 출력을 못하고 말아야 하는 것은 아닙니다.

여러 확장자의 파일을 준비해두고 웹 브라우저에서 지원하는 파일 형식을 실행해주면 됩니다. 이를 할 수 있는 것이 source 태그 입니다.

다음과 같이 작성하시면 됩니다.

<audio>

    <source src="파일 주소" type="audio/mp3" />

    <source src="파일 주소" type="audio/ogg" />

    <source src="파일 주소" type="audio/wav" />

</audio>

다음과 같이하면 일단 웹 브라우저에서 mp3파일을 재생할 수 있는지 확인 합니다.

확인을 했는데 지원하지 않는다면 ogg파일을 재생할 수 있는지 확인합니다.

만약 지원하지 않으면 wav파일을 재생할 수 있는지 확인하는 방식으로 진행이 되겠지요.

참고로 mp3 확장자는 사용할 때. 일정 재생수 이상이면 돈을 지불해야할 수도 있다라고 합니다.

그래서 보통 ogg파일을 선호하고 권장하는 것 이지요.

혹시 마인크래프트를 해보신 유저라면 왜 흔한 mp3파일이 아니라 음악파일들을 ogg파일로다가 담아뒀는지 아시게 될 겁니다.

mp3 라이센스에 대해서는 해당 웹 주소를 확인해보세요~

http://www.mp3licensing.com/licensees/index.asp