자바스크립트를 이용한 브라우저의 오디오 재생

13 Oct 2023

브라우저에서 오디오를 재생하는 것은 웹 애플리케이션 개발에서 중요한 요소입니다. 자바스크립트로 브라우저의 오디오를 제어하는 방법을 알아보겠습니다.

HTML audio 요소

HTML5에서는 오디오 재생을 위해 <audio> 요소가 도입되었습니다. <audio> 요소를 사용하면 오디오 파일을 로드하고 재생할 수 있습니다.

<audio id="myAudio" src="audio.mp3"></audio>

위의 코드는 오디오 파일 “audio.mp3”을 로드하는 <audio> 요소를 정의합니다.

자바스크립트로 오디오 재생 제어하기

자바스크립트를 사용하여 <audio> 요소를 제어하려면, 먼저 요소를 선택해야 합니다. 일반적으로 getElementById() 함수를 사용하여 요소를 선택합니다.

const audio = document.getElementById("myAudio");

위의 코드는 ID가 “myAudio”인 <audio> 요소를 선택하여 audio 변수에 할당합니다.

오디오 재생하기

오디오를 재생하기 위해서는 play() 메서드를 호출합니다.

audio.play();

오디오 일시 정지하기

오디오를 일시 정지하기 위해서는 pause() 메서드를 호출합니다.

audio.pause();

오디오 재생 상태 확인하기

오디오의 현재 재생 상태를 확인하기 위해서는 paused 속성을 사용할 수 있습니다. paused 속성은 오디오가 재생 중이면 false를 반환하고, 일시 정지 상태이면 true를 반환합니다.

if (audio.paused) {
  console.log("오디오가 일시 정지 상태입니다.");
} else {
  console.log("오디오가 재생 중입니다.");
}

오디오 이벤트 처리하기

오디오 재생 상태 변화를 감지하고 이를 처리하기 위해 자바스크립트 이벤트를 사용할 수 있습니다. 대표적인 오디오 이벤트로는 “play”, “pause”, “ended” 등이 있습니다.

audio.addEventListener("play", function() {
  console.log("오디오 재생 시작");
});

audio.addEventListener("pause", function() {
  console.log("오디오 일시 정지");
});

audio.addEventListener("ended", function() {
  console.log("오디오 재생 종료");
});

위의 코드는 오디오 재생 상태에 따라 해당 메시지를 출력하는 이벤트 핸들러를 정의합니다.

결론

자바스크립트를 이용하여 브라우저의 오디오를 제어하는 방법을 알아보았습니다. <audio> 요소를 사용하여 오디오를 로드하고, play() 및 pause() 메서드를 사용하여 재생을 제어할 수 있습니다. 이벤트를 활용하여 오디오 재생 상태 변화를 감지하고 이를 처리할 수도 있습니다. 오디오 재생은 웹 애플리케이션에서 중요한 기능 중 하나이며, 자바스크립트를 이용하여 다양한 오디오 재생 기능을 구현할 수 있습니다.