HTML5 오디오 재생 여부 확인 방법

오디오 재생 상태 확인하기

HTML5에서 오디오가 현재 재생 중인지 확인하려면 paused 속성을 활용하면 됩니다. 다음 함수를 사용하면 간단하게 재생 여부를 판단할 수 있습니다.

function isPlaying(audelem) {
    return !audelem.paused;
}

위 코드는 오디오가 재생 중인지 아닌지를 확인하는 역할을 합니다. 오디오 태그에는 paused 속성이 내장되어 있으며, 이 속성은 해당 오디오 또는 비디오가 일시정지 상태인지 여부를 불리언(Boolean) 값으로 반환합니다. 즉, paused가 false를 반환한다면 현재 미디어가 재생 중이라는 의미입니다.

재생/일시정지 토글 기능 구현

버튼 하나로 재생과 일시정지를 번갈아 전환하는 토글 기능도 손쉽게 구현할 수 있습니다.

function togglePause() {
    if(newAudio.paused && newAudio.currentTime > 0 && !newAudio.ended) {
        newAudio.play();
    } else {
        newAudio.pause();
    }
}

위 코드의 동작 방식은 다음과 같습니다. 오디오가 일시정지 상태이면서, 이미 재생된 시간이 존재하고(currentTime > 0), 아직 끝까지 재생되지 않았다면(!newAudio.ended) 재생을 다시 시작합니다. 그 외의 경우에는 오디오를 일시정지 처리합니다.

이처럼 paused, currentTime, ended 속성을 조합하면 사용자 경험을 높이는 직관적인 오디오 컨트롤러를 자바스크립트만으로 간편하게 만들 수 있습니다.