Steel Tongue Drum — Modal Synthesis Engine for Musicians & Developers

The Physics Engine

Most "virtual tongue drums" on the web are sample players: a fixed library of pre-recorded WAVs triggered on key press. They sound the same every strike, they can't retune without a new sample set, and the velocity curve is faked. This is not that.

Each tongue is a parallel bank of eight inharmonic partials driven by a velocity-shaped impulse: a fundamental, a beating partner detuned by ~1 cent for the slow chorusing you hear on real steel, and six overtones at ratios drawn from finite-element analysis of struck tongues — 1.000, 2.005, 2.998, 3.520, 4.015, 5.98. The body itself is modelled as a Helmholtz resonator coupled to the tongue array, which is why low notes pick up that hollow, room-like bloom even with reverb off.

Nonlinear damping means a hard strike doesn't just get louder — it shifts the spectral centroid up and shortens the decay envelope, exactly the way real metal does. And because every tongue is always physically present (just resting), striking one excites sympathetic vibration in its neighbours. Play a fifth and you can hear the third quietly humming along. That single detail is what separates this from every other browser-based virtual drum.

26 Scales, Any Tuning

Modal synthesis means the resonator bank retunes instantly. There is no re-sampling, no pitch-shifting artefact, no transposition lookup table — the partials are computed from the target frequency at strike time. The instrument ships with 26 scales: pentatonic, major, natural minor, Dorian, Phrygian, Lydian, Mixolydian, Aeolian, Locrian, harmonic minor, melodic minor, blues, Akebono, Hirajoshi, Iwato, Insen, Hijaz, Bayati, Saba, Rast, Kumoi, Pelog, Yo, Equinox, Pygmy, Chromatic. Each is browseable at /scales with audio previews and notation. Custom scales can be passed via URL parameters.

Technical Specs

• <30 KB JavaScript — the entire engine, UI, and renderer combined. No Tone.js, no Howler, no framework, no bundler. Vanilla ES2020 in a single IIFE.
• Web Audio API only — modal bank built from native BiquadFilterNode and OscillatorNode graphs. No AudioWorklet required.
• No samples — every byte of audio is synthesized at runtime. Zero asset weight.
• 60 fps Canvas 2D rendering with a pseudo-3D drum surface and cymatic strike feedback.
• PWA, fully offline — service worker caches the entire shell. First load, then nothing.
• WAV recording — up to 2 minutes of float32 PCM exported client-side, no server round-trip.
• Sub-8 ms strike latency on a typical desktop browser, measured pointer-down to sample.

For Composers & Producers

WAV export gives you clean stems straight from the browser — drop them into Ableton, Logic, or Reaper without any conversion. MIDI input is supported via Web MIDI on browsers that expose it, so you can play the instrument from a hardware controller and capture the audio in one pass. Ambient auto-play mode generates evolving melodic phrases inside the selected scale, useful as a starting point for generative or meditative tracks. The ?embed=1 URL parameter strips the UI chrome so the instrument can be iframed into another site or a kiosk display.

For Developers

The project is vanilla JavaScript by choice — no build step, no node_modules, no transpiler. If you want to learn how modal synthesis actually works in Web Audio, the source is small enough to read in one sitting. The modal bank, Helmholtz body, sympathetic vibration coupling, and reverb impulse generator are all in plain ES modules. View the source of any page, read the data attributes on the canvas, or browse the live instrument with DevTools open. It is one of the smallest serious modal synthesis implementations on the public web.