웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > html

HTML5 audio 태그 사용 예제보기

Last Modified : 2018-01-29 / Created : 2017-09-07
17,350
View Count
HTML5에서 오디오 파일을 재생하는 방법을 알아봅니다. 웹에서 소리 파일을 재생하는 방법으로 audio 태그를 사용할 수 있습니다. 제어 방법은 Video / Audio 대부분 동일합니다. 그럼 아래에서 자세히 알아보세요.





# Audio 태그 사용 예제

만약 test.mp3 소리파일을 재생하는 경우 아래와 같이 사용합니다.
<audio>
  <source src="test.mp3" type="audio/mp3" />
</audio>

<audio> 태그에 사용 가능한 속성은 무엇이 있는지 아래에서 알아봅니다.

  • volume  //  소리의 크기를 결정
  • autoplay // 자동시작
  • muted // 음소거
  • preload // 페이지 로드시 audio를 미리 로딩하기 위함
  • src // 소스파일 경로
  • loop // 반복하여 재생하기
위 속성들을 적용하는 것이 가능합니다. 그럼 아래는 자바스크립트의 이벤트를 제어하는 방법입니다.



# Audio 태그 제어방법, 이벤트

아래는 스크립트를 사용한 audio 파일에 대한 이벤트 제어 방법입니다. 대부분 video 태그와 동일하게 이벤트를 적용할 수 있습니다. 아래는 Audio 태그 이벤트 중에서 가장 많이 사용되는 것들입니다.


! Audio 재생 / 정지 
audio를 시작하거나 정지하는 이벤트입니다. (Play & Pause)

audio.play();  //  Audio 재생하기
audio.pause();  //  Audio 정지하기


! 현재 재생지점, 시간 확인하기


audio.currentTime  //  현재 재생위치 보기
현재 재생지점의 시간을 표시합니다. 이를 사용하여 원하는 지점으로 이동할 수도 있습니다.


! Play 지점 설정하기

원하는 시작 지점을 설정하는 것이 가능합니다.
audio.currentTime = 10;
// Play 시작지점을 10초로 설정


! 볼륨 크기 조절

볼륨의 경우 자바스크립트를 사용해 아래처럼 조작할 수 있습니다.
audio.volume = 0.5;
// 소리 크기를 설정


! 현재 Audio 상태 확인하기

현재의 Audio 상태값을 반환합니다.
audio.readyState;  //  상태값을 숫자로 표시

이처럼 매우 간단하게 조작이 가능합니다. 최근 웹사이트에서 미디어(Media) 사용 비중이 매우 높으므로 매우 중요한 부분 중 하나입니다.

Previous

meta viewport 속성 shrink-to-fit

Previous

[LESS] 여러개의 LESS 파일을 하나의 css로 만드는 방법