티스토리 뷰
HTML 멀티미디어 태그 / 오디오 태그
안녕하세요 AimHo 입니다.
이번에는 HTML 멀티미디어 태그 - 오디오 태그에 대해 알아보겠습니다.
멀티미디어태그는 웹 브라우저에서 음악 or 동영상을 재생할 때 사용하며 HTML5에서 추가되었습니다.
현대 웹 브라우저에서 흔하게 접해볼 수 있는 기능들이죠 위 태그들을 사용하지 않아도 플러그인을 사용하면 음악 or 동영상을 재생할 수 있습니다. 그치만 기본적인 문법이니 알고넘어가면 좋습니다!
그러면 오디오 태그부터 살펴보도록 하겠습니다.
오디오 태그
오디오 태그는 플러그인이 없더라도 웹 브라우저에서 음악을 재생할 수 있게 만들어줍니다.
HTML5에 추가된 기능이므로 인터넷 익스플로러8 이하에서는 사용할 수 없습니다. (여기서 다루지는 않지만, JPlayer 같은 간단한 플러그인을 사용하면 구 버
전의 인터넷 익스플로러에서도 플래시를 사용해 음악을 재생할 수 있습니다.)
오디오 태그는 <audio></audio> 태그 형태로 사용됩니다.
오디오 실행에 필요한 속성들은 아래 표와 같습니다.
그러면 직접 코드를 작성해볼까요?
음악을 재생하려면 음악 파일이 있어야 하며, HTML 페이지와 같은 폴더에 위치해야 합니다.
(저는 티스토리 스킨편집에서 음악 파일 하나를 업로드 해두었습니다)
우선 audio 태그를 생성한 후 src와 controls 속성을 지정합니다.
autoplay, preload, loop 속성도 같은 방법으로 입력하면 됩니다.
[참고] 무료 bgm을 다운 받을 수 있는 사이트 링크 남겨놓겠습니다.
아래는 웹 브라우저별 지원 가능한 오디오 파일 형식입니다.
MP3 파일을 사용하자니 오페라가 걸리고 OGG 파일을 사용하자니 인터넷 익스플로러가 걸리네요
이러한 문제를 해결하기 위해 만들어진 태그가 바로 source 태그 입니다.
<출처: http://jeongchul.tistory.com/461>
source 태그는 오디오 or 비디오 태그 안에 입력합니다.
audio 태그 내부에 source 태그를 삽입하면 audio 태그의 src 속성은 사용하면 안됩니다.
바로 코드로 확인하겠습니다!
source 태그의 type 속성을 입력하지 않으면?
웹 브라우저가 음악 파일을 다운 받은 뒤에 재생 가능한 파일인지 확인하므로 트래픽이 낭비됩니다.
따라서 type 속성을 꼭 지정해줍시다.
Tip!) HTML5 게임 개발 시 MP3 파일 사용하면 안좋은 점
MP3 라이선스 정책 때문에 5,000번 이상 재생한 MP3 파일은 2,500 달러를 내야할 수도 있다고 합니다.
