Web Audio API Tutorial: Introduction and Core Concepts

The GainNode controls volume and serves as fundamental routing points where multiple signals can mix automatically, enabling sub-mixes for effects, music, and master output. The DelayNode creates echo effects by delaying audio signals, with feedback loops through gain nodes creating fading echoes. Multiple delays can create multi-tap or ping-pong effects. The RealtimeAnalyserNode enables visualization of audio signals, providing frequency data (split across Nyquist frequency) and waveform data for debugging and visualization. Filter nodes process audio in the frequency domain, including Lowpass, Highpass, Bandpass, Lowshelf, Highshelf, Peaking, Notch, and Allpass types. Key parameters are frequency and Q (quality/resonance), enabling automation and real-time modulation. The AudioPannerNode enables 3D spatial audio positioning with position, orientation, and velocity properties. The AudioListener represents the listener's position in the audio scene. Velocity creates Doppler effects where moving sounds change pitch relative to the listener.

By default, the camera listens to 3D audio. If you want audio to come from somewhere else than where the eyes are, use AudioListener3D to set up a listening point anywhere in the scene, enabling independent audio positioning from visual camera placement.

Beyond position, audio listener orientation must be configured using forward and up vectors to enable proper spatial panning between speakers. The forward vector is calculated as the difference between the target point and the listener's current position. The up vector typically uses (0,0,1) but may require adjustment based on coordinate system conventions. GameMaker's default audio listener orientation is inverted compared to standard expectations, which can cause sounds to appear coming from incorrect speakers if not properly configured. This orientation system mirrors how cameras are oriented in 3D space.

Spatial audio in web browsers uses the Web Audio API's PannerNode to position and direct audio sources in 3D space, requiring an audio listener (camera-like component) and audio objects (positional sources) that can be moved and rotated; key parameters include inner/outer cone angles for directional audio beams, panning modes (equal power for natural stereo or binaural for headphone-based 3D), and distance models (inverse, exponential, linear) that control how volume changes with distance from the listener, enabling immersive audio experiences where sound appears to come from specific locations in space.

Binaural panner is an advanced spatial audio tool in Logic Pro that creates 3D sound positioning beyond traditional left-right stereo, allowing sounds to be placed anywhere in a virtual space including behind, above, or below the listener, with additional controls for sound size, spread, reflection angles, and Doppler effect to create immersive audio experiences.

The oscillator mixer blends multiple voices with pan controls and ring modulation for metallic timbres. Two identical filters (with routing options) provide cutoff, resonance, key tracking, and drive controls, featuring types from clean filters to aggressive Low-Pass 60. Effects buses process signals through distortion, EQ, phaser, chorus, delay, reverb, and compressor stages that can be reordered. This layered signal processing architecture enables sophisticated sound design through strategic routing and effect sequencing.

Synthesizer sounds are built from four patches (A, B, C, D). Oscillators generate sound through samples (recorded audio) or synths (waveforms like sine, sawtooth, triangle). Waveform shaping and FM synthesis modulate frequencies for complex timbres. Harmonia adds intervals like perfect fifths (+7 semitones) or octaves (+12 semitones). Filters shape frequency content: low-pass removes highs, high-pass removes lows, band-pass isolates ranges. Advanced routing allows parallel or serial filter configurations for complex frequency shaping.

A complete synthesizer combines multiple components: two oscillators (square and sawtooth) for rich sound, ADSR envelope for shaping notes, gain nodes for mixing, filter for frequency shaping, pan for spatial positioning, and final gain for overall volume. Each note requires creating new oscillator nodes. The signal flows from oscillators through envelope shaping, filtering, and spatial processing. Continuous parameter changes (oscillating frequency, amplitude, filter cutoff) create richer, more interesting sounds.

The oscillator is the fundamental origin of sound in synthesizers. It creates the initial waveform that all other processing starts from. Key parameters include pitch control (changing how high or low the sound is), octave controls (shifting the same pitch to different heights), semi controls (changing pitch according to keyboard notes), and fine controls (adjusting micro-tonality between semitones). Understanding oscillators is essential because they determine the base character of any synthesized sound.

Each oscillator has independent controls for level, pitch, and direct level without modulation. The signal routing system allows sending audio to filters and amplifiers, with send routing through filters before reaching the amplifier. Global LFOs can be activated and modulated to various parameters with different waveforms including rectangle for on/off effects. Envelope controls include filter track, decay, and release parameters with drive and resonance controls.

Audio Worklets provide a way to implement custom audio processing in a separate thread, improving performance for computationally intensive audio tasks. They execute in a separate audio processing thread, allowing complex audio operations without blocking the main JavaScript thread. This architecture enables real-time audio processing with low latency, which is essential for interactive audio applications like games.

This video demonstrates how to build low-latency audio applications on Android and Chrome using shared codebase: Android uses Oboe (C++ library for audio streams with callbacks) while Chrome uses WebAssembly and AudioWorklet (JavaScript audio processing on separate thread), both achieving ~20ms latency and supporting MIDI input through platform-specific APIs, enabling developers to reach over 3 billion users with a single codebase.

This comprehensive guide covers the Karplus-Strong algorithm, an early physical modeling synthesis technique discovered by Kevin Karplus, Alex Strong, David Jeffy, and Julius Smith. The algorithm models plucked string physics using a feedback delay loop with a low-pass filter, where an excitation waveform (typically noise) enters the loop and repeats periodically. The fundamental frequency equals 1 divided by delay time in seconds. Implementation in Web Audio requires a noise source, delay node, and feedback gain node connected in a loop. Critical stability requires filter gain strictly less than one. However, the Web Audio API's fixed minimum delay block size of 128 samples (≈2.5ms at 44.1kHz) limits maximum achievable frequency to approximately 344Hz, preventing full musical instrument range reproduction. Custom AudioWorklet implementations overcome this limitation.

This extensive segment examines APIs enabling sophisticated real-time web applications. ResizeObserver monitors individual element size changes, enabling container queries and responsive designs that adapt to parent container dimensions rather than viewport changes. AudioWorklet provides low-latency audio processing by running custom audio nodes on dedicated threads, solving latency issues inherent in main-thread audio processing. The segment culminates in evaluating CSS Scroll Snap against ResizeObserver as the championship winner. Scroll Snap enables native paginated scrolling with browser-composited performance, eliminating custom JavaScript implementations that struggle with cross-platform consistency. The evaluation criteria emphasize solving longstanding problems with minimal code, reducing bundle sizes, and leveraging native browser capabilities.

Audio worklets represent a fundamental shift in browser audio processing, replacing ScriptProcessorNodes which had hooks into the main UI thread and caused latency. Running entirely on dedicated threads, audio worklets enable serious precision for real-time music applications. Chrome 66 officially adopted this standard, making browser-based audio processing viable for professional-grade applications. This advancement enables effects chains (chorus, reverb, delay) and precise timing control necessary for serious music production directly in the browser.

This section demonstrates a complete live performance using Web Audio and Web MIDI APIs to recreate Daft Punk's 'Around the World.' The speaker connects a Keystep Pro MIDI controller to the browser, showing how MIDI data flows through the system. The performance includes bass lines created with oscillators and filters, lead parts using LFOs to modulate filter cutoff frequencies, drum samples from the Roland TR-909, and a vocoder effect for the robotic voice. The demonstration shows how all the individual components (oscillators, filters, LFOs, samples, vocoders) combine to create a complete musical arrangement, proving that web browsers can serve as powerful platforms for electronic music production.

This tutorial demonstrates how to use the Web MIDI API in the browser to connect a physical MIDI controller (with knobs, faders, and buttons) to a Tone.js PolySynth instrument, enabling real-time control of audio parameters such as volume, filter frequency, and note triggering through mapped MIDI input values.

MIDI (Musical Instrument Digital Interface) is a communication protocol enabling electronic musical instruments, computers, and devices to exchange musical information. WebMIDI is a web API enabling browsers to communicate with MIDI devices connected to a computer, allowing web applications to access and control MIDI hardware directly. This enables the creation of web-based musical applications that can interact with physical MIDI controllers like the Novation Launchpad. Web browsers can also play back MIDI files, enabling web-based music players and applications. Open source software development allows contributors to access and modify source code, enabling community participation in software improvement and enhancement.

MIDI data can be edited directly in the DAW by double-clicking tracks to open the MIDI editor, where users can view, move, and modify individual notes. Automatic quantization can be applied during recording or manually afterward using keyboard shortcuts. The media pool stores audio samples, loops, and other content that can be auditioned and dragged onto tracks. External instruments (hardware synthesizers or samplers) can be integrated through external instrument tracks, involving audio routing to specific inputs and MIDI routing for control signals. This allows users to control external hardware while recording their output as audio.

Web MIDI API enables MIDI device access in browsers through MediaDevices. Developers detect MIDI inputs and assign event handlers to receive incoming messages. The synthesizer processor handles MIDI events by triggering note on/off functions based on message status bytes. This integration allows web-based audio applications to respond to external musical instruments, enabling real-time musical collaboration and performance through browser-based interfaces.