About this tool
The Synth Studio is a complete subtractive-synthesis voice designer that runs entirely in your browser. Start from the oscillator — sine, saw or triangle for classic tones, a square wave with genuine pulse-width (PWM) duty control for chip-music bite, or white, pink and brown noise for percussion and atmosphere. Shape it with a four-stage ADSR envelope you can see as a curve, sculpt it through a resonant biquad filter (lowpass, highpass, bandpass or notch), and animate it with an LFO routed to pitch (vibrato), cutoff (wobble) or amplitude (tremolo).
An effects chain finishes the voice: tanh-curve overdrive for warmth and grit, a stereo ping-pong delay with crossfeed between channels, and a Schroeder-style reverb built from damped feedback combs. Every parameter is live — drag a slider mid-note and hear the change.
Playing is whichever way suits you: click the two-octave keyboard, use the printed computer keys in the classic tracker layout (A W S E D F T G Y H U J K O L P), or plug in a physical MIDI keyboard through Web MIDI (Chrome and Edge; the button simply doesn't appear in unsupported browsers). While you play, a live FFT spectrum shows the harmonic content and a scrolling waterfall spectrogram paints its evolution over time — the visual confirmation that narrowing the cutoff really does shave the highs.
Six retro game SFX one-shots — jump, laser shot, coin pickup, powerup, explosion and UI click — are rendered by the same shared engine that powers the exports, one click to audition them for your game.
Export works both ways: download your current patch as a WAV rendered offline at 8, 16 or 24-bit PCM (bit-identical to what you heard), or copy the dependency-free Web Audio JS function that rebuilds your exact voice — oscillator, PWM PeriodicWave, filter, ADSR, LFO and all three effects — ready to paste into any page, engine or prototype. MP3 and OGG encoders arrive with the pending encoder decision.
How to use
Pick a preset or start from saw
The studio presets (Saw Lead, Warm Pad, PWM Bass, E-Piano) are curated starting points; every control is yours after that.
Shape the voice
Choose a waveform (square unlocks the PWM duty slider), draw the ADSR, tune the filter cutoff and resonance, pick an LFO target and depth.
Add effects
Enable overdrive, stereo delay and reverb — each with its key parameters; the signal flows in that order.
Play
Mouse the two-octave keyboard, use the printed tracker keys, or connect a MIDI controller (Chrome/Edge).
Watch the FFT
The spectrum and waterfall update live — sweep the cutoff and watch the harmonics fall away.
Export
Download WAV (8/16/24-bit) of the current patch, or copy the paste-ready Web Audio code / patch JSON.
Use cases
Game sound design without a DAW
Design the voice, audition it against your game feel, export WAV or paste the JS directly into your engine — no install, no license.
UI and notification sounds
Coin, click and powerup one-shots plus your own patches give apps audible feedback with zero asset pipeline.
Learning synthesis
Every subtractive concept — PWM, filter resonance, LFO routing, ADSR — has a slider and a live FFT to prove what it does.
Prototyping Web Audio code
Design by ear, then copy the generated function instead of hand-writing node graphs and envelope scheduling.
Common mistakes
Mistake:Comparing loudness at different gains
Fix:Match perceived loudness (gain at ~50% is a fair baseline) before judging filter or effect changes — louder always sounds 'better'.
Mistake:Full wet delay or reverb
Fix:Keep effect mixes under ~40% in a mix; 100% wet is a special effect, not an enhancement.
Mistake:High resonance + high gain
Fix:A resonant filter can add 12-18 dB at cutoff; pull gain back or the export clips (the WAV path soft-clips to protect you).
Mistake:Expecting MIDI on Safari
Fix:Web MIDI works in Chrome/Edge (and behind flags elsewhere); the connect button is hidden rather than broken where unsupported.
Frequently asked questions
Related guides
One Pixel at a Time: Thinking in Fragment Shaders
Fragment shaders invert everything procedural programmers know: no objects, no loops over data — just one function evaluated half a million times per frame. The mental models that make GLSL finally click, from plasma to raymarching.
Subtractive Synthesis in Ten Minutes: What Every Slider Actually Does
Oscillator, ADSR, filter, LFO, effects — the entire vocabulary of the classic synth, explained the way that finally makes it stick: by watching the FFT while you turn the knob.
References & standards
Related tools
Distributed Systems & Network Topology Simulator
Build a network topology from load balancers, API gateways, microservices, message queues, distributed databases and caches, then inject chaos — kill nodes, partition the network, packet loss, latency spikes, circuit breaker trips — and watch Raft leader election, split-brain and Hystrix-style breaker state react live. Export the topology as Docker Compose, Kubernetes manifests, Mermaid or PlantUML. Entirely client-side, educational simulation.
Typography Anatomy & Variable Font Lab
Load a TTF/OTF/WOFF/WOFF2 font and inspect glyph Bézier outlines, baseline/x-height/cap-height guides, kerning pairs, OpenType features and live variable-font axis sliders — export CSS @font-face, font-variation-settings and fallback metric overrides.
Pixel Art Sprite Studio
Draw retro pixel art on an 8x8 to 64x64 grid with pencil, flood-fill, ordered-dither and symmetry tools, curated PICO-8/Game Boy/NES/C64/Endesga-32 palettes, multi-layer compositing, and a frame timeline with onion skinning. Export static PNG, animated PNG, GIF, a sprite-sheet atlas (Pixi/Phaser/Godot/Unity JSON), or a CSS steps() animation snippet.
Digital Logic Gate & Circuit Simulator
Build digital circuits from AND/OR/NOT/NAND/NOR/XOR/XNOR gates, tri-state buffers, switches, clocks and 7-segment displays; wire flip-flops, latches and multiplexers into adders and counters. Runs an event-driven propagation-delay simulation with High-Z and driver-conflict detection, packages sub-circuits into reusable ICs, and exports a truth table, K-Map minimization, Verilog, VHDL, and a documented JSON+SVG schematic. Everything runs client-side; circuits never leave the browser.
2D Fluid Dynamics & Particle Physics Sandbox
A physics playground with two engines sharing one canvas. The fluid mode runs a real Eulerian Navier-Stokes solver — semi-Lagrangian advection, explicit diffusion, Jacobi pressure projection and vorticity confinement — that you paint with dye and velocity using mouse or touch. The particle mode is a damped Verlet N-body engine with gravity wells, Coulomb attractors and repulsors, spring links, wall restitution and elastic circle collisions. Particle counts adapt to the device (100k target on WebGL2 desktop, 2k-5k on CPU fallback), and every configuration exports as runnable code: a Matter.js world, a PixiJS ticker setup, or a standalone vanilla Canvas engine.
GLSL Shader Art & Visual FX Playground
A live GLSL fragment-shader laboratory running on WebGL2 with the full Shadertoy uniform set (iResolution, iTime, iTimeDelta, iFrame, iMouse, iChannel0..3). Write shaders with syntax highlighting and see them recompile on every keystroke, with compiler errors mapped back to your line numbers and highlighted in the editor, plus a live FPS counter. The gallery ships raymarched spheres, tori and a Mandelbulb fractal, Voronoi and FBM procedural noise, cyberpunk grids, plasma waves, a neon audio visualizer and matrix rain. Export any shader as Three.js ShaderMaterial code, a React Three Fiber component, a standalone single-file WebGL2 HTML page or plain GLSL — or record the canvas straight to WebM video. A Canvas2D plasma fallback keeps the tool usable where WebGL2 is unavailable.