ToneLAB

A synthesizer in your browser.

Grab a knob and turn it. The sound bends, buzzes, swells, wobbles. The scope wiggles along, so you can see the noise you make.

  • Play with anything: your mouse, your laptop keys, your thumbs.
  • 7 synths, 7 effects: fat basses, glassy bells, laser zaps, cymbal crashes, all from scratch.
  • Out of ideas? Hit RND and take what you get.
  • New to this? Turn on Learn in Settings. It starts from zero and walks you knob by knob, until you built a sound yourself.
  • Works offline, on any screen, and comes with four looks, from 80s neon to a black hardware box.

Turn knobs, make noise, learn how it works.

Tap anywhere to activate audio

ToneLAB

Instrument

Preset:

Scope

Effects

Out

75%

Reverb

0.3
2.5 Sec

Delay

0.25 Sec
0.3
0.3

Tone

5000 Hz
0

Chorus

1.5 Hz
0.3

Phaser

0.5 Hz
0

Tremolo

5 Hz
0

Crusher

10 Bit
1

Virtual Keyboard

Octave 4
Save preset

Credits

ToneLAB

Turn knobs, make noise, learn how it works.

Made by
Sanchodelniglo
Source
GitHub · MIT
Sound engine
Tone.js · Yotam Mann · MIT
Fonts
Orbitron · Share Tech Mono · Inter · SIL Open Font License
CRT screen
Inspired by Alec Lownes
Themes
Replicant: Replicant Runner palette · Analog: 80s hardware synths
Thanks
To my daughters, for nights so short they barely existed. ToneLAB was born in the hours they gave me.
Version
dev
Manual

01 Quick start

From silence to your first sound in five steps.

  1. Wake the audio. Tap anywhere on the start screen. Browsers keep sound off until you touch the page.
  2. Play a note. Press a letter on your computer keyboard (chapter 07 shows which), or click a key of the Virtual Keyboard.Tap a key at the bottom of the screen.
  3. Pick a sound. Step through the presets with the ◀ ▶ arrows beside Preset.Step through the presets with the ◀ ▶ arrows on the preset line, or swipe the scope strip left or right.
  4. Change it. Hold a note and turn a knob. The scope draws the sound as it changes.
  5. Start over. Init gives you a plain sound. Random gives you a surprise.

Try Mono Synth, preset Acid Bass. Hold a low note and turn the Filter Q and the Filter Envelope Decay. That squelch is the sound of acid house.

02 The panel

ToneLAB changes its layout with the screen. This chapter shows the layout you use now.

Header
The ToneLAB name, Install App (when your browser offers it) and the Settings gear.
Instrument
Left column. On top: the instrument type ◀ ▶, the preset ◀ ▶, then Init, Random and Save. Under it: the knobs, in sections. Knobs / Sliders sits on the title line.
Scope
Top right. The sound you hear, drawn live. Wave / Spectrum on its title line.
Effects
Bottom right. The effects rack and the Out volume.
Virtual Keyboard
Bottom. Octave, HOLD and ARP, the label chips, the note names and the computer layout. The arpeggiator strip opens here.
Header
ToneLAB, Install App (when your browser offers it), the Settings gear, and the instrument type ◀ ▶.
Preset line
The preset ◀ ▶, then Init, Random and Save.
Scope strip
The sound you hear, drawn live. Swipe it left or right to change the preset.
Pages
On a phone: one tab per knob section, then FX for the effects, then ARP while the arpeggiator runs. Tap a tab or swipe the page. On a tablet: every section on one page that scrolls.
Keyboard
◀ OCT, the octave number, OCT ▶, then HOLD and ARP, then the keys.
Settings
The gear also holds what does not fit on a small screen: Knobs / Sliders, the scope mode, key labels, note names and the computer layout.

Turn a phone sideways: the scope moves to the left, the pages to the right and the keys stay underneath.

03 How a synth works

Every sound in ToneLAB goes through the same chain. The names on the knobs come from it.

Wave
The shape the oscillator repeats. Sine is pure and soft. Triangle is a little brighter. Square is hollow, like a clarinet. Sawtooth is bright and buzzy, the classic synth sound. The numbered waves (square 2, sawtooth 5…) keep only that many harmonics, so they sound softer.
Fat wave
Three copies of a wave, a little out of tune with each other. They sound wide and thick. Spread sets how far apart they are.
Cutoff
The filter lets the low part of the sound through and removes the high part. Cutoff is where it starts to cut. Low = dark and muffled, high = bright and open.
Q
Resonance. A boost right at the cutoff. A little sounds sharper, a lot whistles and squelches.
Envelope
How a value moves after you press a key, in four stages: A Attack: time to reach the top. D Decay: time to fall to the sustain level. S Sustain: the level held while you keep the key down. It is a level, not a time. R Release: time to fade out after you let go. The Envelope shapes the volume. The Filter Envelope moves the cutoff.
FM
Frequency modulation: a second oscillator wobbles the pitch of the first so fast that you hear a new tone, not a wobble. Harmonicity sets the ratio between the two. Modulation Index sets how strong the effect is.
Octave
Twelve keys up or down. Each octave doubles or halves the pitch.

04 Instruments

Seven instruments, each built a different way. Change them with the instrument ◀ ▶ or open the list. The ? beside the name explains the one you have.

InstrumentWhat it isStart with
Mono SynthOne voice with a resonant filter and its own filter envelope. The classic analog bass and lead. It has every block of chapter 03.Acid Bass
Poly SynthA simple synth that plays chords. The best place to learn the basics.Dreamy Pad
FM SynthGlassy, bell-like tones from frequency modulation. The 80s DX7 sound.Electric Piano
Pluck SynthA model of a plucked string: a short burst of noise rings and fades.Nylon Guitar
Membrane SynthA sine whose pitch drops fast on each hit, like a drum skin.Kick Drum
Metal SynthSix clashing oscillators for cymbals, hats and gongs. Its pitch comes from the Frequency knob, not from the key.Closed Hat
Noise SynthNoise shaped by an envelope. No pitch: every key sounds the same.Snare Hit

Only Poly Synth plays several notes at once. The others play one note at a time: a new key replaces the last one.

05 Knobs and help

Each knob shows its value above and its name below.

Turn. Put a finger on a knob or a fader and drag up or down. Up is more. The value shows above it while you move.

Do thisTo get
Drag up or downRaise or lower the value. Up is more.
Shift + dragFine steps, about seven times slower.
Scroll over itSmall steps. Hold Shift for finer ones.
Double-clickBack to the default value.
↑ → / ↓ ←One step up or down (after Tab to the knob).
Page Up / Page DownA tenth of the range.
Home / EndMinimum / maximum.

Knobs or sliders. The same controls can show as vertical faders. Switch with Knobs / Sliders on the Instrument title linein Settings, row Controls. Touch screens start on sliders, which are easier to hit with a thumb. Faders take the same scroll, keys and double-click.

Greyed out. Spread works only on a fat wave. Pick a wave whose name starts with "fat" and it wakes up.

Help everywhere. Every knob, section and box has a small ?. Tap it to pin the hint, tap elsewhere or press Esc to close. With a mouse, hover it for a quick look. The hints say what to listen for and give values to try.

Wave pickers. A wave control shows the shape it plays. Open it and pick from the drawn shapes. With the keyboard: ↑ ↓ to move, Enter to choose, Esc to close.

06 Presets

68 ready-made sounds, each one for its own instrument. Mono Synth has 9, Poly Synth 19, the others 8.

Choose. Use the preset ◀ ▶ or open the list, or swipe the scope strip. The ? beside the name says what to play and which knob to turn.

What a preset sets. The instrument knobs and waves, the octave and every effect. It never touches the Out volume, HOLD or the arpeggiator.

Init
The plainest sound that still plays: default knobs, an envelope that opens and closes with the key, effects off. A clean start to build your own.
Random
A new random sound for this instrument: waves, knobs and effects. The ranges are bent so it stays playable. The volume, octave and instrument stay as they are.
Save
Keep the sound you hear as your own preset: knobs, waves, effects and octave. Give it a name of up to 24 characters. It shows under "My presets" at the end of the list.

Change your own preset. Load it: the Save button lights up. Press it to Update (replace it with the sound you hear now, and rename it), Save as new (keep both) or Delete. Delete asks "Sure?" first: press it again.

Note Your presets live in this browser on this device. Clearing the site data deletes them, and another browser does not see them.

07 Keyboard

Play with the letters of your computer keyboard, the mouse or your fingers.Play with your fingers. Use several at once.

Your keys for layout QWERTY: twenty notes, from C up to the G of the next octave. Wrong letters? Choose your layout in the Layout list of the Virtual Keyboard barin Settings, row Computer keyboard. ToneLAB does not detect it.
Octave
◀ OCT and OCT ▶, or the ← → arrow keys. From 0 to 7, 4 is the middle. Presets set it too.
HOLD
Notes keep ringing after you let go. Press a lit key again to stop it. Turn HOLD off to stop them all.
Labels
Notes and Keys choose what is printed on each key: the note name, the computer letter, both or none. Note names show as C D E or Do Ré Mi. Both are in Settings.
Touch
Use several fingers at once. Slide a finger across the keys to glide from note to note. On a one-note instrument the pitch slides. Android phones give a short buzz on each note.

08 Arpeggiator

Hold a chord and the arpeggiator plays its notes one after the other, in time.

  1. Press ARP, beside HOLD. Its strip opens above the keys.On a phone an ARP tab appears and opens. On a tablet the ARP section shows at the end of the page.
  2. Hold two or three keys. The pattern plays while you hold them.
  3. Turn HOLD on to free your hands: each key you press joins the pattern, press it again to take it out.
Pattern
↗ Up, ↘ Down, ⋀ Up-down, ⁂ Random, or ≡ As played (the order you pressed the keys).
Rate
Note length: 1/4, 1/8, 1/16 or 1/8T (triplets).
OCT
1, 2 or 3: the pattern climbs one or two octaves higher before it starts again.
LEN
8, 12 or 16 steps in the loop.
BPM
Tempo, 60 to 180. Or tap TAP four times on the beat.
Gate
How long each note lasts within its step. Short is staccato, 100% is legato.
Swing
Pushes every second step late, for a shuffled groove.
Step lights
Tap a light to mute that step (a rest). Double tap it to make an accent: louder and a little longer. The running step lights white.

The arpeggiator remembers its settings. It is always off when ToneLAB starts.

09 Effects

After the instrument, the sound goes through this chain. A Mix or Depth at 0 turns that effect off.

ChorusPhaserTremoloCrusherToneDelayReverbOut

EffectKnobsWhat it does
ChorusRate, MixAdds a slightly detuned copy that moves. Wider, shimmering.
PhaserRate, MixA sweeping, swooshing notch through the sound.
TremoloRate, DepthThe volume pulses up and down.
CrusherBits, MixFewer bits = rougher, like an old video game.
ToneCutoff, DistortionA last filter on everything, then grit.
DelayTime, Feedback, MixEchoes. Feedback sets how many come back.
ReverbMix, SizeA room around the sound. Size is how long it rings.
OutVolumeThe final level. The only knob no preset, Init or Random changes.

A limiter after the reverb keeps loud sounds from distorting your speakers.

10 Scope

The screen shows what you hear, after the effects.

Wave
The shape of the sound over a few hundredths of a second. A steady note holds still so you can study its shape.
Spectrum
Which pitches are loud, low on the left, high on the right. Turn the Cutoff and watch the right side drop.
Switch
Wave / Spectrum on the Scope title line.Settings, row Scope.
Envelopes
Each envelope section draws its curve above its knobs. When you play, a dot runs along it and the letter of the current stage (A, D, S or R) lights up.

11 Learn mode

A guided path through all 27 knobs of the Mono Synth and the effects, one at a time.

  1. Open Settings and press Learn.
  2. ToneLAB switches to the Mono Synth and sets the knobs to zero. A bar under the presets gives one task.
  3. The knob to turn has a dashed frame. Play notes and turn it until you hear the change. A ✓ shows and Next ▸ pulses.
  4. Press Next ▸ to go on, or Skip if you want to move ahead. Nothing moves on by itself.

Effects play one at a time so you hear each one alone. At the end, all the values you chose come back together. Learn remembers your step if you close the app. Press Learn again in Settings to stop, or Restart to begin at step 1.

12 Settings and saving

Theme
Analog (black hardware synth), Cyber (neon), Sodium (amber street light) or Replicant (jade and red).
CRT screen
Scanlines, Vignette, Flicker and Glitch. Turn off what bothers your eyes or slows your device. If your system asks for reduced motion, Flicker and Glitch start off.
Learn
See chapter 11.
Manual, Credits
This manual, and who made ToneLAB with the version number.

What ToneLAB remembers in this browser: theme, screen effects, knobs or sliders, scope mode, key labels, note names, keyboard layout, arpeggiator settings, your presets and your Learn step.

What it forgets when you close it: the instrument, the knob positions, the effects, the octave and the volume. Save a preset to keep a sound.

Install
When your browser offers it, Install App shows in the header and puts ToneLAB on your home screen or dock. On iPhone and iPad: Share, then Add to Home Screen.
Offline
After the first visit, ToneLAB works without a connection.
Updates
A new version loads by itself the next time you open ToneLAB online. The page reloads once.

13 Troubleshooting

No sound
Tap the page once: browsers need a touch first. Look at the Out volume. Check that your device is not muted. On iPhone, the silent switch can mute the browser.
Letters play the wrong notes, or none
Choose your keyboard layout (chapter 07). Click outside text fields first. Keys held with Ctrl, Cmd or Alt do not play.
The arrows do not change the octave
A knob or a field has focus and takes the arrows. Click an empty part of the panel, or use ◀ OCT and OCT ▶.
A note does not stop
HOLD is on. Press the lit key again, or turn HOLD off.
My chord plays one note
Only Poly Synth plays chords (chapter 04).
Every key sounds the same
Metal Synth takes its pitch from its Frequency knob, and Noise Synth has no pitch. That is how they work.
Spread is greyed out
Pick a fat wave (chapter 05).
Crusher does nothing
Your browser does not support the audio feature the Crusher needs. The other effects still work.
The screen flickers or the device runs hot
Turn off Flicker and Glitch in Settings, row CRT screen.

14 Shortcuts

KeysAction
Letter keysPlay notes (chapter 07).
← →Octave down / up, when no knob or field has focus.
TabMove between controls.
↑ ↓ Page Up Page Down Home EndChange the focused knob.
Enter / SpacePress the focused button or key.
EscClose a hint, a list, Settings or a window like this one.
Shift + drag or scrollFine knob moves.
Double-click a knobReset it.