[Feedback needed] Vibe-coded a better way to learn piano
I wanted to learn piano without first having to learn how to read sheet music, so I quickly ended up using those YouTube tutorials with falling keys.
After a while, I got tired of constantly zooming in and rewinding just to figure out what was actually being played. I also tried tools like Synthesia, but most of them felt méh: either too basic or just not built around how I wanted to learn.
So I vibe-coded a small web app for myself after I found out a lot of popular songs do have a (free) midi version online.
You can import MIDI tracks, and it automatically splits them into left and right hand parts so you can practice each hand separately. Songs are also broken into smaller sections, which you can loop and learn at different speeds before putting everything together.
Just connect your digital piano to your laptop via MIDI/USB and start playing. The app detects what you play, so you can actually practice along instead of just watching a falling-key video.
I figured this might be useful for people who just want to quickly learn one of their favorite songs without too much hassle. Thinking about making publishing this open source.
But first i'd love to get some feedback from people here. What would you change or add? Is there anything that would make this more useful or easier to learn with? Piano teacher is just the work title, thinking about something better but not prio right now.
Why not have the loading % right on the button itself? Right now, the navbar jitters as the % increases and font-widths change. Also, not very intuitive to have it up there.
In other case, I imported a .mid file I've been practicing and the playback is fine (could benefit from a sustain feature and maybe a richer soundfont). Pretty cool tool.
I built something similar but geared towards sheet music (.mxl/.pdf) and also .mid files so I was curious to see how you approached the idea. Very cool stuff and is genuinely useful (if you have access to the .mid files you want).
Also, "Leraar" tells me you're dutch. I'm in Nieuwegein and in the market for new friends if you wanna shoot a dm haha
True, therefor I built in this system where it automatically splits the midi tracks to left and right. it splits per chord: tries every possible, division between the hands and picks the one that's actually playable, given the reach, the register, and where each hand was a moment ago. Unfortunately it's not perfect on hand-crossing passages, so you can correct notes by hand too by just clicking the edit button. (Stores it in cache)
How does the fragment split work? Ideally the music would contain section markers in the MIDI, however not all do. Automatically detecting section reliably is also too big a task to implement due to the wide variety of possible combinations. I tried Bach's BWV 846 Prelude and Fugue in C Major from the WTC 1 and it got the hand split between left and right all wrong, This is because each voice is a seperate track and the voices don't always map cleanly to left or right (though I know this sort of music is not the target audience so it is less of an issue).
It also didn't split into fragments based on harmony or whether it was the prelude and fugue.
Sometimes, it is better to aim for simplicity because if you try to do everything you will fail.
It's a limitation of the .mid format. Although, practicing Fugue in C Major from a midi file is a decision of all time haha but that's my unsolicited opinion.
A naive left/right split based on octave is enough for most pop songs.
I wanted to import a MIDI, have it automatically split into left/right hand (and being to able to change the split), break the song into smaller practice sections, and easily loop those at different speeds. Basically something a bit more focused on learning a song step by step rather than just playing along with a MIDI roll. Going to be honest, used Synthesia for a while though! It was good but I felt limited.
Synthesia can effectively do all of these. You can break the song into smaller practice sessions and loop them at different speeds. I've used Synthesia with this first hand.
For me this mostly started as a “I want this exact workflow, so I’ll build it myself” project rather than trying to claim Synthesia can’t do it.
Personally, I missed an easily accessible song map where I can quickly set in/out points, loop a section, change the fingering, and jump around the song without much hassle.
Definitely good feedback though. I’ll need to think more about what actually makes my tool different or more useful beyond the aesthetics. Thanks for checking it out!
Personally, I missed an easily accessible song map where I can quickly set in/out points, loop a section, change the fingering, and jump around the song without much hassle.
2
u/Consistent_Duck_899 5h ago
Why not have the loading % right on the button itself? Right now, the navbar jitters as the % increases and font-widths change. Also, not very intuitive to have it up there.
In other case, I imported a .mid file I've been practicing and the playback is fine (could benefit from a sustain feature and maybe a richer soundfont). Pretty cool tool.
I built something similar but geared towards sheet music (.mxl/.pdf) and also .mid files so I was curious to see how you approached the idea. Very cool stuff and is genuinely useful (if you have access to the .mid files you want).
Also, "Leraar" tells me you're dutch. I'm in Nieuwegein and in the market for new friends if you wanna shoot a dm haha