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 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 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>




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] 9. Audio Element  (0) 2011.06.14
[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
Posted by woojja

티스토리 툴바