← Back to Projects
Project·DSP & Audio

PulseWave — Web Synthesizer

Web Audio API Web MIDI TypeScript Canvas API DSP

A real-time, polyphonic subtractive synthesizer running natively in the web browser. Built on top of the Web Audio API and Web MIDI standard, it transforms the browser into an interactive musical instrument complete with low-latency audio processing, dual oscillators, custom envelope routing, and an oscilloscope display.

Overview

Instead of relying on static audio samples, PulseWave synthesizes sound programmatically in real time using audio signal processing primitives. It models the architecture of classic analog subtractive synths: generating raw harmonic wave forms, shaping frequency spectrums with dynamic low-pass/high-pass filters, modulating loudness via ADSR envelopes, and rendering a 60 FPS audio visualizer on an HTML5 Canvas.

Key features

  • Polyphonic Voice Management: Dynamic voice allocation pool that handles multiple simultaneous key presses with active voice-stealing algorithms.
  • Dual-Oscillator Engine: Multi-shape oscillators (Sine, Square, Sawtooth, Triangle) with fine-tuning, detune spread, and pulse-width modulation.
  • Configurable Envelope (ADSR): Accurate attack, decay, sustain, and release curves applied independently to both amplitude and biquad filter cutoffs.
  • Hardware Web MIDI Integration: Plug-and-play support for external USB/Bluetooth MIDI keyboards and controllers with pitch bend and velocity sensitivity.
  • Real-time Oscilloscope & Spectrum: Custom FFT frequency analyzer rendering live waveform graphs with HTML5 Canvas.

Tech stack & Architecture

Written in strict TypeScript to ensure rock-solid state management across high-frequency audio parameter updates:

  • Audio Core: Web Audio API (AudioContext, OscillatorNode, BiquadFilterNode, GainNode, and AnalyserNode).
  • Peripheral I/O: Web MIDI API for low-latency input event processing.
  • UI & Visualization: Modular component layout powered by HTML5/CSS custom controls, with real-time Canvas 2D rendering loop.

What I learned

Developing PulseWave provided hands-on experience with digital signal processing (DSP) concepts: sample rates, Nyquist frequency limits, audio node graph routing, and avoiding click/pop artifacts through scheduled parameter automations (such as exponential ramp curves). It also reinforced how to coordinate strict audio thread timing with main-thread UI rendering.

View on GitHub Live Demo ↗