Web Audio API 딥다이브: 브라우저 오디오의 내부 동작

const audioCtx = new AudioContext();

const audioCtx = new AudioContext(); // state: "suspended"
 
document.getElementById("play")?.addEventListener("click", () => {
  if (audioCtx.state === "suspended") {
    audioCtx.resume();
  }
  // 이제 소리를 낼 수 있습니다
});

// 44.1kHz 스테레오 10초짜리 버퍼 렌더링
const offlineCtx = new OfflineAudioContext(2, 44100 * 10, 44100);
 
// 노드 구성 후...
const renderedBuffer = await offlineCtx.startRendering();

const audioCtx = new AudioContext();
const oscillator = audioCtx.createOscillator();
const gainNode = audioCtx.createGain();
 
oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);
 
oscillator.start();

const osc = audioCtx.createOscillator();
osc.type = "sawtooth"; // sine, square, sawtooth, triangle
osc.frequency.value = 440; // A4 음
osc.connect(audioCtx.destination);
osc.start();
osc.stop(audioCtx.currentTime + 1); // 1초 후 정지

const response = await fetch("/samples/drum.wav");
const arrayBuffer = await response.arrayBuffer();
const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer);
 
const source = audioCtx.createBufferSource();
source.buffer = audioBuffer;
source.loop = true;
source.playbackRate.value = 1.5; // 1.5배속
source.connect(audioCtx.destination);
source.start();

const audioEl = document.querySelector("audio") as HTMLAudioElement;
const source = audioCtx.createMediaElementSource(audioEl);
source.connect(audioCtx.destination);

const source = audioCtx.createBufferSource();
const filter = audioCtx.createBiquadFilter();
const gain = audioCtx.createGain();
const compressor = audioCtx.createDynamicsCompressor();
 
filter.type = "lowpass";
filter.frequency.value = 1000;
gain.gain.value = 0.8;
 
source.connect(filter);
filter.connect(gain);
gain.connect(compressor);
compressor.connect(audioCtx.destination);
 
source.buffer = audioBuffer;
source.start();

const gain = audioCtx.createGain();
 
// 특정 시간에 즉시 값 변경
gain.gain.setValueAtTime(0, audioCtx.currentTime);
 
// 선형으로 서서히 변화 (페이드 인)
gain.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 2);
 
// 지수적으로 변화 (더 자연스러운 감쇠)
gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 4);
// 주의: 목표값이 0이면 안 됩니다. 0에 가까운 값(0.01)을 사용합니다.

function triggerNote(
  osc: OscillatorNode,
  gain: GainNode,
  now: number
) {
  // Attack: 0에서 1로 빠르게 올림
  gain.gain.setValueAtTime(0, now);
  gain.gain.linearRampToValueAtTime(1, now + 0.02);
 
  // Decay + Sustain: 1에서 0.3으로 감쇠
  gain.gain.linearRampToValueAtTime(0.3, now + 0.1);
 
  // Release: 0.3에서 0으로
  gain.gain.linearRampToValueAtTime(0, now + 0.5);
 
  osc.start(now);
  osc.stop(now + 0.5);
}

async function loadAudio(url: string): Promise<AudioBuffer> {
  const response = await fetch(url);
  const arrayBuffer = await response.arrayBuffer();
  return audioCtx.decodeAudioData(arrayBuffer);
}
 
const kickBuffer = await loadAudio("/samples/kick.wav");

const analyser = audioCtx.createAnalyser();
analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount; // fftSize / 2 = 128
const dataArray = new Uint8Array(bufferLength);
 
source.connect(analyser);
analyser.connect(audioCtx.destination);
 
function draw(ctx: CanvasRenderingContext2D, width: number, height: number) {
  requestAnimationFrame(() => draw(ctx, width, height));
 
  analyser.getByteFrequencyData(dataArray); // 0~255 범위
 
  ctx.fillStyle = "#000";
  ctx.fillRect(0, 0, width, height);
 
  const barWidth = width / bufferLength;
 
  for (let i = 0; i < bufferLength; i++) {
    const barHeight = (dataArray[i] / 255) * height;
    ctx.fillStyle = `hsl(${(i / bufferLength) * 360}, 80%, 50%)`;
    ctx.fillRect(i * barWidth, height - barHeight, barWidth - 1, barHeight);
  }
}

const analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
 
function drawWaveform(ctx: CanvasRenderingContext2D, width: number, height: number) {
  requestAnimationFrame(() => drawWaveform(ctx, width, height));
 
  analyser.getByteTimeDomainData(dataArray); // 0~255 범위 (128 = 무음)
 
  ctx.fillStyle = "#000";
  ctx.fillRect(0, 0, width, height);
  ctx.lineWidth = 2;
  ctx.strokeStyle = "#0f0";
  ctx.beginPath();
 
  const sliceWidth = width / bufferLength;
 
  for (let i = 0; i < bufferLength; i++) {
    const v = dataArray[i] / 128.0;
    const y = (v * height) / 2;
    if (i === 0) ctx.moveTo(0, y);
    else ctx.lineTo(i * sliceWidth, y);
  }
 
  ctx.stroke();
}

// white-noise-processor.ts
class WhiteNoiseProcessor extends AudioWorkletProcessor {
  process(
    _inputs: Float32Array[][],
    outputs: Float32Array[][],
    _parameters: Record<string, Float32Array>
  ): boolean {
    const output = outputs[0];
 
    for (const channel of output) {
      for (let i = 0; i < channel.length; i++) {
        channel[i] = Math.random() * 2 - 1;
      }
    }
 
    return true; // true = 계속 실행
  }
}
 
registerProcessor("white-noise-processor", WhiteNoiseProcessor);

await audioCtx.audioWorklet.addModule("/white-noise-processor.js");
 
const noiseNode = new AudioWorkletNode(audioCtx, "white-noise-processor");
noiseNode.connect(audioCtx.destination);

class GainProcessor extends AudioWorkletProcessor {
  static get parameterDescriptors() {
    return [
      {
        name: "customGain",
        defaultValue: 1.0,
        minValue: 0,
        maxValue: 2,
        automationRate: "a-rate", // 샘플 단위 정밀도
      },
    ];
  }
 
  process(
    inputs: Float32Array[][],
    outputs: Float32Array[][],
    parameters: Record<string, Float32Array>
  ): boolean {
    const input = inputs[0];
    const output = outputs[0];
    const gainValues = parameters.customGain;
 
    for (let ch = 0; ch < output.length; ch++) {
      for (let i = 0; i < output[ch].length; i++) {
        // a-rate: gainValues.length === 128 (매 샘플마다 다른 값)
        // k-rate: gainValues.length === 1 (블록 전체에 동일 값)
        const gain = gainValues.length > 1 ? gainValues[i] : gainValues[0];
        output[ch][i] = input[ch][i] * gain;
      }
    }
 
    return true;
  }
}
 
registerProcessor("gain-processor", GainProcessor);

const gainParam = gainNode.parameters.get("customGain");
gainParam?.linearRampToValueAtTime(0, audioCtx.currentTime + 2);

const panner = audioCtx.createStereoPanner();
panner.pan.value = -1; // -1 = 왼쪽, 0 = 중앙, 1 = 오른쪽
 
source.connect(panner);
panner.connect(audioCtx.destination);
 
// 2초에 걸쳐 왼쪽에서 오른쪽으로 이동
panner.pan.linearRampToValueAtTime(1, audioCtx.currentTime + 2);

const panner = audioCtx.createPanner();
panner.panningModel = "HRTF"; // 더 사실적 (CPU 높음). "equalpower"는 가벼움
panner.distanceModel = "inverse";
panner.refDistance = 1;
panner.maxDistance = 100;
panner.rolloffFactor = 1;
 
// 소리 원의 3D 위치 설정
panner.positionX.value = 5;
panner.positionY.value = 0;
panner.positionZ.value = -3;
 
// 청취자 위치 (AudioContext당 하나)
const listener = audioCtx.listener;
listener.positionX.value = 0;
listener.positionY.value = 0;
listener.positionZ.value = 0;
 
source.connect(panner);
panner.connect(audioCtx.destination);