SynthLab

A fully interactive web-based synthesizer that generates all possible synth waveforms using the Web Audio API. Zero frameworks, zero dependencies - pure HTML, CSS, and JavaScript.

🔗 Repository: github.com/cesp99/SynthLab

# Clone the repository
git clone https://github.com/cesp99/SynthLab.git
cd SynthLab

# Open in any modern browser
open index.html
# or
python3 -m http.server 8080   # then visit http://localhost:8080

1. Click the power button (top-right) to enable audio
2. Use your computer keyboard or click the on-screen piano to play
3. Switch between 10 waveform types using the selector grid
4. Shape the sound with filters, envelope, and delay

This is a fully static site — no build step required.

1. Push the repository to GitHub (default branch main or master).
2. Go to Settings → Pages.
3. Under Source, select Deploy from a branch and pick main / master and / (root).
4. Save. Your app will be live at https://<user>.github.io/<repo>/ within a minute.

The repo includes a .nojekyll file at the root so GitHub Pages serves the site with Jekyll bypassed — this matters because files starting with _ (none currently, but future-proof) would otherwise be hidden. All asset paths (styles.css, app.js) are relative, so the app works from any subpath with no configuration.

Any static host works: Netlify (Drop the folder), Vercel, Cloudflare Pages, or python3 -m http.server for local.

SynthLab is fully usable on phones, including small devices like the iPhone SE (320px wide):

• The layout stacks vertically on screens narrower than 900px and lets the page scroll naturally.
• The piano keyboard scrolls horizontally and supports multi-touch — drag your finger across the keys for glissando.
• The visualizers, envelopes, and waveform grid all adapt to the available width.
• Tap the power button (top right) once to enable audio; iOS will then keep the AudioContext running.

For best results, add the site to your home screen on iOS — it will launch fullscreen like a native app.

SynthLab implements 10 distinct waveform synthesis methods:

Pulse: Duty cycle (1-99%) - controls the width of the pulse wave.

FM: Ratio (0.5-16:1) - frequency relationship between carrier and modulator. Depth (0-1000 Hz) - modulation intensity.

AM: Rate (0.5-20x) - modulator frequency relative to carrier. Depth (0-100%) - modulation amount.

Comb: Delay (1-100 ms) - delay line length. Feedback (0-95%) - resonance amount.

Wavetable: H1-H8 - amplitude of each harmonic overtone (1st through 8th).

The computer keyboard maps to a 2-octave range (C4 to C5):

     Black keys:  W   E       T   Y   U
                   |   |       |   |   |
White keys:    A   S   D   F   G   H   J   K
               |   |   |   |   |   |   |   |
Note:         C4  D4  E4  F4  G4  A4  B4  C5
MIDI:         60  62  64  65  67  69  71  72

                     ┌─────────────────────────────────────┐
                     │            Signal Chain              │
                     └─────────────────────────────────────┘

  Oscillators ──→ Filter ──→ Master Gain ──┬──→ Compressor ──→ Analyser ──→ Output
  (per note)     (Biquad)    (volume)      │    (limiter)     (visualizer)
                                           │
                                           └──→ Delay ──→ Wet Gain ──→┘
                                                (feedback loop)

• Oscillators: Created per-note, destroyed on release (polyphonic)
• Filter: Shared BiquadFilterNode (LP/HP/BP/Notch)
• Master Gain: Global volume control
• Compressor: Safety limiter (threshold -18 dB, ratio 6:1)
• Delay: Stereo-capable delay with feedback loop
• Analyser: FFT-based for oscilloscope and spectrum display

Requires Web Audio API and Canvas support. No polyfills needed for modern browsers.

synthlab/    # local checkout name (repo on GitHub is `SynthLab`)
├── index.html      (353 lines)  - UI structure and controls
├── styles.css      (523 lines)  - Dark theme, responsive layout
├── app.js          (753 lines)  - Web Audio engine and UI logic
└── README.md                    - This file

Total: ~1,630 lines of hand-written code. Zero dependencies.

# Any static server works
python3 -m http.server 8080
npx serve .
php -S localhost:8080

• No build step - files are served as-is
• IIFE pattern - app.js wraps everything in an immediately-invoked function
• Class-based - SynthLab class manages all state and audio nodes
• Dynamic piano - keys are generated from PIANO_KEYS array, not hardcoded in HTML
• Canvas rendering - visualizers use requestAnimationFrame loop
• Memory management - oscillators are stopped and disconnected after release

1. Add a button in index.html inside #wave-selector:

   <button class="wave-btn" data-wave="yourwave" title="Your Wave">
     <svg viewBox="0 0 40 24"><path d="..."/></svg>
     <span>Name</span>
   </button>

2. Add a wave-specific section in #wave-specific-container:

   <div id="yourwave-section" class="wave-type-specific hidden">
     <div class="slider-row">...</div>
   </div>

3. Add the case in app.js inside noteOn():

   case 'yourwave': {
     // Create oscillators and connect to env node
     // Push all nodes to data.nodes array
     break;
   }

4. Add the description in DESCRIPTIONS object in app.js.

This project is licensed under the MIT License — see the LICENSE file at the root of the repository for the full text.