synthJS

the problem

Browser synths usually feel flat. A native range input is nothing like turning a knob, and on a phone, dragging a control tends to scroll the page instead.

the approach

I didn't use any native form controls. Every knob, fader and button is drawn in SVG, and mouse and touch events feed the same drag function, so the controls behave identically on a trackpad or a touchscreen. GSAP handles the motion, and on iPhone each control gives a short haptic tap.

the controls

The interface has waveform selection, low/high/band-pass filter buttons, ADSR sliders with an envelope graph that redraws as you move them, a waveform display, and a MIDI device picker for playing it from a controller.