SynthLab - Browser Synth, Sequencer & Groovebox

SynthLab is a complete music workstation that runs in the browser — a synthesizer, step sequencer, drum machine, sampler and FM engine in one page. Every sound is generated live with the Web Audio API. No libraries, no build step, no dependencies — just one self-contained HTML file.

How to use: Play the keyboard with your mouse, computer keys or a MIDI controller. Program the 16-step sequencer and drum machine, design your own patches, drop in samples, then hit Play — everything runs in sync. Save your project as JSON, or export it to MIDI or WAV to finish in your DAW.

Used technology: HTML5, CSS3, JavaScript, Web Audio API, Web MIDI API (no libraries, no dependencies)

Compatible Browsers: Chrome, Firefox, Safari, Edge, Opera (desktop)

Features

• Real synth engine — 3 oscillators, unison, sub, noise, filter envelope, ADSR, drive & LFO
• 20 built-in patches (bass, lead, pluck, keys, FX) + a 12-knob editor and user patch slots
• 16-step melodic sequencer, up to 4 bars, chainable into one long loop
• Step drum machine — Kick, Clap, Hats, Rim, Perc with Fill, Break and 4/4
• Pad / Ambient chord generator and an FM “Drop Designer” for risers, drops & hits
• Sampler — 16 pads × 2 banks (one-shot & beat-synced loop), drag & drop your own MP3/WAV
• Play with mouse, computer keyboard, or a MIDI controller (pitch-bend, mod-wheel, MIDI Clock sync)
• Full FX & mixer — DJ filter, delay, reverb, flanger, EQ, compressor, XY pad, wobble & pitch LFO
• Per-section Mute / Solo mixer with bar-synced switching
• Save / Load projects as JSON, export to MIDI (.mid) and record to WAV
• One-click demo tracks + a folder for your own presets
• 15 built-in themes — neumorphic, synthwave, hand-drawn “sketch” and frosted glass
• Single self-contained HTML file — no dependencies, easy to host & customize

Files Included

• Source: one self-contained index.html (HTML + CSS + JS)
• 8 demo tracks (.synth.json) + a demo sample
• Documentation (HTML)