Web Audio API in Practice: Browser-Side Audio Processing Architecture

Web Audio API Architecture

Web Audio API is built on an Audio Graph model—audio data flows through a series of nodes, each performing a specific operation:

AudioBufferSource → GainNode → AnalyserNode → AudioDestination
     (source)         (volume)   (analysis/viz)    (speakers)

Unlike the HTML5 <audio> element, Web Audio API provides low-level, precise audio control.

---

Core Objects

Object	Role	Analogy
AudioContext	Entry point and clock for audio processing	Audio engine
AudioBuffer	Audio data in memory	Audio file
AudioNode	Processing unit	Effect processor / mixer
AudioParam	Animatable parameter	Volume knob

Creating an AudioContext

const ctx = new AudioContext();

// Browser policy: requires user interaction before starting
button.addEventListener('click', () => ctx.resume());

---

Audio Trimming Implementation

ToolsKu's Audio Editor processing flow:

async function trimAudio(file: File, startSec: number, endSec: number) {
  const arrayBuffer = await file.arrayBuffer();
  const audioBuffer = await ctx.decodeAudioData(arrayBuffer);

  const duration = endSec - startSec;
  const sampleRate = audioBuffer.sampleRate;
  const startSample = Math.floor(startSec * sampleRate);
  const endSample = Math.floor(endSec * sampleRate);
  const length = endSample - startSample;

  // Create trimmed buffer
  const trimmed = ctx.createBuffer(
    audioBuffer.numberOfChannels, length, sampleRate
  );

  for (let ch = 0; ch < audioBuffer.numberOfChannels; ch++) {
    const sourceData = audioBuffer.getChannelData(ch);
    const destData = trimmed.getChannelData(ch);
    destData.set(sourceData.subarray(startSample, endSample));
  }

  return trimmed;
}

---

Waveform Visualization

AnalyserNode provides real-time frequency/time domain data:

const analyser = ctx.createAnalyser();
analyser.fftSize = 2048;
source.connect(analyser);
analyser.connect(ctx.destination);

const dataArray = new Uint8Array(analyser.frequencyBinCount);

function drawWaveform() {
  analyser.getByteTimeDomainData(dataArray);
  // Draw waveform on Canvas
  requestAnimationFrame(drawWaveform);
}

---

Audio Formats and Encoding

Format	Browser Decode	Browser Encode	Quality
WAV	✅	✅ (AudioContext)	Lossless
MP3	✅	❌	Lossy
OGG	✅	❌	Lossy
AAC	✅ (Safari)	❌	Lossy
WebM/Opus	✅	✅ (MediaRecorder)	Lossy

Browser encoding capabilities are limited. ToolsKu audio tools primarily handle WAV; the video tool's Extract Audio uses ffmpeg.wasm for MP3/OGG output.

---

Performance Notes

1. AudioContext is a singleton: one page needs only one AudioContext
2. Chunk large files before decoding: audio over 100MB should be split before decodeAudioData
3. Disconnect promptly: call node.disconnect() on unused nodes to free resources
4. OfflineAudioContext: offline rendering without real-time playback performs better

---

Summary

Web Audio API gives the browser professional-grade audio processing. AudioContext graphs, precise AudioBuffer trimming, and AnalyserNode real-time analysis—these primitives combine to support everything from simple editing to complex DSP audio tools.