Web Audio API —inputBuffer.getChannelData()

 

 

 

onaudioprocess 이벤트와 inputBuffer.getChannelData()는 Web Audio API에서 실시간 오디오 데이터를 읽고 분석할 때 꼭 알아야 할 핵심 개념입니다.

이번 글에서는 이 두 가지가 어떻게 동작하고, 어떻게 활용할 수 있는지를 예제와 함께 알아보겠습니다.

 

 

---

🔁 onaudioprocess와 event.inputBuffer

onaudioprocess 이벤트는 오디오 데이터가 처리될 때마다 자동으로 호출됩니다.
그때 event.inputBuffer 안에는 현재 입력된 오디오 프레임(버퍼) 이 들어 있습니다.

 

이 inputBuffer는 AudioBuffer 객체이고, 여기에는 오디오 데이터가 채널별로 저장되어 있습니다.

따라서 getChannelData(channelIndex)를 사용하면 해당 채널의 샘플 데이터 배열(Float32Array) 을 얻을 수 있습니다.

 

 

---

 

📦 getChannelData(channelIndex)란?

• AudioBuffer에서 특정 채널의 오디오 샘플 배열을 반환하는 메서드입니다.
• 결과는 Float32Array 타입이며, 각 값은 -1.0 ~ +1.0 범위의 부동소수(float)입니다.
• 이 배열 하나가 바로 실제 오디오 파형 데이터(진동값) 입니다.

 

 

🧩 전체 구조 예시

const audioCtx = new AudioContext();
const processor = audioCtx.createScriptProcessor(4096, 1, 1);

processor.onaudioprocess = function(event) {
  const inputBuffer = event.inputBuffer;             // 현재 입력 버퍼
  const channelData = inputBuffer.getChannelData(0); // 오디오 샘플 배열(Float32Array)
  console.log(channelData);
};

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    const source = audioCtx.createMediaStreamSource(stream);
    source.connect(processor);
    processor.connect(audioCtx.destination);
  });

 

 

 

🎙️ 실시간 볼륨(RMS) 계산 예시

 

processor.onaudioprocess = function(event) {
  const input = event.inputBuffer.getChannelData(0);
  
  let sum = 0;
  for (let i = 0; i < input.length; i++) {
    sum += input[i] * input[i];
  }

  const rms = Math.sqrt(sum / input.length); // Root Mean Square
  const volume = rms * 1000; // 보기 쉽게 크기 조정

  console.log("현재 볼륨:", volume.toFixed(2));
};

 

 

📌 설명

• getChannelData(0) → 현재 버퍼의 오디오 샘플 배열 가져오기
• 각 샘플(진동값)의 제곱 평균(RMS)을 계산 → 음량 크기(데시벨 유사) 로 변환
• 이 값을 시각화하면 실시간 볼륨 막대(레벨 미터) 를 만들 수 있습니다

 

 

 

🔍 시각적으로 이해하기

getChannelData(0)
   ↓
[0.01, 0.05, 0.02, -0.03, -0.06, ...]  ← 오디오 샘플 데이터
   ↓
음압(진폭) 계산 (RMS)
   ↓
실시간 볼륨 표시 또는 파형 시각화

 

이 값들은 오디오의 진동값(파형 데이터) 이기 때문에,
시간의 흐름에 따라 이 값을 그래프로 그리면 실제 오디오 파형 그래프를 만들 수 있습니다