HTML5 Multimedia - Audio Elements

1. Audio Elements

 

- video elements와 비슷하다.

- 별도의 플러그인 설치를 필요로 하지 않는 오디오 자료를 표시

- Control API 제공

 

src	오디오 자원의 경로 지정 <source>사용시 생략
width	표시되는 요소의 넓이
height	표시되는 요소의 높이
controls	컨트롤 패널을 표시함
autoplay	로드되면 자동 재생함
loop	반복 재생함 / loop="3"
type	오디오 코덱 정보를 지정

/* 크로스 브라우징을 위한 문법 */
<audio id="bass" controls>
    <source src="sound/bass.mp3" type="audio/mpeg">
    <source src="sound/bass.ogg" type="audio/ogg">
    <source src="sound/bass.wav" type="audio/wav">
    <a href="sound/bass.mp3">Download bass.mp3</a>
</audio>

* 웹접근성 위배

- 소리가 있는 컨텐츠에 대한 autoplay

- 소리가 있는 컨텐츠에 대한 loop

 

 

 

대표 브라우저 별 사용 가능 확장자

크롬	mp3 / ogg / wav
사파리	mp3 / ogg / wav
익스	mp3
엣지	mp3 / ogg / wav
파이어폭스	mp3 / ogg / wav
오페라	mp3 / ogg / wav

* 브라우저가 코덱을 지원하기 위해서는 비용이 들기 때문에 수시로 변경될 수 있음 (mp4가 비싸다고 한다... tmi)

 

 

* 오디오 파일 컨버터

fairstars_audio_converter.zip

1.86MB