Humline

Humline turns a short hummed melody into notes you can edit in a piano roll, play back with an instrument, and export as MIDI, right in your browser.

Comment

Inspiration

Melodies pop into my head at random times, usually when there's no instrument nearby. My phone is full of voice memos of me humming, and almost none of them became anything, because a voice memo is a dead end: you can't fix a wrong note, try it on another instrument, or drop it into a DAW. I wanted the shortest path from "I just hummed something" to "here are the notes, and I can change them." Humline is built for people like me, hobby songwriters who can hum an idea but can't easily write it down.

What it does

Humline is a browser music studio built around one loop: Record → Convert → Edit → Play → Export MIDI.

  • Record up to 20 seconds from your mic, or import a short audio file.
  • Convert to notes with pitch detection that runs entirely on your device. Silence or noise gets an honest message instead of made-up notes, and uncertain notes get a ◇ review marker.
  • Edit in a piano roll: drag, resize, add and delete notes, set exact values in an inspector, snap to ⅛ notes, undo/redo, and edit fully by keyboard.
  • Play the original recording or three synth presets (Keys, Pluck, Pad), with tempo, volume and seek controls.
  • Export MIDI with your edited notes, velocities, tempo and instrument, or save the project as JSON. Your work autosaves in the browser.

Your audio never leaves your device.

How we built it

  • Frontend: React 19, TypeScript and Vite, with React Router.
  • Audio capture: getUserMedia and MediaRecorder. The mic only opens after you click.
  • Transcription: a Web Worker downmixes to mono, resamples to 22,050 Hz, and runs Pitchy (McLeod pitch method) on 2,048-sample windows with 256-sample hops, limited to 65–1,200 Hz, with a clarity threshold and a noise gate. A separate segmentation step splits notes using median pitch with 0.7-semitone hysteresis. There's no scale-snapping and no invented fallback notes.
  • One data model (pitch, start, duration, velocity, tempo) drives the piano roll, playback, saving and MIDI export.
  • Playback: a custom Web Audio engine with a lookahead scheduler.
  • MIDI: @tonejs/midi, verified by parsing the exported file back in tests.
  • Accounts (built, not live in the demo): Clerk sign-in, an Express API, and a PostgreSQL melody library. Only note data goes to the server, never audio.
  • Testing: 35 Vitest tests, Playwright browser tests with a fake microphone, axe-core accessibility checks, and an HTTPS smoke test.
  • AI assistance: I wrote the product spec and build context first, then used AI coding agents (OpenAI Codex) to implement it, and reviewed, tested and iterated on the output. The product decisions were mine: who it's for, the record-edit-export loop, the no-invented-notes rule, and the scope limits. Everything was built during Build Week, and the commit history is public.

Challenges we ran into

  • Honest transcription: keeping silence and noise at zero notes, keeping repeated same-pitch notes separate, and stopping vibrato from breaking one note into many.
  • Staying responsive: running analysis in a worker with job IDs, so Cancel works and stale results are thrown away.
  • Mic lifecycle edge cases: delayed permission prompts, releasing the mic on stop, cancel and errors, and cancelled playback coming back from async audio resumes.
  • Real voices are messy: humming is much harder than synthetic test tones, so the editor turned out to matter as much as detection.

Accomplishments that we're proud of

  • A complete hum-to-MIDI loop that runs entirely in the browser.
  • On synthetic test melodies, every note lands on the right pitch with under 40 ms of timing error, and silence and noise produce zero notes.
  • Exported MIDI is verified by reading the file back.
  • Full keyboard editing and zero automated accessibility violations on the states I tested.
  • I shipped something I'll actually use for my own voice memos.

What we learned

  • Good scores on synthetic tests say little about real humming, so fixing mistakes has to be fast.
  • A pitch detector's "clarity" measures how periodic a sound is, not whether the note is correct.
  • Keeping detection and segmentation separate made the whole pipeline much easier to test.
  • Directing AI agents well takes a precise spec and real verification. Tests mattered more than ever.

What's next for Humline

  • Better transcription for real voices: soft or breathy singing, glides, and octave slips.
  • Turning on the cloud library and saving audio with projects.
  • Richer instrument sounds, mobile recording, and Safari, Firefox and phone support.

Built With

Share this project:

Updates

Submission history