HTML

웹 페이지에서 여러 개의 오디오 파일을 사용자의 추가 클릭이나 팝업 없이 자동으로 이어서 재생하고 싶은 경우가 있습니다. 이럴 때는 HTML의 <audio> 요소와 JavaScript의 onended 이벤트를 활용하면 간단하게 해결할 수 있습니다.

1. HTML로 오디오 요소 준비하기

먼저 순차적으로 재생할 오디오 요소들을 HTML에 정의합니다. 아래 예시처럼 각각 고유한 id를 부여해 주세요.

<audio id = "one">
    <source src = "new1.mp3" type = "audio/mp3">
</audio>
<audio id = "two">
    <source src = "new2.mp3" type = "audio/mp3">
</audio>

2. JavaScript로 순차 재생 구현하기

다음으로 첫 번째 오디오가 재생을 마쳤을 때 두 번째 오디오가 자동으로 시작되도록 스크립트를 작성합니다.

var one = document.getElementById('one');
one.onended = function() {
    document.getElementById('two').play();
}
one.play();

3. 동작 원리

onended 이벤트는 오디오 재생이 완료되는 순간 자동으로 발생합니다. 따라서 첫 번째 오디오(one)의 재생이 끝나면 콜백 함수 내부에서 두 번째 오디오(two)의 play() 메서드를 호출하여 즉시 다음 곡을 재생하게 됩니다.

핵심 포인트 정리

• <audio> 요소마다 고유한 id를 지정하여 JavaScript로 접근할 수 있게 합니다.
• onended 이벤트 핸들러 안에서 다음 오디오의 play()를 호출합니다.
• 마지막에 첫 번째 오디오의 play()를 실행하면 전체 흐름이 자동으로 이어집니다.

이 방식을 응용하면 세 개 이상의 오디오도 같은 패턴으로 연결하여 플레이리스트처럼 연속 재생하는 기능을 손쉽게 만들 수 있습니다.