티스토리 뷰
반응형
앞서 video 태그에 대해서 알아봤는데요.
이번에는 HTML5에서 지원하는 audio 태그에 대해서 한번 정리해 보려고 합니다.
그래서 플래시 등과 같은 플러그인으로 처리했었고, 모든 브라우저를 똑같이 지원하지는 못했죠.
그래서 HTML5에서는 표준으로 sound 파일이나 audio 스트림을 재생하기 위한 audio 태그를 정의하게 됩니다.
HTML5의 video 태그에서 지원하는 포맷은 Ogg, MPEG 4, WebM의 세가지라고 했는데요..
audio 태그에서도 3가지 포맷을 지원합니다. Ogg Vorbis, MP3, Wav 포맷이 이에 해당합니다.
현재 각 브라우저별로 지원하는 동영상 포맷은 다음과 같습니다.
Format | IE 8 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 |
---|---|---|---|---|---|
Ogg Vorbis | No | Yes | Yes | Yes | No |
MP3 | No | No | No | Yes | Yes |
Wav | No | Yes | Yes | No | Yes |
audio 태그 활용
HTML5에서 audio를 재생하기 위해서는 다음과 같이 사용하면 됩니다.
<audio src="song.ogg" controls="controls"> </audio> |
전에 살펴본 video 태그와 비슷합니다.
src 속성으로 audio 파일을 지정하고
control 속성을 통해서 "재생", "정지", "볼륨조절"과 같은 기능을 추가해 줍니다.
현재 IE8과 같이 HTML5의 audio 태그를 지원하지 않는 브라우저를 위해서
audio 태그 사이에 다음과 같은 문구를 사용해서 표시해 줄 수 있습니다.
Example
테스트 해보세요 » |
그런데 위와 같이 ogg 파일을 source로 지정하면 FireFox, Opera, Chrome에서만 동작하게 됩니다.
Safari 브라우저에서는 MP3, Wav 포맷을 지원하므로 여러개의 audio 파일을 source로 지정하고 싶을 수도 있습니다.
이런 경우, 다음과 같이
반응형
'XML Developer > HTML5' 카테고리의 다른 글
HTML video 태그의 DOM 지원~ (0) | 2012.02.07 |
---|---|
HTML5를 활용한 블로그 BGM (?) 테스트~ (0) | 2011.12.02 |
HTML5 video 태그 (2) | 2011.02.02 |
HTML5에 추가된 요소들 (2) | 2011.01.20 |
HTML5에 대하여 (0) | 2011.01.18 |
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
TAG
- java
- 웹
- Hadoop
- 자바
- ms
- XML
- mysql
- 통계
- 프로젝트
- 디자인
- 세미나
- 분석
- 모바일
- 하둡
- fingra.ph
- 안드로이드
- 도서
- 아이폰
- 마케팅
- r
- 맥
- 빅데이터
- 자바스크립트
- HTML
- 클라우드
- 구글
- 애플
- 책
- SCORM
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
글 보관함