Web Audio API — createMediaStreamSource, createScriptProcessor

웹에서 마이크 입력을 받아서 실시간으로 오디오 데이터를 분석하거나 가공하려면
Web Audio API의 두 가지 기능을 꼭 알아야 합니다.

바로 👉 createMediaStreamSource() 와 createScriptProcessor() 입니다.

 

 

 

🎙️ 1. createMediaStreamSource(stream)

✅ 역할

createMediaStreamSource()는
getUserMedia()로 얻은 MediaStream(마이크 입력) 을 Web Audio API의 AudioNode로 변환해주는 메서드입니다.

 

즉, 브라우저의 마이크 입력을 Web Audio 파이프라인으로 끌어오는 역할이에요.

 

💡 예시 코드

const audioContext = new AudioContext();

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    const source = audioContext.createMediaStreamSource(stream);
    source.connect(audioContext.destination); // 스피커로 바로 출력
  });

 

이렇게 하면 마이크 소리가 그대로 스피커로 출력됩니다.

 

 

 

⚙️ 2. createScriptProcessor(bufferSize, inputChannels, outputChannels)

 

✅ 역할

createScriptProcessor()는 오디오 데이터를 JavaScript 코드로 직접 처리할 수 있게 해주는 노드입니다.

 

 

⚠️ 단, 이 메서드는 현재 Deprecated(폐기 예정) 상태입니다.
최신 방식은 AudioWorklet을 사용하는 것입니다.
하지만 기존 코드나 예제에서는 여전히 자주 등장합니다.

 

 

💡 예시 코드

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

processor.onaudioprocess = function(event) {
  const input = event.inputBuffer.getChannelData(0);
  console.log("오디오 데이터:", input);
};

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

 

이 코드는 마이크 입력을 받아서 onaudioprocess 이벤트 안에서 실시간 오디오 샘플 데이터(Float32Array) 를 가져옵니다.

 

이 데이터를 이용하면 다음과 같은 기능을 만들 수 있어요:

• 실시간 볼륨(음량) 측정
• 파형 시각화 (Visualizer)
• 음성 감지 (VAD, Voice Activity Detection)

 

 

 

🔄 3. 둘의 관계

 

구성 요소역할

 

createMediaStreamSource	마이크 입력을 AudioNode로 변환
createScriptProcessor	오디오 데이터를 JS에서 실시간 처리

 

 

이 둘을 연결하면 다음과 같은 흐름이 됩니다 👇

 

[마이크 입력 stream]
        ↓
createMediaStreamSource()
        ↓
createScriptProcessor()  ← 오디오 분석 / 가공
        ↓
destination (스피커 또는 무출력)

 

 

 

 

🚀 4. AudioWorklet — 최신 대체 기술

 

createScriptProcessor는 AudioWorklet으로 대체되었습니다.
AudioWorklet은 더 빠르고 안정적이며, 오디오 프레임을 별도의 스레드에서 처리합니다.

간단히 구조만 보면 이렇게 됩니다.

await audioContext.audioWorklet.addModule('processor.js');
const workletNode = new AudioWorkletNode(audioContext, 'my-processor');

 

• processor.js 안에 오디오 처리 로직을 작성하고
• 메인 스레드에서 AudioWorkletNode로 연결하면 됩니다.

 

 

 

✨ 한 줄 요약

🎧 createMediaStreamSource는 마이크 입력을 연결,
createScriptProcessor는 그 오디오 데이터를 직접 다루는 역할을 한다.
최신 브라우저에서는 AudioWorklet으로 대체되는 추세다.