드럼 패드는 왜 클릭 즉시 소리가 날까: 웹 오디오 API 원리

화면의 드럼 패드를 마우스로 누르는 순간 소리가 터져 나옵니다. 클릭과 소리 사이에 뜸을 들이는 느낌이 거의 없어서, 마치 버튼과 스피커가 직접 연결된 것처럼 느껴집니다.

이건 우연이 아닙니다. 브라우저가 클릭이라는 입력을 받아 소리라는 출력을 내보내기까지, 소리를 어떤 방식으로 준비해두느냐에 따라 그 사이의 시간, 즉 레이턴시가 크게 달라지기 때문입니다.

요약 ① 레이턴시는 대부분 "재생 가능한 상태로 준비하는 과정"이 클릭 이후에 끼어들 때 생깁니다. ② Web Audio API는 소리를 작은 처리 노드의 그래프로 다루고, 클릭 시점에는 파라미터 계산과 재생 지시만 내립니다. ③ 이 가상 악기 플레이어는 녹음된 음원 파일 자체를 쓰지 않고, 클릭 순간 코드로 파형을 직접 합성합니다.

클릭과 소리 사이, 레이턴시는 어디서 생기나

레이턴시란 어떤 입력(클릭, 키 입력)이 들어온 시점부터 그 결과인 소리가 실제로 나오는 시점까지 걸리는 시간입니다. 웹에서 소리가 늦게 나온다면 대부분 이 사이에 "재생 가능한 상태로 만드는 과정"이 끼어 있기 때문입니다.

소리 파일을 그때그때 불러와 재생한다고 가정하면, 파일을 내려받는 시간과 압축된 오디오를 사람이 들을 수 있는 파형으로 풀어내는 디코딩 시간이 클릭 뒤에 순서대로 끼어듭니다. 이 과정이 끝나야 소리가 시작되므로, 클릭과 소리 사이에 사람이 알아챌 수 있는 간격이 생깁니다.

Web Audio API는 이 과정을 어떻게 다르게 처리하나

Web Audio API는 소리를 하나의 완성된 파일로 다루지 않습니다. 오실레이터·필터·볼륨 조절 같은 작은 처리 단위(노드)를 연결한 그래프로 다루고, 이 그래프는 AudioContext라는 오디오 전용 시계 위에서 움직입니다.

녹음된 음원 파일을 쓰는 악기 앱이라도, 보통은 페이지가 열릴 때 모든 샘플을 미리 디코딩해서 재생 가능한 상태로 메모리에 올려둡니다. 그러면 클릭 시점에는 이미 풀어놓은 데이터를 노드에 연결해 재생 신호만 보내면 되므로, 그 순간에 새로 디코딩할 필요가 없어집니다.

만약 클릭할 때마다 파일을 새로 불러온다면

반대로 클릭할 때마다 음원 파일을 처음부터 읽어오고 디코딩하는 방식이었다고 가정해봅니다. 클릭 한 번마다 비동기 읽기와 디코딩이 매번 새로 시작되므로, 소리가 나오기까지 지연이 매번 반복됩니다.

여러 박자를 빠르게 연달아 치는 상황이라면 이 지연은 더 두드러집니다. 앞선 클릭의 준비가 끝나기 전에 다음 클릭이 들어오면, 소리가 밀리거나 순서가 꼬여 들릴 수 있습니다.

직접 해보기 →

이 가상 악기 플레이어가 실제로 소리를 만드는 방식

이 도구는 한 걸음 더 나아가, 녹음된 음원 파일 자체를 아예 쓰지 않습니다. 킥 드럼·스네어·하이햇·탐탐과 실로폰 8개 음 모두, 클릭하거나 매핑된 키를 누르는 그 순간에 코드가 파형을 직접 계산해서 만들어냅니다.

킥 드럼은 오실레이터 주파수를 150Hz에서 순식간에 낮춰가는 신호와, 음량을 함께 줄여나가는 조절을 클릭 시점에 조합해서 만듭니다. 스네어와 하이햇은 무작위 값으로 채운 짧은 노이즈 파형을 필터에 통과시켜 만들고, 실로폰은 음마다 정해진 주파수의 파형에 배음을 얹어 타건음을 냅니다.

이 계산은 파일을 읽어오거나 압축을 푸는 작업이 아니라, 숫자 몇 개를 정하고 짧은 배열을 채우는 가벼운 연산입니다. 그래서 클릭과 거의 동시에 끝나버려 사람이 그 시간차를 느낄 틈이 없습니다.

오디오 컨텍스트 자체도 첫 클릭에서 한 번만 만들어지고, 이후의 모든 클릭에서는 이미 만들어둔 컨텍스트를 그대로 재사용합니다. 다만 브라우저 자동재생 정책상 사용자의 입력이 있어야 재생이 풀리기 때문에, 일부 브라우저에서는 페이지에 들어와 처음 소리를 듣기 전 아무 곳이나 한 번 눌러야 할 수 있습니다.

정리

• 레이턴시는 클릭 이후 "재생 가능한 상태로 준비하는 과정"이 끼어들 때 생기는 체감 지연입니다.
• Web Audio API는 소리를 노드 그래프로 다루고, 재생 시점에는 파라미터 계산과 지시만 내립니다.
• 녹음 파일을 쓰는 악기 앱은 보통 페이지 로딩 시점에 샘플을 미리 디코딩해 이 지연을 없앱니다.
• 이 가상 악기 플레이어는 한 걸음 더 나아가 음원 파일 자체 없이, 클릭 순간 오실레이터와 노이즈로 소리를 직접 합성합니다.
• 오디오 컨텍스트를 한 번만 만들고 재사용하는 것도 클릭마다 반복되는 초기화 비용을 없애는 요소입니다.

자주 묻는 질문

레이턴시란 정확히 무슨 뜻인가요?

어떤 입력이 들어온 시점부터 그 결과가 실제로 나타나는 시점까지 걸리는 시간차를 뜻합니다. 이 글에서는 패드를 클릭한 시점과 스피커에서 소리가 실제로 들리는 시점 사이의 간격을 가리킵니다. 이 간격이 짧을수록 클릭과 소리가 동시에 일어난다고 느껴집니다.

이 가상 악기 플레이어는 녹음된 드럼 소리를 재생하나요?

아닙니다. 킥 드럼·스네어·하이햇·탐탐과 실로폰 음 모두 녹음된 음원 파일을 불러오는 방식이 아니라, 클릭하거나 키를 누르는 순간 오실레이터의 주파수 변화와 무작위 노이즈 파형을 코드로 계산해 그 자리에서 합성합니다. 그래서 파일을 불러오는 단계 자체가 없습니다.

왜 페이지에 들어와서 아무 데나 한 번 눌러야 소리가 나나요?

브라우저의 자동재생 정책 때문입니다. 사용자의 클릭 같은 상호작용이 한 번 있어야 오디오 재생이 허용되도록 브라우저가 제한을 두고 있습니다. 이 도구는 첫 상호작용에서 오디오 컨텍스트를 만들거나 재개하고, 이후에는 같은 컨텍스트를 계속 재사용해 소리를 냅니다.

단축키(A·S·D·F, 1~8)를 눌렀는데 소리가 안 나요.

키보드 입력기가 영문 모드가 아닌 경우 자주 발생합니다. 이 도구는 눌린 키의 문자값을 영문 알파벳·숫자와 그대로 비교해 어떤 패드인지 판단하므로, 한글 입력 모드처럼 다른 문자로 인식되면 매핑이 되지 않습니다. 입력기를 영문으로 바꾼 뒤 다시 눌러보시기 바랍니다.