How to Generate and Control Sound in the Browser Using the Web Audio API

The Web Audio API is a powerful tool for creating and controlling sound directly in the browser. Whether you're building games, interactive media, or experimental music tools, it offers low-level access to audio synthesis, effects, and spatialization. In this guide, you'll learn how to generate sound, control volume and pitch, and create basic oscillators using JavaScript. 1. Getting Started With Web Audio To use the Web Audio API, you need to create an AudioContext, which serves as the main controller for all audio operations. const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); 2. Creating a Simple Tone To generate a sound, create an oscillator node and connect it to the destination (speakers): const oscillator = audioCtx.createOscillator(); oscillator.type = 'sine'; // sine, square, sawtooth, triangle oscillator.frequency.setValueAtTime(440, audioCtx.currentTime); // 440 Hz = A4 oscillator.connect(audioCtx.destination); oscillator.start(); oscillator.stop(audioCtx.currentTime + 2); // play for 2 seconds 3. Adding Volume Control To control the sound's amplitude (volume), insert a gain node between the oscillator and the destination: const gainNode = audioCtx.createGain(); oscillator.connect(gainNode); gainNode.connect(audioCtx.destination); gainNode.gain.setValueAtTime(0.5, audioCtx.currentTime); // 50% volume 4. Making Sound Interactive Let’s trigger a sound on button click: Play Beep function playBeep() { const ctx = new (window.AudioContext || window.webkitAudioContext)(); const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.type = 'square'; osc.frequency.setValueAtTime(523.25, ctx.currentTime); // C5 osc.connect(gain); gain.connect(ctx.destination); gain.gain.setValueAtTime(0.3, ctx.currentTime); osc.start(); osc.stop(ctx.currentTime + 1); // 1 second beep } 5. Controlling Pitch and Timing Use JavaScript intervals to play a sequence of notes: const notes = [261.63, 293.66, 329.63, 349.23]; // C4, D4, E4, F4 let index = 0; function playSequence() { const ctx = new (window.AudioContext || window.webkitAudioContext)(); const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.type = 'triangle'; osc.frequency.setValueAtTime(notes[index % notes.length], ctx.currentTime); osc.connect(gain); gain.connect(ctx.destination); gain.gain.setValueAtTime(0.2, ctx.currentTime); osc.start(); osc.stop(ctx.currentTime + 0.5); // play note for 0.5s index++; } setInterval(playSequence, 600); 6. Next Steps Add filters and effects with BiquadFilterNode or ConvolverNode Build virtual instruments or synthesizers Record user input or microphone with MediaStreamAudioSourceNode Conclusion The Web Audio API unlocks serious creative potential for developers interested in audio. Whether you're making a retro synth or an audio visualizer, you now have the tools to get started. If this post helped you, consider supporting me here: buymeacoffee.com/hexshift

Apr 18, 2025 - 10:33

How to Generate and Control Sound in the Browser Using the Web Audio API

The Web Audio API is a powerful tool for creating and controlling sound directly in the browser. Whether you're building games, interactive media, or experimental music tools, it offers low-level access to audio synthesis, effects, and spatialization. In this guide, you'll learn how to generate sound, control volume and pitch, and create basic oscillators using JavaScript.

1. Getting Started With Web Audio

To use the Web Audio API, you need to create an AudioContext, which serves as the main controller for all audio operations.

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

2. Creating a Simple Tone

To generate a sound, create an oscillator node and connect it to the destination (speakers):

const oscillator = audioCtx.createOscillator();
oscillator.type = 'sine'; // sine, square, sawtooth, triangle
oscillator.frequency.setValueAtTime(440, audioCtx.currentTime); // 440 Hz = A4
oscillator.connect(audioCtx.destination);
oscillator.start();
oscillator.stop(audioCtx.currentTime + 2); // play for 2 seconds

3. Adding Volume Control

To control the sound's amplitude (volume), insert a gain node between the oscillator and the destination:

const gainNode = audioCtx.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);
gainNode.gain.setValueAtTime(0.5, audioCtx.currentTime); // 50% volume

4. Making Sound Interactive

Let’s trigger a sound on button click:

5. Controlling Pitch and Timing

Use JavaScript intervals to play a sequence of notes:

const notes = [261.63, 293.66, 329.63, 349.23]; // C4, D4, E4, F4
let index = 0;

function playSequence() {
  const ctx = new (window.AudioContext || window.webkitAudioContext)();
  const osc = ctx.createOscillator();
  const gain = ctx.createGain();

  osc.type = 'triangle';
  osc.frequency.setValueAtTime(notes[index % notes.length], ctx.currentTime);
  osc.connect(gain);
  gain.connect(ctx.destination);
  gain.gain.setValueAtTime(0.2, ctx.currentTime);

  osc.start();
  osc.stop(ctx.currentTime + 0.5); // play note for 0.5s

  index++;
}

setInterval(playSequence, 600);

6. Next Steps

Add filters and effects with BiquadFilterNode or ConvolverNode
Build virtual instruments or synthesizers
Record user input or microphone with MediaStreamAudioSourceNode

Conclusion

The Web Audio API unlocks serious creative potential for developers interested in audio. Whether you're making a retro synth or an audio visualizer, you now have the tools to get started.

If this post helped you, consider supporting me here: buymeacoffee.com/hexshift