HTML5에서 같은 소리를 동시에 두 번 이상 재생하는 방법

HTML5에서 같은 소리를 동시에 여러 번 재생하기

HTML5의 <audio> 요소는 하나의 인스턴스가 한 번에 하나의 사운드만 재생할 수 있다는 제약이 있습니다. 따라서 동일한 소리를 동시에 두 번 이상 재생하려면 <audio> 요소를 복제(clone)한 뒤 각각 재생해야 합니다.

다음 예제는 Google Chrome에서 정상적으로 작동합니다.

var sound = document.getElementById("incomingMessageSound")
var sound2 = sound.cloneNode();
sound.play()
sound2.play()

cloneNode() 메서드는 해당 노드의 복제본을 반환합니다. 이 메서드를 활용하면 원본 오디오 요소와 별개의 새로운 오디오 인스턴스가 생성되므로, 두 개의 사운드를 서로 겹치면서 동시에 재생할 수 있습니다.

이 방식은 채팅 알림음이나 게임 효과음처럼 짧은 시간 안에 같은 소리가 반복해서 울려야 하는 상황에서 특히 유용합니다. cloneNode()를 호출할 때마다 새로운 복제본이 만들어지기 때문에, 필요하다면 세 개 이상의 사운드도 동시에 재생할 수 있습니다.