1. Audio
웹사이트를 방문하다 보면 간혹 사운드가 배경에 깔려서 나오거나 플레이가 가능하도록 해놓은 사이트가 있는 것을 보게 됩니다. 일반적으로 웹사이트에서 사용되는 오디오 파일은 mp3, wav, ogg 파일 형식들을 들 수 있는데 mp3, wav 파일 형식은 자주 보아서 그리 낯설지 않을 것입니다만 ogg 파일 형식은 이 책을 통해 처음 보게 되는 분들도 있을 것입니다.
ogg 파일 형식은 비영리 기구인 Xiph.Org Foundation에서 무료 audio, video 파일 형식입니다.
Xiph.Org 재단(Foundation)에서는 ogg 파일이
소리(audio)일 경우 이를 압축하고 해제하는데 사용하는
Vorbis 코덱을 만들었고 비디오(video)일 경우는 압축하고 해제하기 위해서 Theora 코덱을 만들었습니다. 그리고 2007년 이후 Xiph.Org 재단(Foundation)은 ogg 파일 확장자는 단지 소리(audio)만 포함된 오디오 형식에 사용하고 비디오 파일에 대해서는 ogv 형태로
사용하기를 권고하였습니다.
이 정도로 ogg 파일 형식에 대한 설명을 마치며 ogg
파일의 비디오 파일 형식인 ogv 파일 형식을 이용한 동영상 다루는 부분을 video 요소 부분에서 기존의 동영상 파일 형식을 ogv 파일 형태로
변환부터 설명하였으니 해당 부분에서 확인하시기 바라며 ogg 파일 형식에 대해서 보다 구체적인 내용을
알고자 하는 분들은 Xiph.org 재단의 위키(wiki) 페이지(http://wiki.xiph.org/)를 참고하시기 바랍니다.
HTML5를 지원하는 다양한 웹 브라우저들 중 방금 전 언급한 3가지 형태의 파일 형식을
모두 지원하는 브라우저는 아직 없습니다. 따라서 해당 오디오 파일 형식과 유저가 사용하는 웹 브라우저에
따라서 오디오 파일이 재생될 수도 있고 재생되지 않을 수도 있다는 점을 미리 염두에 두면 여러분이 관련 프로그램을 생성할 때 도움이 될 것입니다.
이제 HTML5에서 오디오 파일을 다루는 방법을 알아볼까요?
HTML5에 따라 웹페이지에서 오디오 파일을 실행하는데 사용하는 요소는 audio 요소(Element)로
HTML 태그로는 <audio> 태그로 나타낼 수 있으며 이를 이용하여
간단하게 구현할 수 있습니다. 기본적으로 “aa.mp3” 라는
오디오 파일을 실행하기 위해서는 가장 기본적인 속성인 src 속성을 이용하여 다음과 같이 간단한 한
줄로 가능합니다.
<audio src=”aa.mp3”></audio>
위에서 실행할
오디오 파일을 설정해주는데 사용되는 속성으로 src 속성을 사용했습니다. src 속성에 어떠한 속성들을 이용하여 audio 파일을 사용할
수 있는지 알아봅니다.
W3C에서 현재 진행중인 HTML5 권고안에 보면
audio 요소와 관련하여 다음과 같은 속성들을 정의하고 있으며 이를 통해 오디오 파일을 자동 실행,
반복하여 재생하도록 할 수 있습니다.
|
속성 |
기능 |
|
autoplay |
웹페이지가 로드되고 바로 자동적으로 연주 시작하도록 설정. 속성값은 “autoplay”, “”, 혹은 empty 즉, <audio autoplay> 형태로 사용 가능 |
|
controls |
플레이를 진행할 수 있는 컨트롤이 노출되도록 하는 속성으로 속성값은 “controls”, “” 혹은 empty 형태로 사용 가능 |
|
loop |
오디오 파일을 무한 반복할 때 사용하는 속성 |
|
preload |
오디오 파일이 웹 페이지가 로드될 때 오디오 파일도 전체가 로드되어야 할 지 아니면 부분적, 아니면 아무것도 로드되지 않아야 하는지를 설정해 줄 때 사용하는 속성으로 none, metadata, auto와 같은 값으로 설정될 수 있음. 이 속성은 autoplay와 함께 쓰면 무시됨 |
|
src |
재생할 오디오 파일을 설정하는데 사용. 보통 URL을 사용 |
|
muted |
소리없이 조용하게 재생할 때 사용 |
|
mediagroup |
다수의 오디오 파일을 브라우저에게 함께 링크하도록 하는 속성으로 현재 대부분의 브라우저에서 지원되지 않음 |
1.1 autoplay 속성
이제 autoplay 속성부터 차례대로 알아볼까요? 메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<meta
http-equv="Content-Type" content="text/html;
charset=ko">
<title> 오디오 파일 테스트</title>
</head>
<body>
autoplay 속성을 이용하여 자동으로 연주됩니다.<br>
<audio src="Elephant trumpeting animals.wav"
autoplay></audio>
</body>
</html>
위와 같이 작성을 완료한 후 “audioEx.html”로 저장합니다. Firefox, Chrome 등을 이용하여 실행해보면 의기양양한 코끼리의 소리가 페이지가 로드되고 바로 자동
연주됩니다.
위에서 autoplay 속성을 설정한 형태가 바로
empty 속성값이라는 형태이고 이를 다시 autoplay=””이나 autoplay=”autoplay” 형태로 수정 저장 후 실행해도 역시 정상적으로 동작합니다.
1.2 controls 속성
controls 속성은 audio 파일을 재생하는 컨트롤이 노출되도록 하는 속성으로 controls 속성을
알아보기 위해 위의 코드에서 <body> … </body> 부분을 다음과 같이
수정한 후 실행해봅니다.
<body>
controls 속성을 이용하여 audio 파일 연주<br>
<audio src="Elephant trumpeting
animals.wav" controls></audio>
</body>
위와 같이 수정 저장한 후 Firefox에서 실행한 화면을 나타내면 다음과 같습니다. 물론 Opera나 Chrome에서도
정상적으로 동작하지만 웹 페이지에 나타나는 컨트롤의 모양이 조금씩 다르게 나타납니다.
1.3 loop 속성
loop 속성은 해당 오디오 파일을 무한 반복하는 속성이며 앞서
<body> … </body> 부분을 다음과 같이 수정한 후 실행해봅니다.
<body>
loop 속성을 이용하여
audio 파일 연주<br>
<audio src="Elephant trumpeting
animals.wav" loop controls></audio>
</body>
Opera나 FireFox 등을 이용하여 사이트로 이동한 후 화면에 나타난 컨트롤 버튼의
재생 버튼을 클릭하면 멈춤 버튼을 클릭하지 않는 한 의기양양한 코끼리 울음 소리가 무한 반복됩니다.
1.4 preload 속성
다음으로 preload에 대해서 알아볼까요? preload 속성은 사용자가 사용하는 웹 브라우저로 하여금 해당 오디오 파일에 처리에 대한 힌트를 주는 것으로
다음과 같은 3가지 중 하나의 속성값으로 설정될 수 있습니다.
|
속성값 |
의미 |
|
none |
페이지가 로드될 때 오디오 파일이 로드되지 않아야 할 때 사용 |
|
metadata |
페이지가 로드될 때 메타 데이터만 로드하도록 할 때 사용 |
|
auto |
페이지가 로드될 때 오디오 파일 전체가 로드되어야 할 때 사용. 기본값 |
위의 코드에서 <body> … </body> 부분을 다음과 같이 수정한 후 실행해봅니다.
<body>
preload 속성을 이용하여 audio 파일 연주<br>
<audio src="Elephant trumpeting
animals.wav" preload controls></audio>
</body>
1.5 muted 속성
muted 속성은 오디오
파일을 소리없이 실행하고자 할 때 사용하는 속성으로 “audioEx.html”파일을 메모장으로 열어서 <body> … </body> 블록 내의 모든 코드를 주석 처리(<!-- -->)한 후 다음과 같이 코드를 추가합니다.
<body>
preload 속성을 이용하여 audio 파일 연주<br>
<audio src="Elephant trumpeting
animals.wav" preload controls></audio>
</body>
저장하고 Firefox로 연결하여 재생 버튼을 클릭하면 소리없이 오디오 파일이 재생됩니다.
참고 : 위에서 사용한 "Elephant trumpeting
animals.wav"파일이 아닌 여러분이 가지고 있는 .wav 파일 형태로 사용해도 무난히 실행됩니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 Audio에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 6장 Drag and Drop (0) | 2013.08.08 |
|---|---|
| 2. Video (0) | 2013.08.07 |
| 11.2 픽셀(pixel)에 기반한 이미지 가공(Manipulation) (0) | 2013.08.07 |
| 11. 이미지(Image) (0) | 2013.08.07 |
| 10. 변환(Transformation) (0) | 2013.08.07 |
