HTML5 오디오태그 <audio></audio>
동그란우주 2012.12.05 15:32오디오 태그는 웹브라우저에서 플러그인의 도움 없이 음악을 재생할 수 있게 만들어주는 HTML5 태그 이다.
HTML5에서 추가된 기능이므로 IE8 이하에서는 사용할 수 없다.
audio 태그의 속성
<audio src="Kalimba.mp3" controls="" autoplay="" loop="" preload="auto"></audio>
속성 이름 | 값 | 설명 |
src | URL | 음악파일의 경로지정 |
controls | "controls", "" , - | 음악 재생 도구를 출력할지 지정 |
autoplay | "autoplay", "", - | 음악을 자동 재생할지 지정 |
loop | "loop", "", - | 음악을 반복할지 지정 |
preload | "none", "metadata", "auto" | 음악을 재생하기 전에 모두 불러올지 지정 none : 사용자가 오디오를 필요로하지 않을 것이라고 명시, 미리 다운로드 하지 않음 metadata : 사용자가 오디오를 필요로 하지 않을 것이지만, 기본정보(크기,첫프레임,오디오길이 등)는 가져온다. auto : 사용자가 비디오를 필요로 하고 미리 다운로드를 한다 (기본값) |
※브라우저마다 지원하는 오디오 확장자 형식이 다르기 때문에 모든 브라우저에서 오디오태그가 실행 되기 위해서 source 태그를 사용한다.
<audio controls="controls">
<source src="Kalimba.mp3" type="audio/mp3" />
<source src="Kalimba.ogg" type="audio/ogg" />
</audio>
*웹브라우저에서 지원하는 음악파일 형식
| IE | 크롬 | 파이어폭스 | 사파리 | 오페라 |
MP3 | O | O | X | O | X |
OGG | X | O | O | O | O |
WAV | X | O | O | X | O |
source 태그의 type 속성을 입력하지 않아도 상관없다.
하지만 type 속성을 입력하지 않으면 웹브라우저가 음악 파일을 내려받은 뒤에 재생 가능한 파일인지 확인하므로 트래픽이 낭비된다.
따라서 type 속성을 꼭 지정해준다.
출처: http://dolly77.tistory.com/29 [interactive]
'유용한 정보' 카테고리의 다른 글
D810 NEF 파일 니콘 캡춰 NX2로 보정해보세요 (0) | 2017.02.21 |
---|---|
액티브액스가 필요 없는 html5 내장 미디어 - 오디오 태그 사용 방법 (0) | 2017.02.20 |
아주 좋은 무료 MP3 파일 다운로드 가능 사이트 (0) | 2017.02.19 |
고양시 지역정보 - 고양소식 2월호(특집) (0) | 2017.02.19 |
유튜브 음악사이트에서 MP3파일 추출 (0) | 2017.02.18 |