Being a Developer: HTML5 Audio

2012/06/18

HTML5 Audio

HTML5 에서는 Audio를 재생할 수 있는 <audio> 태그를 지원해 별도의 작업없이 바로 Audio를 재생할 수 있다.

HTML5 에서 지원하는 Audio 형식은 .mp3 .wav .ogg .m4a 이지만 모든 형식을 모든 브라우저에서 지원하지는 않는다 그렇다고 표준이 정해져 있어 모든 브라우저에서 재생되는 형식도 없다.

ogg와 mp3를 함께 구성해 놓으면 거의 모든 브라우저에서 재생이 가능 하다.

서로다른 형식의 파일을 모두 source 태그에 포함해 두면 지원되는 형식이 재생이 된다.

audio tag는 5가지 속성과 1개의 하위 항목을 가질 수 있다.

audio tag 속성

autoplay

value - autoplay

자동 재생 여부를 설정 한다. "autoplay"로 설정한 경우 페이지 로딩 후 mp3를 재생한다.

controls

value - controls

재생 동작을 조작할 수 있는 제어화면 출력 여부를 설정 한다. Track 및 Volume을 조정할 수 있다.

loop

value - loop

재생 완료 후 다시 재생 여부를 설정 한다. "loop"가 설정된 경우 자동으로 다시 재생을 한다.

preload

value - auto, metadata, none

재생 해야 할 Audio를 미리 읽어들일지 여부를 설정 한다. "auto"로 설정한 경우 페이지 로딩 후 미리 읽기를 한다.

src

value - URL

재생하고자 하는 Audio 파일의 경로를 설정 한다.

Audio tag 의 하위 항목 으로 <source> 를 포함 할 수있다.

<source>는 재생을 하고자 하는 Audio 파일에 대한 자세한 정보를 담고 있다. <audio> 의 속성에 src 있어 지정을할 수 있지만 Audio 파일의 형식을 지정할 수 없어 <source>를 사용하는 것이 좋다.

source tag 속성

media

value - media_query

Audio 리소스의 type 대한 정의라 하는데 거의 사용이 되지 않는 듯 하다.

src

value - URL

재생하고자 하는 파일의 경로를 지정한다.

type

value - MIME_type (audio/aac, audio/mp4, audio/mpeg, audio/ogg, audio/wav, audio/webm)

재생하고자 하는 파일의 형식을 지정한다.

아래 HTML5 소스는 간단하게 MP3 파일을 재생하는 코드이다. audio 태그의 controls 속성만 부여하여 화면에 보이도록 하였다.

<!DOCTYPE html>
<HTML>
    <HEAD>
        <TITLE> HTML5 Audio </TITLE>
    </HEAD>
    <BODY>
        <audio controls="controls">
            <source src="rainymood30a.mp3" type="audio/mpeg" />
            Your browser does not support the audio element.
        </audio>
    </BODY>
</HTML>

이 파일을 Chrome 에서 불러오면 아래와 같은 재생 화면을 볼 수 있다.

&

Original Post : http://neodreamer-dev.tistory.com/663

Being a Developer

2012/06/18

HTML5 Audio

No comments :

Post a Comment

Blog Archive