현재 크롬, 파이어폭스, IE9, 오페라, 사파리 같이 많은 웹브라우저들이 시장 점유율 확보를 위해 각축전을 벌이고 있습니다. 특히 HTML5의 지원이 이를 가속화 시키고 있죠.
HTML5 지원 웹브라우저 세대로 들어서면서 가볍고 간편하게 음악을 올리고 싶어하는 블로거들에게 약간의 희망이 생겼다면 바로 별도의 플레이어나 플래쉬의 도움없이 HTML5 태그를 이용한 음악 재생을 할 수 있다는 겁니다. 바로 아래와 같이 말이죠.
그러나 아직 지원 초기라 단점도 만만치 않은데, 위의 HTML5 오디오 플레이어에서 보시다시피 구글 Blogger와 같은 블로그 사이트에서는 IE9의 HTML5 오디오 플레이어를 지원하지 않아 IE9에서는 HTML5 오디오 플레이어를 볼 수 없다는 문제가 있습니다.
- IE9 HTML5 오디오 지원 – 네이버 블로그, 이글루스
- IE9 HTML5 오디오 미지원 – 다음 블로그, 구글 Blogger
그리고 HTML5 오디오의 현재 최대 단점 중하나는 현재 각 웹브라우저 제작 업체들간에 단합이 이루어져있지 않아 지원되는 포맷이 서로 엇갈린다는데 문제가 있습니다.
또한 안드로이드 계열의 스마트폰이나 태블릿에 탑재된 웹브라우저에서는 이 HTML5 오디오 태그를 아직 지원하지 않고 있으며, 윈도우즈 모바일폰 계열은 차기 제품에 IE9이 탑재될 경우에나 지원 될 것으로 보입니다.
마지막 단점은, 링크된 음악 파일의 주소를 숨기는 기능이 없고, HTML5를 이용한 별도의 플러그인 플레이어를 만들지 않는한 여러곡의 재생은 불가능하다는데 있습니다.
HTML5 오디오 태그 사용 방법
1. 우선 각 블로그의 HTML 편집에서 다음과 같은 태그를 넣어줘야합니다.
<audio src=”음악 파일 주소” controls=”controls”> </audio>
2. 만약 자신의 블로그에서 IE9 HTML5 오디오 플레이어를 지원해주지 않는다거나, 구형 웹브라우저로 접속하는 이들에게 안내 문구를 넣으려면 <audio> </audio> 태그 사이에 다음과 같은 문구를 넣습니다.
<audio src=”음악 파일 주소” controls=”controls”>
이 웹브라우저는 HTML5 오디오 플레이어를 지원하지 않습니다.
</audio>
3. 웹브라우저에서 지원하는 파일 종류에 따라 HTML5 오디오 플레이어가 작동되게 하려면 다음과 같이 태그를 넣습니다. OGG와 MP3를 모두 지원하는 크롬의 경우 첫번째 소스 주소의 음악파일을 재생하게 됩니다.
<audio controls=”controls”>
<source src=”ogg 파일 주소” type=”audio/ogg” />
<source src=”mp3 파일 주소” type=”audio/mpeg” />
이 웹브라우저는 HTML5 오디오 플레이어를 지원하지 않습니다.
</audio>
4. HTML5를 지원 안하는 웹브라우저나 IE9의 HTML5 오디오를 지원하지 않는 웹페이지에서 미디어 플레이어 플러그인을 이용하여 음악을 들을 수 있게 하려면 다음과 같이 embed 태그를 추가로 집어 넣습니다.
<audio controls=”controls”>
<source src=”ogg 파일 주소” type=”audio/ogg” />
<source src=”mp3 파일 주소” type=”audio/mpeg” />
<embed type=”application/x-mplayer2″ filename=”mp3 파일 주소” height=”43″ width=”300″ showcontrols=”1″ autostart=”1″ playcount=”0″ volume=”0″>
</audio>
5. 옵션
※ 이 글은 w3schools.com에 올라와있는 오디오 파트 문서를 기초로 하여 썼습니다.