..

Search

36) 오디오

오디오


오디오(audio)


오디오(audio) 요소

HTML5 이전에는 웹 페이지에서 오디오(audio)를 들려주기 위한 표준안이 없었습니다.

따라서 비디오를 삽입하기 위해서는 플래시(flash)와 같은 외부 플러그인(plug-in)에 의존해야만 했습니다.

하지만 HTML5에서는 <audio>태그를 이용하여 웹 페이지에 오디오를 삽입하는 표준화된 방식을 제공합니다.

 

<audio>태그를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.

요소 ie chrome firefox safari opera
<audio>태그 9.0 4.0 3.5 4.0 10.5

오디오 요소의 속성

예제

<audio controls>

    <source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg">

    <source src="/examples/media/sample_audio_mp3.mp3" type="audio/mp3">

    이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타납니다!

</audio>

코딩연습 ▶

 

control 속성은 재생, 정지 및 소리의 조절 등 오디오의 기본적인 동작을 조절할 수 있는 패널을 생성합니다.

 

웹 브라우저는 여러 개의 <source>태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소를 사용합니다.

<audio>태그 사이에 존재하는 텍스트는 해당 웹 브라우저가 <audio>태그를 지원하지 않을 때만 화면에 표시됩니다.

 

autoplay 속성은 웹 페이지가 로드(load) 될 때 음악을 자동으로 재생시켜 줄지 않을지를 설정합니다.

예제

<audio controls autoplay>

    <source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg">

    <source src="/examples/media/sample_audio_mp3.mp3" type="audio/mp3">

    이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타납니다!

</audio>

코딩연습 ▶

 

loop 속성을 설정하면 오디오의 재생이 끝나도 계속적으로 반복해서 오디오를 재생합니다.

예제

<audio controls loop>

    <source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg">

    <source src="/examples/media/sample_audio_mp3.mp3" type="audio/mp3">

    이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타납니다!

</audio>

코딩연습 ▶


HTML5 오디오 파일 형식

HTML5 표준이 공식적으로 지원하는 오디오 파일 형식은 MP3, WAV, Ogg 뿐입니다.

 

- MP3 : Moving Picture Experts Group에 의해 개발되었으며, MPEG-1의 오디오 규격으로 개발된 손실 압축형 파일 형식입니다.
- WAV : IBM과 Microsoft에 의해 개발되었으며, 개인용 PC에서 오디오를 재생하기 위한 IBM과 Microsoft의 표준 오디오 파일 형식입니다.
- Ogg : Xiph 재단에 의해 개발되었으며, MP3의 대안으로 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식입니다.

 

HTML5 오디오 파일 형식별 주요 웹 브라우저의 지원 여부는 다음 표와 같습니다.

파일 형식

미디어 타입

ie chrome firefox safari opera
MP3 audio/mp3
WAV audio/wav Χ
Ogg audio/ogg Χ Χ

HTML5 audio 요소

요소 설명
audio 오디오와 음악 등 오디오 파일을 명시함.
source

audio 요소의 원본 파일에 대한 파일 형식 및 파일 주소를 여러 개 명시함.

웹 브라우저는 위쪽에서부터 순서대로 가장 먼저 인식되는 파일 형식과 파일 주소를 사용함.


HTML5 audio 속성

속성 설명
src 오디오 파일의 경로를 명시함.
controls

오디오의 기본적인 동작을 조절할 수 있는 패널를 명시함.

autoplay 오디오의 자동 재생 여부를 명시함.
loop 오디오의 반복 재생 여부를 명시함.
preload 오디오를 재생하기 전에 파일의 내용을 모두 불러올지를 명시함.

연습문제