Audio Element 도 HTML 5 에서 관심이 주목되고 있는 새롭게 추가된 element 들 중 하나죠.
Audio Element 도 video Element 와 그 사용법은 다르지 않습니다.
큰 차이점이라면... Poster 속성이 없다는 것!!! 입니다.
그럼 기본적인 사용방법을 살펴보겠습니다.
<audio src="http://www.w3schools.com/html5/horse.ogg"></audio>
그럼 여기에...
audio file 을 자동적으로 재생시키려면...
<audio src="http://www.w3schools.com/html5/horse.ogg" autoplay></audio>
또는
<audio src="http://www.w3schools.com/html5/horse.ogg" autoplay="autoplay"></audio>
또는
<audio src="http://www.w3schools.com/html5/horse.ogg" autoplay="autoplay"></audio>
이렇게 하면 되겠습니다.
Audio Element 도 Video Element 처럼 Web Browser 가 Audio Element 를 지원하느냐에 따라 실행여부를 알 수 있는데..
Web Browser 가 Audio Element 를 지원하지 않을 때 특정 문구를 표시할 수 있도록 지원 시킬수 있습니다.
<audio src="http://www.w3schools.com/html5/horse.ogg" autoplay>
<p>Your browser does not support audio tag</p>
</audio>
Audio Element 도 Vedio Element 와 같이 재생 control 을 표시할 수 있습니다.
<audio src="http://www.w3schools.com/html5/horse.ogg" controls></audio>
또는
<audio src="http://www.w3schools.com/html5/horse.ogg" controls="controls"></audio>
또는
<audio src="http://www.w3schools.com/html5/horse.ogg" controls="controls"></audio>
다음은 Audio Element 가 사용할 수 있는 속성들을 소개하겠습니다.
속성명 | 값 | 기능 |
src | 파일 경로 | Source |
autoplay | autoplay | 페이지가 Load 되자마자 사운드를 재생할지를 지정합니다. |
controls | controls | 플레이어를 표시합니다. |
loop | 재생횟수 | audio 를 반복 재생할 횟수를 지정합니다. |
preload | none, auto, meta | Page 가 열리면 audio 를 미리 Load 합니다. |
음... 이번엔 audio Element 가 지원하는 Audio 코덱들을 살펴보도록 하겠습니다.
IE | FireFox | Opera | Chrome | Safari | |
Vorbis(oga, ogg) | X | O | O | O | X |
wav, wma | O | O | O | X | O |
mp3 | O | X | X | O | O |
AAC | O | X | X | O | O |
마지막으로 Control 의 모양을 한번 보도록 하죠...
<audio controls="controls" id="ado">
<source src="http://test2.momac.net/html5/demo_audio/youaremylife_instrumental.mp3"/>
<source src="http://test2.momac.net/html5/demo_audio/youaremylife_instrumental.ogg"/>
<source src="http://test2.momac.net/html5/demo_audio/youaremylife_instrumental.wav"/>
<p>Your browser does not support the audio tag.</p>
</audio>
<source src="http://test2.momac.net/html5/demo_audio/youaremylife_instrumental.mp3"/>
<source src="http://test2.momac.net/html5/demo_audio/youaremylife_instrumental.ogg"/>
<source src="http://test2.momac.net/html5/demo_audio/youaremylife_instrumental.wav"/>
<p>Your browser does not support the audio tag.</p>
</audio>
Video 의 Control 모양과 다르지 않죠? ^^
오늘은 간단히 audio Element 에 대해서 살펴보았습니다.
다음은 가장? 관심이 많으실 Canvas Element 에 대해서 알아보도록 하죠...
그럼 행복한 고수되셔요..
woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
반응형
'Web > HTML 5' 카테고리의 다른 글
[HTML 5] 11. Drag & Drop API (0) | 2011.06.18 |
---|---|
[HTML 5] 10. Canvas Element (2) | 2011.06.18 |
[HTML 5] 8. Video Element (3) | 2011.06.10 |
[HTML 5] 7. Rich Text Edit API (0) | 2011.06.08 |
[HTML 5] 6. Strong Web Form (0) | 2011.06.05 |