Inspiration
I wanted to make the process of turning a musical idea into something visible feel less intimidating. A lot of people can hum a melody, play a guitar part, or sketch something on a MIDI keyboard, but transcribing that into music notation is still surprisingly technical. SongScribe came from the idea that you should be able to play something once and immediately see it take shape.
What I Learned
I learned that music technology is mostly a timing problem. MIDI events, microphone input, visual playback, and a metronome all arrive through different browser and backend systems, so keeping them aligned required a single shared clock.
I also learned that pitch detection is not magic. Single notes can be detected well, but overlapping instruments, noisy rooms, sustained chords, and microphone bleed quickly make the problem harder. Building filters, confidence checks and pitch smoothing helped make the experience more reliable.
How We Built It
EchoScore uses a React and TypeScript frontend with a FastAPI Python backend.
On the frontend, I built a recording studio that supports voice, acoustic guitar, and MIDI piano. The browser handles microphone access, Web MIDI input, a metronome, recording controls, and playback. It then displays the detected performance in a synchronized piano roll and lightweight notation view.
On the backend, microphone pitch frames are processed with YIN-based pitch detection, remove low-confidence or quiet input, smooth pitch jitter, merge nearby frames into notes, and quantize the final performance to a musical grid. I also built chord-recognition support using audio processing and chord templates.
Challenges We Faced
The biggest challenge was separating musical lines from a shared microphone. Singing and playing guitar at the same time can produce overlapping frequencies, and dense chords are VERY difficult to represent as individual notes. I addressed this with high- and low-pass filtering, confidence thresholds, pitch smoothing, and clear guidance for recording cleaner takes.
Another challenge was browser hardware support. Microphone permissions and MIDI compatibility can vary across browsers and machines, thus I designed the app around Chromium Browsers.
Finally, turning raw performance data into something musical without destroying the character of the original take required care. We preserve the raw timing and pitch information, then apply quantization as a separate refinement step rather than overwriting the original performance.
What's next for SongScribe
I would like to add support for more instruments, fine tune the chord detection software and finally deploy as a native application across the App Store and Play Store.
Log in or sign up for Devpost to join the conversation.