ENG
더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
HTML5에서 오디오 파일을 재생하는 방법을 알아봅니다. 웹에서 소리 파일을 재생하는 방법으로 audio 태그를 사용할 수 있습니다. 제어 방법은 Video / Audio 대부분 동일합니다. 그럼 아래에서 자세히 알아보세요.
<audio> 태그에 사용 가능한 속성은 무엇이 있는지 아래에서 알아봅니다.
! Audio 재생 / 정지
audio를 시작하거나 정지하는 이벤트입니다. (Play & Pause)
! 현재 재생지점, 시간 확인하기
! Play 지점 설정하기원하는 시작 지점을 설정하는 것이 가능합니다.
! 볼륨 크기 조절볼륨의 경우 자바스크립트를 사용해 아래처럼 조작할 수 있습니다.
! 현재 Audio 상태 확인하기현재의 Audio 상태값을 반환합니다.
이처럼 매우 간단하게 조작이 가능합니다. 최근 웹사이트에서 미디어(Media) 사용 비중이 매우 높으므로 매우 중요한 부분 중 하나입니다.
# Audio 태그 사용 예제
만약 test.mp3 소리파일을 재생하는 경우 아래와 같이 사용합니다.<audio>
<source src="test.mp3" type="audio/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.pause(); // Audio 정지하기
! 현재 재생지점, 시간 확인하기
audio.currentTime // 현재 재생위치 보기
현재 재생지점의 시간을 표시합니다. 이를 사용하여 원하는 지점으로 이동할 수도 있습니다.! Play 지점 설정하기원하는 시작 지점을 설정하는 것이 가능합니다.
audio.currentTime = 10;
// Play 시작지점을 10초로 설정
// Play 시작지점을 10초로 설정
! 볼륨 크기 조절볼륨의 경우 자바스크립트를 사용해 아래처럼 조작할 수 있습니다.
audio.volume = 0.5;
// 소리 크기를 설정
// 소리 크기를 설정
! 현재 Audio 상태 확인하기현재의 Audio 상태값을 반환합니다.
audio.readyState; // 상태값을 숫자로 표시
이처럼 매우 간단하게 조작이 가능합니다. 최근 웹사이트에서 미디어(Media) 사용 비중이 매우 높으므로 매우 중요한 부분 중 하나입니다.
