# Web Audio API

The Web Audio API provides a powerful and versatile system for controlling audio on the Web, allowing developers to choose audio sources, add effects to audio, create audio visualizations, apply spatial effects (such as panning), and much more.

## 1. The Audio Context

Everything happens within an `AudioContext`. It represents an audio-processing graph built from audio modules linked together, each represented by an `AudioNode`.

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

**Note:** Browsers require a user gesture (click, tap) to resume or start the AudioContext to prevent auto-playing audio annoyances.

```javascript
document.querySelector('button').addEventListener('click', function() {
  audioCtx.resume().then(() => {
    console.log('Playback resumed successfully');
  });
});
```

## 2. Audio Nodes

The API uses a modular routing metaphor. You create nodes and connect them together.

*   **Source Nodes:** Where sound comes from (e.g., `OscillatorNode`, `AudioBufferSourceNode`, `MediaElementAudioSourceNode`).
*   **Effect Nodes:** Modify the sound (e.g., `GainNode` (volume), `BiquadFilterNode`, `DelayNode`, `ConvolverNode`).
*   **Destination Node:** Where the sound goes (usually the speakers). Accessed via `audioCtx.destination`.

## 3. The Audio Graph

You connect nodes using the `.connect()` method.

`Source -> Effect -> Destination`

```javascript
// Create an oscillator (source)
const oscillator = audioCtx.createOscillator();

// Create a gain node (volume)
const gainNode = audioCtx.createGain();

// Connect oscillator to gain node
oscillator.connect(gainNode);

// Connect gain node to destination (speakers)
gainNode.connect(audioCtx.destination);
```

## 4. Basic Example: Playing a Tone

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

function playTone() {
  const oscillator = audioCtx.createOscillator();
  const gainNode = audioCtx.createGain();

  oscillator.type = 'sine'; // 'sine', 'square', 'sawtooth', 'triangle'
  oscillator.frequency.setValueAtTime(440, audioCtx.currentTime); // 440Hz (A4)
  
  gainNode.gain.setValueAtTime(0.5, audioCtx.currentTime); // 50% volume

  oscillator.connect(gainNode);
  gainNode.connect(audioCtx.destination);

  oscillator.start();
  oscillator.stop(audioCtx.currentTime + 1); // Stop after 1 second
}
```

## 5. Use Cases

*   **Games:** Sound effects, background music, spatial audio (3D sound).
*   **Music Apps:** Synthesizers, drum machines, sequencers.
*   **Visualizations:** Analyzing frequency data to create visual effects.

[[programming/javascript/vanilla/javascript]]
[[programming/javascript/vanilla/ajax-fetch]]
[[programming/javascript/vanilla/promises-async-await]]