HTML5 오디오 플레이어에 중지(Stop) 버튼 구현하기

HTML5의 <audio> 요소에는 기본적으로 '중지(Stop)' 기능이 제공되지 않습니다. 하지만 pause() 메서드와 currentTime 속성을 조합하면 재생을 멈추고 처음 위치로 되돌리는 중지 버튼을 손쉽게 만들 수 있습니다.

순수 자바스크립트로 구현하기

다음 코드를 사용하면 HTML5 오디오에 중지 버튼 기능을 추가할 수 있습니다.

function displayStopBtn() {
    var myPlayer = document.getElementsByTagName('audio')[0];
    myPlayer.pause();
    myPlayer.currentTime = 0;
}

코드 설명

• pause(): 현재 진행 중인 오디오 재생을 일시 정지합니다.
• currentTime = 0: 재생 위치를 오디오의 맨 처음(0초)으로 이동시킵니다.

이 두 가지가 함께 동작하면 사용자가 다시 재생 버튼을 눌렀을 때 항상 처음부터 시작되므로, 사실상 완전한 '중지' 버튼과 같은 효과를 냅니다.

jQuery로 구현하기

jQuery를 사용하고 있다면 아래와 같이 더 간결하게 작성할 수도 있습니다.

$("#stopButton").click(function () {
    audio.pause();
    audio.currentTime = 0;
});

위 예제에서는 ID가 stopButton인 버튼을 클릭하면 오디오가 즉시 정지되고 재생 위치가 초기화됩니다. 실제 프로젝트에서는 페이지 내 오디오 요소를 변수에 미리 저장해 두고 재사용하는 방식으로 확장하면 더욱 효율적입니다.