Web Audio API Detection for Browser Audio Processing

Web Audio API Detection

The Web Audio API provides a powerful system for controlling audio in the browser, including generation, processing, analysis, and spatialization. It uses a modular routing architecture with audio nodes.

Detection

const hasWebAudio = typeof AudioContext !== 'undefined'
  || typeof webkitAudioContext !== 'undefined';

Creating an Audio Context

function createAudioContext() {
  const AudioCtx = window.AudioContext
    || window.webkitAudioContext;
  if (!AudioCtx) return null;

  const ctx = new AudioCtx();

  // Resume if suspended (autoplay policy)
  if (ctx.state === 'suspended') {
    document.addEventListener('click', () => ctx.resume(), {
      once: true,
    });
  }

  return ctx;
}

Audio Node Types

Node	Purpose
OscillatorNode	Generate tones (sine, square, etc.)
GainNode	Volume control
BiquadFilterNode	EQ, lowpass, highpass filters
AnalyserNode	FFT data for visualizations
ConvolverNode	Reverb using impulse responses
DynamicsCompressorNode	Dynamic range compression
PannerNode	3D spatial audio positioning

Simple Visualization

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

const data = new Uint8Array(analyser.frequencyBinCount);

function draw() {
  analyser.getByteFrequencyData(data);
  // Render data to canvas
  requestAnimationFrame(draw);
}
draw();

Autoplay Policy

Modern browsers require a user gesture before audio can play. The AudioContext starts in a suspended state and must be resumed after user interaction:

button.addEventListener('click', () => {
  audioContext.resume().then(() => {
    // Audio is now active
  });
});