HTML5 오디오 재생하기

이전 웹 페이지에서 오디오나 비디오를 재생하기 위해서는 embed 요소나 object 요소를 사용하여 외부 플러그인인 플래시나 실버라이트 등을 불러와서 사용하였습니다.

HTML5의 등장으로 외부 플러그인 없이 멀티미디어 구현이 가능하게 되었습니다.

오디오 재생하기

웹 페이지에 오디오를 삽입하기 위해서는 audio 요소를 사용합니다.

audio 요소를 사용할 때에는 src 속성의 값을 지정해야 하고, src 속성의 값으로는 재생할 오디오 파일의 URL이나 파일 경로를 지정한 오디오 파일 이름을 사용합니다.

오디오 재생 형식

형식

<audio src = "오디오 파일 이름"> 지원 불가능한 브라우저에서 표현할 내용 </audio>

예제

embed 요소

플러그인을 사용하여 표시되는 데이터나 동영상을 웹 페이지에 삽입하는 것을 의미합니다.

형식

<embed src = "URL" 속성=값 속성=값 ......>

속성

src, width, height, name, autostart, hidden, loop, volume

예제

audio 요소의 속성

속성	설명
src	재생할 파일 경로를 지정함
autoplay	페이지 로드시 사우드를 재생할지 여부를 지정함
controls	플레이어 표시
loop	반복할 재생 횟수
preload	페이지가 열릴 때 오디오의 로드를 설정함 (none, auto, meta)

audio 요소

audio 요소는 control 속성, autoplay 속성, loop 속성은 값을 따로 지정하지 않아도 같은 동작을 수행합니다.

예제

예제

브라우저별 지원하는 오디오 포맷

	익스플로러	파이어폭스	크롬	사파리	오페라
oga, ogg	X	O	O	X	O
wav, wma	O	O	O	O	O
mp3	O	X	O	O	X
AAC	O	X	O	O	X

source 요소

source 요소는 audio 요소와 vedio 요소의 자식 요소로써, src 속성의 역할을 대신하는 요소입니다.

src 속성은 하나의 값만 지정할 수 있는 반면, source 속성은 audio 요소 사이에 여러 개를 지정할 수 있습니다.

source 요소의 속성

속성	설명
src	재생할 파일 경로를 지정함
type	재생할 파일의 MIME 타입을 지정함
media	재생할 파일을 위한 미디어 쿼리를 지정함

source 요소의 형식

형식

예제

HTML5 오디오 재생 실습 프로그램

저작자표시 비영리 변경금지

'HTML5_CSS_JAVASCRIPT' 카테고리의 다른 글

HTML5 오디오와 비디오 제어하기 (0)	2022.06.04
HTML5 비디오 재생하기 (0)	2022.06.03
HTML5 이미지 삽입하기 (0)	2022.06.01
HTML5 텍스트 삽입하기 (0)	2022.05.31
HTML5 도형 합성하기 (0)	2022.05.30

두리몽실 컴실 복실

HTML5 오디오 재생하기