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>


audio_sample.jpg

 

 


Video 의 Control 모양과 다르지 않죠? ^^


오늘은 간단히 audio Element 에 대해서 살펴보았습니다.

다음은 가장? 관심이 많으실 Canvas Element 에 대해서 알아보도록 하죠...



HTML5 시리즈 강좌 리스트
[HTML5강좌] 1. HTML5 개요
[HTML5강좌] 2. HTML4 vs HTML5 (1)
[HTML5강좌] 3. HTML4 vs HTML5 (2)
[HTML5강좌] 4. Sementic Element (1)
[HTML5강좌] 5. Sementic Element (2)
[HTML5강좌] 6. Strong Web Form
[HTML5강좌] 7. Rich Text Edit API
[HTML5강좌] 8. Video Element
[HTML5강좌] 9. Audio Element
[HTML5강좌] 10. Canvas Element
[HTML5강좌] 11. Drag & Drop API
[HTML5강좌] 12. Offline Web Application
[HTML5강좌] 13. Communication API
[HTML5강좌] 14. Web Storage
[HTML5강좌] 15. Web SQL Database
[HTML5강좌] 16. Web Worker
[HTML5강좌] 17. Web Socket
[HTML5강좌] 18. Geolocation API
[HTML5강좌] 19. SVG
[HTML5강좌] 20. File API



HTML5 동영상 강좌 리스트
[HTML5 동영상 강좌] 1. HTML 5 개요
[HTML5 동영상 강좌] 2. HTML4 vs HTML5 (1)
[HTML5 동영상 강좌] 3. HTML4 vs HTML5 (2)
[HTML5 동영상 강좌] 4. Sementic Element (1)
[HTML5 동영상 강좌] 5. Sementic Element (2)
[HTML5 동영상 강좌] 6. Strong Web Form
[HTML5 동영상 강좌] 7. Rich Text Edit API
[HTML5 동영상 강좌] 8. Video Element
[HTML5 동영상 강좌] 9. Audio Element
[HTML5 동영상 강좌] 10. Canvas Element
[HTML5 동영상 강좌] 11. Drag & Drop API
[HTML5 동영상 강좌] 12. Offline Web Application
[HTML5 동영상 강좌] 13. Communication API
[HTML5 동영상 강좌] 14. Web Storage
[HTML5 동영상 강좌] 15. Web SQL Database
[HTML5 동영상 강좌] 16. Web Worker
[HTML5 동영상 강좌] 17. Web Socket
[HTML5 동영상 강좌] 18. Geolocation API
[HTML5 동영상 강좌] 19. SVG
[HTML5 동영상 강좌] 20. File API


그럼 행복한 고수되셔요..


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

 

http://www.jumptovb.net





profile