HTML5 - 오디오(Audio) 태그를 통해 음악을 첨부해보자

<audio> 태그 하나로 손쉽게 mp3 첨부!

몇년번부터 웹 브라우저 개발사와 W3C 멤버들이 서로 갈라서서 별도의 언어(XHTML, XML 등)를 만들다가 결국은 HTML5라는 이름으로 통합되어 거의 완성단계에 접어들고 있습니다. 이미 아이폰 및 스마트폰 등에서는 HTML5가 도입 되었고, 서서이 구글을 비롯 일부 대형 포털들의 웹사이트 또한 HTML5 언어로 개발되고 있습니다. 게다가 2013년 2월경인가? 그 쯤부터는 웹접근성 준수 위반 사이트에 대해서는 과태료를 부과하기로 되어 있어 큰 난리가 예상입니다.

 전 웹 개발자를 꿈꾸며 부랴부랴 공부하다가 , 공부한 내용 정리할 겸으로 블로그에 포스팅해봅니다. 이번 HTML5 언어가 제정되면서 추가된 <audio> 태그는 경로 및 간단한 속성만으로 금방 음악 첨부가 가능해졌습니다. 그 이전에는 <object> 태그를 이용했는데 뭐 이상한 코드 붙이고 너무 길고 지저분해서 힘들었는데, 이젠 그런 거추장스런 코드 외울 필요가 없어졌습니다.

여러분들은 그저 웹개발툴(메모장 같은거)이랑 음악 파일만 준비해두시면 됩니다!

일단 여러분들이 아주 최소한의 HTML 언어에 대한 기초는 알고 있다고 가정하겠습니다.

물론 모르시거나 내용이 이상하시면 댓글 남겨주시기 바랍니다. ^^

 ☞ 1. 브라우저별 오디오 지원 현황

☞ 출처 및 URL : http://www.findmebyip.com/litmus

 W3C에서 HTML5에 대한 새로운 표준을 정해가던 당시, 오디오 부분에 대해 여러가지 제안들이 나왔습니다. 그 중 ogg, mp3, wav, aac 이렇게 4종류가 쓰이게 됩니다. 웹 브라우저 및 모바일 기기마다 지원하는 종류가 다르다보니 제작자 입장에선 신경쓰일 수 밖에 없을 것입니다.

 그 중 제가 추천하는 2가지 형태의 오디오 파일만 이용하시면 되겠습니다. 바로 ogg와 mp3 인데요. wav는 뛰어난 호환성에 비해 용량이 지나치게 크기 때문에 웹서버에 상대적으로 무리가 갈 수 밖에 없지요? aac는 주로 애플 제품에서 쓰인다고 하는데, 안써봐서 잘은 모르겠습니다.

 ☞ 2. Audio 태그 사용하기

☞ [2-1] <audio> 태그를 이용한 파일 첨부 예제

여기서는 4가지 종류의 음악 파일을 전부 가지고 있다고 가정하고 작성했습니다.

이유는 위에서 언급했듯이 브라우저 및 기기마다 재생이 가능한 파일의 종류가 다릅니다.

 만약 접속자의 웹 브라우저가 mp3파일의 재생을 지원하지 않을 경우,

나머지 3개 중에 지원이 되는 형식을 찾아서 틀어주게 됩니다.

 4개의 형식이 전부 지원이 안될 경우

"현재 이 웹 브라우저 또는 장치에서 html5 의 <audio>태그를 지원하지 않습니다."

라는 문장을 보여주는 코드가 되겠습니다.

 우선 제일 첫번째 줄에 있는 <audio> 태그의 속성에 대해 소개해드리겠습니다.

- src : 음악 파일의 경로를 지정합니다. [2-1]와 달리 1개의 파일만 쓸 때 쓰시면 됩니다.

- controls : 음악 재생시 컨트롤러를 나타낼 것인지를 설정합니다. (true/false)

- autoplay : 자동으로 음악을 재생할 것인지를 설정합니다. (true/false)

- loop : 무한 반복으로 계속 재생할 것인지를 설정합니다. (true/false)

- preload : 자동으로 미리 음악을 읽어올 것인지를 묻습니다. (auto/metadata/none)

▼ [preload] 속성값에 대한 설명 (참조하기)

- auto : 서버에 무리가지 않으면서 최적한 방식으로 미리 다운로딩 하는 경우를 포함합니다.

- metadata : 음악 파일의 메타데이터(크기, 첫 프레임, 트랙 리스트, 길이 등)을 가져옵니다.

- none : 아무것도 미리 가져오지 않습니다. 서버에서 트래픽 최소화 할 때 사용

# 메모장 (Memo)

[1] *.m4a 파일로 변환후 위의 태그를 적용하면 재생이 가능하나

 type="audio/mp3"로 해야 재생이 됩니다. "audio/aac" 나 "audio/m4a"로 해보니 안되네요.

[2] *.aac 파일로 변환후 시도해본 결과 익스플로러10 (윈도8), 크롬에서 작동이 안됩니다.

 type 값을 없개너 "audio/aac" , "audio/mp3", "audio/m4a" 다 안되네요. 뭐가 문제지...?

[3] 자바 스크립트를 통한 <audio> 객체 통제 및 컨트롤러 구현 등이 가능합니다.

그런데, 아직 저도 그 정도는 할줄 모르겠어요. 좀 더 공부해봐야 알듯..

[4] 다음 팟플레이어를 통해 *.mp3 나 *.ogg 파일로 추출하셔도 정상적으로 작동됩니다.

[5] Free Audio Converter 라는 유틸을 통해 음악 파일을 *.aac로 변환 가능합니다.

 ☞ [Link] 참조 링크

☞ W3C Working Draft (한글) : 바로가기

☞ 앱웹을 만드는 사람들의 모음 (네이버카페) : 바로가기

☞ [HTML5 연재] HTML5 오디오 (Sirjhswin님 블로그) : 바로가기

☞ 브라우저의 HTML5 오디오포맷 지원 여부 (박종명님 블로그) : 바로가기

☞ *.aac, *.m4a 구조적 비교 (루든님 블로그) : 바로가기