VocalUp — A Vocal Trainer in the Browser

A range test that listens rather than commands. Two steps — lowest and highest note; the app never asks you to repeat anything, it just remembers the edges and discards stray squeaks. From then on warm-ups are transposed into a comfortable key and karaoke melodies are moved by octaves into the singer's range.

04: Karaoke With Your Own Tracks

Upload an mp3 → Demucs splits it into backing and vocals → librosa.pyin transcribes the melody into notes → a scrolling note track, live voice line, score and combo.

• Mic latency calibrates itself. At the end of the song, offsets from −100 to +700 ms are tried and the one where the voice fits the notes best is kept.
• Lyrics. faster-whisper provides timestamps; the user's own text is aligned to them with Needleman–Wunsch: timing from Whisper, words from the user.
• The absorb parameter in transcription. 28% of "extra" notes in songs turned out to be fragments of one note torn apart by vibrato at a semitone boundary. Merging removed 43–69% of notes with 98–99% contour match.
• An order queue that survives a switched-off server. The order lands in IndexedDB and sends itself once the server answers.

autoLatency(){
  if(this.raw.length<200) return null;
  let best=null;
  for(let off=-0.10; off<=0.70001; off+=0.02){
    const r=this.scoreWithOffset(off);
    if(r.n<5) continue;
    if(!best || r.acc>best.acc) best={off:Math.round(off*1000)/1000, acc:r.acc};
  }
  return best;
}

05: Singing With a Ukulele

One mic records a take where you play and sing at once. The reference is the instrument's own tuning, not A=440: nylon drifts, and measuring the voice against a standard while the ukulele sits at −18 cents means scolding a perfect hit.

Three errors are kept separate because they are fixed differently:

• Systematic offset — the whole take sits below the tuning; that's one adjustment, not years of practice.
• Drift — a verse slowly slides; you can't hear it precisely because it's slow.
• Scatter — the centre of the note wanders. This is what ear training actually is.

Pitch is refined to fractions of a cent by parabolic interpolation of the first four harmonics — pyin's 10-cent grid is fatal here: every deviation lines up on the same remainder, and the "offset" can turn out to be entirely a grid step.

06: Progress and Sync Without an Account

XP, levels, day streak, 16 achievements. Cross-device sync by an anonymous key; the server stores only its SHA-256. Merging is per-field, not last-writer-wins: records keep the best, achievements are unioned, range is widened. No karaoke leaderboard — deliberately: accuracy is only comparable on identical songs, and everyone's library is their own.

07: Design

Instrument style: monospace type, a rigid grid, one signal colour. A dot-matrix note display. No emoji — letter codes (TON, SCL, ARP) and section numbers. A colour language for signals: lime — in tune, orange — off, red — miss. The "Mic signal" panel says in words what's wrong: hum, quiet, unclean.

08: Stack

Vanilla JS, a single index.html with no build step · Web Audio API, AudioWorklet · Essentia.js (WASM) · Python: Demucs, librosa, faster-whisper, mido · Vercel serverless + Redis · ~5,400 lines of code

09: Outcome

A vocal trainer in the browser: pitch detection you can trust, warm-ups without a timer, a range test, karaoke with your own tracks and a ukulele singing report. Product, design, front end, audio DSP and back end — solo.