1. 오디오태그 <audio>
오디오 태그는 HTML5에서 새로나온 태그입니다.
기존에 쓰던 <embed>태그는 똑같이 오디오&비디오를 삽입 하는 것이 가능했지만,
플러그인에 의존해서 플러그인이 기본적으로 설치되어있지 않은 리눅스나, 크롬 등에서는 곧바로 실행되지 않는 현상등이 있었죠.
이 오디오 태그는 플러그인의 도움 없이 웹 브라우저만으로도 음악 파일을 재생할 수 있게 만들어줍니다.
하지만 HTML5에서 추가된 기능이기에 윈도우 9버전 이상에서만 실행이 됩니다.
웹 브라우저마다 지원하는 버전이 다릅니다.
어짜피 시대의 흐름에 맞춰가야하니까요.
이제부턴 embed보단 audio를 써주세요!
2. 오디오태그의 사용법
오디오태그는 이전 글에서 배운 img(이미지태그)와 사용법이 굉장히 비슷해서 어려울 점은 없을껍니다.
먼저 오디오 태그의 속성을 알려드리겠습니다.
src | 음악 파일의 경로 지정 |
preload | 음악 재생 전에 모두 불러올지 설정 |
autoplay | 음악 자동 재생 설정 |
loop | 음악 반복 설정 |
controls | 음악 재생 도구 출력할것인지 설정 |
이렇게 5가지가 있습니다.
이제 한번 태그를 실행해보죠!
<audio controls="" preload="" autoplay="" loop="">
<source src="http://kurien.tistory.com/attachment/cfile22.uf@27232840525C95EE1D1CD2.mp3" type="audio/mp3"/>
<source src="http://kurien.tistory.com/attachment/cfile4.uf@244BE340525C9635069191.ogg" type="audio/ogg"/>
</audio>
위처럼 하시면 저렇게 바 형태로 해서 음악을 재생 하실 수 있습니다.
source src 옆에는 들어갈 음악파일의 주소를 적어주시면 됩니다.
오토플레이를 없애고 싶다 하시면 autoplay=""를 지워주시면 되요.
하지만 이 audia 태그도 단점이 있는데요,
웹브라우저마다 지원하는 파일 형식이 다릅니다! ㅠㅠ
표로 보여드리자면
| 익스플로러 | 크롬 | 파이어폭스 | 사파리 | 오페라 |
MP3 | O | O | X | O | X |
OGG | X | O | O | O | O |
WAV | X | O | O | X | O |
하아... 모든 브라우저를 지원하는 파일 형식이 없습니다 ㅠ 그 와중에 구글크롬 짱짱
하지만, 제가 올린 태그처럼 OGG파일과 MP3파일을 둘 다 올리시면, 모든 웹브라우저에서 사용이 가능합니다!
솔직히 embed보다 올리기는 귀찮으실 수 있지만,
사용자 입장에선 플러그인이 필요한 것 보다는 모든 환경에서 볼 수 있는 편이 좋다고 생각하는게 제 생각입니다.
MP3파일은 다들 잘 구하시니 생략 하구요. OGG는 어떻게 구하느냐?
다음 팟 인코더를 이용하시면 됩니다.
변환 방법은 아래 링크를 참고하시구요!
살짝 복잡하게 느껴지실 수도 있지만,
보기보단 어렵지 않으니 한번 참고해서 음악 파일을 올려보시는 것도 좋을 것 같네요,
