← diego zhou — index new york --:--

track 004 / 004

Phrase Lab

dwg
004
year
2026
status
In progress
type
Transcription Studio
stack
Next.js · TypeScript · Tailwind
01 — overview

A browser-based transcription studio for slowing down recordings, looping phrases, and saving practice segments.

Phrase Lab is a transcription studio for learning music by ear. Import a recording, slow it down without changing the pitch, loop a phrase, and save segments with notes to return to later. Recordings and practice work stay in your browser, with no account required. The longer-term goal is a more versatile jazz shedding studio that brings transcription, improvisation, and focused practice together.

02 — result
Phrase Lab Transcribe Studio with a saved practice loop, waveform overview, playback speed, and recording library
02-atranscribe studio
03 — process

I built the studio with Next.js and TypeScript, using browser audio playback for pitch-preserving slowdown and an interactive waveform for selecting loops. Temporary loops let you audition a phrase before saving it as a practice segment. IndexedDB stores recordings, segments, notes, and playback settings locally, while backup export and restore let you move your library between browsers.

parts

  1. 01Next.js
  2. 02TypeScript
  3. 03Tailwind
  4. 04IndexedDB
04 — screens
Phrase Lab desktop recording library with a selected loop and waveform playback controls
04-a01 / select a phrase
Phrase Lab practice controls with 0.75 times playback speed, a count-in, a repeat gap, and metronome accents
04-b02 / slow down and repeat
Phrase Lab mobile transcription studio with loop points, a waveform, and fixed playback controls
04-c03 / studio on mobile