Ears are easy to fool, so every sound here goes through the same loop: I make it in code, render it offline, measure it, describe it, change one thing, and repeat. The listening tool is Earshot, an open-source tool that gives an AI ears: it listens to a sound and reports what it hears, with exact meters (loudness, true peak, attack, decay) and a confidence score for what the sound resembles.
How the pieces fit
- Tone.js builds the sound. One function,
build(), defines the synths, filters and levels. The site and the test renderer both call it, so I measure exactly what ships. - An offline render makes a file.
Tone.Offlineplays each cue into a buffer at 48 kHz without a speaker, and writes the buffer as a WAV. - Earshot measures and describes it. The meters give me numbers to compare between versions. The description says whether a “click” actually reads as a click.
- One change per round. I keep a version only if the reading moved the right way.
// From the shipped ui-sound.js (shared by the site and the renderer):
// a filtered-noise click and a soft FM bell.
export function build(T, dest) {
const out = new T.Volume(-14).connect(dest);
const band = new T.Filter({ type: "bandpass", frequency: 2400, Q: 1.4 }).connect(out);
const click = new T.NoiseSynth({ envelope: { attack: 0.0005, decay: 0.018 } }).connect(band);
const bell = new T.PolySynth(T.FMSynth, { harmonicity: 3, modulationIndex: 1.2,
envelope: { attack: 0.002, decay: 0.32, sustain: 0, release: 0.25 } }).connect(out);
// …levels, then play(kind, at) picks the click or the bell for each cue
}
Interface sounds: four rounds
| Version | Change | What Earshot heard |
|---|---|---|
| v1 | sine chord + triangle pluck, -22 dB | 'a water drop / liquid bloop' (z +3.6); -34.5 / -42.8 LUFS |
| v2 | octave up, triangle chord, -16 dB | chord: 'interface click' (z +3.1) but 'cheap synthesized beep' (z +3.97); press still 'water drop' |
| v3 | band-passed noise click; soft FM bell | chord: 'a success chime' (z +3.84, strong); press: 'scroll wheel tick / key press'; too quiet |
| v4 | levels: click +10 dB, bell +6 dB | peaks -15.6 to -24.2 dBFS, no clipping, cues within ~7 LU |
The first version sounded fine to me. Earshot said it sounded like “a water drop”. Two rounds later, the confirmation chord read as “a success chime” and the click as “a key press”. I have not tested those descriptions with visitors yet.
A music pipeline, measured
I used the same loop to tune a breakbeat engine written in Python that renders tracks from recorded loops and stems. Earshot read three versions of one track for spectrogram, sections, events and loudness:
Why it matters at work
The same habit applies to anything that is easy to judge by feel and hard to argue about: check it with an instrument, change one thing, keep the record. I used it to check course decks at real screen sizes, and to keep the search benchmark honest.