HTML5 강좌 14강 - HTML5 태그 - audio

HTML5 강좌 14강 - HTML5 태그 - audio

이번 강좌에서는 오디오를 재생하는 플레이어를 만들어보겠습니다.

기존 html 에서는 embed 방식을 사용했는데요.

html5에서 기본적인 오디오 플레이어는 정말 간단합니다.

<audio id="player" src="media/audio_sample.ogg" controls>

</audio>

오디오 태그에 아이디 속성값과 오디오파일 경로를 입력해주면 됩니다.

그리고 마지막에 controls 이라는 속성을 선언해 주면 끝~

*audio 속성

(1)src : 재생할 파일 경로 지정

(2)autoplay : 페이지 로드 시 사운드를 재생할 지 여부 지정

(3)controls : 플레이어 표시

(4)loop : 반복할 재생 횟수

(5)preload : 페이지가 열릴 때 오디오의 로드 설정

-> none : 자동 로드하지 않음, auto : 자동 로드, meta : 오디오의 메타 정보만 로드

그리고 source 요소를 사용하여 좀 더 디테일한 플레이어 설정이 가능합니다.

<audio controls>

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

<source src="media/audio_sample.mp3" type="audio/mpeg"></source>

<p>당신의 브라우저는 audio 요소를 지원하지 않습니다. </p>

</audio>

source 에서 src 속성으로 파일의 경로를 지정해주고 type 속성으로 mime 타입을 지정해 줍니다.

이렇게 설정을 하면 사용자의 브라우저에 따라 지원 가능한 여부가 더욱 확대 되겠죠.

그런데 한가지 유의할 점이 있습니다.

브라우저 마다 지원가능한 파일형식이 있고, 불가능한 파일형식이 있습니다.

그러니 사용자가 문서에 접근했을 때 사용자의 브라우저가 지원하지 않는 브라우저라면 

위와 같이 안내를 해줘야겠죠~

그리고 다음과 같이 버튼을 설정하여 사용할 수도 있습니다.

(1) <button onclick="document.getElementById('player').play()">재생 하기</button> 

(2) <button onclick="document.getElementById('player').pause()">일시 정지</button> 

(3) <button onclick="document.getElementById('player').volume += 0.1">볼륨 +</button> 

(4) <button onclick="document.getElementById('player').volume -= 0.1">볼륨 -</button> 

(1)번에서 (4)번 모두 버튼을 생성해주는 태그입니다.

(1)번 버튼은 

onclick -> 클릭을 했을 경우 

document.getElementById('player') -> 문서에서 player 라는 아이디를 가진 객체를

.play() -> 재생하라

라는 내용입니다.

(1)번에서 (4)번 모두 player 라는 아이디를 가진 객체를 컨트롤 해주는 버튼들이죠.

audio 태그에는 더 많은 기능이 있습니다.

그리고 그 기능들은 자바스크립트 코드로 작성하는게 더욱 깔끔합니다.

하지만 아직 자바스크립트에 대해 생소할 수도 있으니 샘플 페이지만 첨부파일에 넣겠습니다.

샘플 페이지의 코드에서 onclick 에서 지시하는 메소드를 보시고 

자바스크립트에서 선언한 function 문장으로 가서 기능을 보시면 어느정도 이해가 되실 겁니다.

(예제는 첨부파일에서 받을 수 있습니다.)

14.zip