Web Audio API

Audio processing, sound synthesis, effects, and music applications.

Overview

Web Audio API provides powerful audio processing capabilities.

Key Concepts

• AudioContext — Audio processing environment
• Audio Nodes — Connectable audio processors
• Oscillators — Generate audio signals
• Effects — Filters, gain, reverb
• Analysis — Visualize audio data

Code Examples

<button id="play">Play Tone</button>
<button id="stop">Stop</button>
<canvas id="visualizer" width="800" height="200"></canvas>

<script>
let audioCtx, oscillator, analyser;

document.getElementById('play').addEventListener('click', () => {
  audioCtx = new AudioContext();
  analyser = audioCtx.createAnalyser();
  
  oscillator = audioCtx.createOscillator();
  oscillator.type = 'sine';
  oscillator.frequency.setValueAtTime(440, audioCtx.currentTime);
  
  const gainNode = audioCtx.createGain();
  gainNode.gain.setValueAtTime(0.5, audioCtx.currentTime);
  
  oscillator.connect(gainNode);
  gainNode.connect(analyser);
  analyser.connect(audioCtx.destination);
  
  oscillator.start();
  visualize();
});

document.getElementById('stop').addEventListener('click', () => {
  oscillator?.stop();
});

function visualize() {
  const canvas = document.getElementById('visualizer');
  const ctx = canvas.getContext('2d');
  const bufferLength = analyser.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);

  function draw() {
    requestAnimationFrame(draw);
    analyser.getByteFrequencyData(dataArray);
    
    ctx.fillStyle = 'rgb(0, 0, 0)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    const barWidth = (canvas.width / bufferLength) * 2.5;
    let x = 0;
    
    for (let i = 0; i < bufferLength; i++) {
      const barHeight = (dataArray[i] / 255) * canvas.height;
      
      ctx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
      ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
      
      x += barWidth + 1;
    }
  }
  
  draw();
}
</script>

Practice

Build a simple synthesizer with visualizer using Web Audio API.