Overtone

lithographic.github.io/overtone

An interactive acoustics plate: build a note out of sixteen sine waves, hear what each one does to it, and find out where consonance comes from.

It answers one question in six figures — why a clarinet and a violin playing the same note do not sound the same — and ends at a playable instrument built from everything the page just explained.

Everything is synthesised in the browser. No audio files, no samples, no network calls, no runtime dependencies.

npm install
npm run dev        # http://localhost:5173
npm run build      # dist/
npm run bundle     # dist-single/overtone.html — the whole site in one file
npm run deploy     # build, then publish dist/ to the gh-pages branch

deploy uses a throwaway git worktree, so it never touches your working tree and needs no CI: main holds the source, gh-pages holds the built site, and the two share no history.

What is in it

Plate	The idea	What you can do
I · One partial	A sine has a pitch and nothing else	Move it and hear how little changes
II · Stack them up	Whole-number multiples make a timbre, not a chord	Add partials one at a time; switch the fundamental off and watch the pitch stay put
III · The recipe	Timbre is sixteen numbers	Draw a spectrum with the pointer while it is sounding
IV · The shape of a note	Spectrum is not enough	Reshape the envelope and lose the instrument
V · Sweet intervals	The scale falls out of the timbre	Sweep an interval across a dissonance curve computed from your own partials
The bench	All of it at once	Two octaves, a chart recorder, and a link you can share

Plate V is the one worth staying for. The dissonance curve is computed live from whatever partials are on screen, so stretching them drags the smooth intervals off the ratios a piano is tuned to — which is the argument in Sethares' Tuning, Timbre, Spectrum, Scale made audible in about four seconds.

How it works

Synthesis. A note is sixteen OscillatorNodes, one per partial, each with its own gain, summed under one envelope. Partials can be retuned and rebalanced while the note is sounding, which is why dragging a bar bends a note you are already holding. Partial n sounds at n ** stretch times the fundamental: at stretch = 1 that is a harmonic series, and above it the upper partials pull sharp the way struck metal does.

Roughness. src/audio/roughness.ts implements Plomp & Levelt's sensory dissonance in the parameterisation Sethares gives. Two partials contribute roughness according to how far apart they are relative to the critical band at that frequency; summing over every pair in two notes and sweeping the interval produces the curve on Plate V.

Drawing. Figures are computed from the patch rather than read off an analyser, so they are exact and look right before you have made any sound. Only the bench's oscilloscope and chart recorder read live audio. The chart recorder walks the paper one pixel row at a time rather than one FFT bin at a time — otherwise a single bin covers twenty pixels at the bottom of a log axis and every low note prints as a smudge.

Colour. Sixteen inks, one per partial, defined once in src/ink.ts and used identically in every figure. A colour always means the same partial.

Layout

src/
  ink.ts            the sixteen partial inks, and nothing else
  patch.ts          the sound model, presets, and URL encoding
  audio/
    engine.ts       one AudioContext, created on demand
    voice.ts        one note: an oscillator bank under an envelope
    player.ts       who is sounding, and who has to stop
    roughness.ts    Plomp–Levelt sensory dissonance
    tuning.ts       note names, frequencies, just intervals
  viz/
    surface.ts      canvas sizing and one shared frame loop
    plate.ts        graticules, rules, tick labels
    waveform.ts     traces, computed and live
    bars.ts         the recipe as sixteen columns
    curve.ts        the dissonance curve
    envelope.ts     the shape of one note
    recorder.ts     the scrolling chart recorder
  ui/               controls, the harmonic editor, the keyboard
  plates/           one module per section of the page

Notes

• Keyboard accessible throughout: the harmonic editor and the interval sweep both take arrow keys, and Esc stops all sound.
• On the bench, A–J play, W E T Y U are the raised keys, and Z / X shift the octave.
• The page commits to one appearance: ink on plate paper, in daylight.
• Only one plate sounds at a time, so a long scroll does not turn into a pile-up of drones.

Reading

• R. Plomp and W. J. M. Levelt, "Tonal Consonance and Critical Bandwidth", JASA 38 (1965).
• William A. Sethares, Tuning, Timbre, Spectrum, Scale, 2nd ed., Springer 2005.
• Hermann von Helmholtz, On the Sensations of Tone, 1863 — where the argument starts.

Licence

MIT. Take it apart.