Introduction to Web Audio API: Concepts, Nodes, and Application Cases

The Web Audio API is a high‑level JavaScript API for processing and synthesizing audio on the web. Defined by the W3C Audio Working Group and backed by a C++ engine, it provides rich interfaces for audio effects, visualization, and 3D spatial sound.

Basic Concepts

AudioContext : The core object that manages the creation and connection of all audio nodes.

Modular routing : Audio processing follows a directed‑graph model similar to network routing, where source nodes are connected to destination nodes through intermediate nodes.

AudioNode : Individual processing units generated by an AudioContext, each with a specific function.

Audio routing graph : The directed graph of connected AudioNodes that defines a particular audio processing effect.

Web Audio API Nodes Overview

Audio processing follows the pattern sourceNode → destinationNode . An AudioContext can host multiple source nodes but only one destination node. Intermediate nodes enable visualization, effects, and other processing.

AudioContext : Core object. Example creation: var audioContext = new AudioContext(); Vendor prefixes may be required for compatibility.

sourceNode : Represents audio sources. Three types are supported: MediaElementSource – from HTML5 media tags StreamAudioSource – from navigator.getUserMedia (e.g., microphone) BufferSource – from audio data fetched via XHR

Audio effects filters : DelayNode – creates echo/reverb by delaying the signal. GainNode – controls volume. BiquadFilterNode – provides high‑pass, low‑pass, and band‑pass filtering.

Audio destinations : Final output node. Connection example: audioNode.connect(audioContext.destination);

Data analysis and visualisation : The AnalyserNode supplies time‑ and frequency‑domain data for visualisation.

Splitting and merging audio channels : Nodes for channel separation and recombination, useful for tasks such as vocal removal.

Audio spatialisation : PannerNode positions audio sources in 3‑D space.

Audio processing via JavaScript : ScriptProcessorNode provides raw audio buffers for custom algorithmic processing.

Application Case Studies

Web audio recording and real‑time playback Workflow: obtain a microphone stream with navigator.getUserMedia , feed it to a ScriptProcessorNode for data handling, then route to the destination for live playback. The captured data can be saved as a Blob. ———→ obtain audio data → store → convert to Blob navigator.getUserMedia ———→ ScriptProcessorNode → real‑time playback Alternatively, the MediaRecorder API can be used (see MDN).

Web audio clipping Clipping requires loading the whole audio into a BufferSource via XHR, then using AudioContext.decodeAudioData to obtain an AudioBuffer. The desired segment is played with bufferSource.start(startTime, duration) and the processed segment is saved. Load BufferSource → ScriptProcessorNode → extract clip → save as audio/wav → connect to destination

Online karaoke (K‑song) Two sources are combined: a backing track (ElementSource) and a vocal track recorded via microphone (StreamSource). Both are routed through a ScriptProcessorNode for mixing, then the mixed stream is saved as a Blob or played back. Backing ElementSource Vocal StreamSource ↓ ↓ convert to buffer save as Blob → arrayBuffer ↓ ↓ → merge audio → ↓ ↓ replay save locally Note: Chrome (as of version 56) does not decode Blob data directly; Firefox provides the necessary support.

All source code for the examples is available on GitHub:

https://github.com/zhazhaxia/webAudioApi-testing/tree/master/public

References include MDN documentation for the Web Audio API and MediaRecorder API, the W3C specification, and various tutorial sites.