DEV Community

Rustam Apay
Rustam Apay

Posted on

Guitar Playing Analysis App (vibe coded in 1 day)

I really like Sting's music, and every time I came across a guitar in various random circumstances in my life, I always started learning his songs. First and foremost, it was Shape of My Heart, and then Fragile. I easily found full guitar lesson tutorials for them on YouTube.

But for my third favorite song, Desert Rose, I couldn't find a lesson for it anywhere, probably because it's not typically played on the guitar. I started searching YouTube simply for performances of the song on guitar, and I only liked one specific rendition. Naturally, it wasn't in a lesson format, but just a performance of the playing and the song.

I was so determined to learn it that I took screenshots of every finger position and marked the picking patterns on those screenshots. Then I started to doubt that I might have misheard or incorrectly marked something on the images. I also used a service to remove the girl's vocal track which was distracting from the guitar playing.

And then I remembered that vibe coding exists nowadays. Why not write an application for this kind of analysis of musical pieces? And today, I wrote it in a single day.

What does it do? We can conveniently rewind the video with tenth-of-a-second accuracy and catch the moments when the musician changes their finger positions. Then, on a guitar simulation, we mark the spots where the notes and strings are being fretted. We also mark the picking pattern in its chronological order.

If we need to use the same finger position and picking pattern, we can reference it linked to the video. That is, having created a position once, we can use it repeatedly later on. Afterwards, we see the complete list of played excerpts.

We can click on them and listen to them separately, refining and checking our notation. And also polishing our own playing by example.

You can try out this application by downloading it from GitHub. You only need to place your video in the public/video.mp4 folder.

Top comments (2)

Collapse
 
lylaex profile image
Lylaex

Late to the party, but I’m curious if you’ve kept building on this since the first version. A one‑day prototype for something this fun is impressive, and I’d love to know if you tried adding features like timing accuracy or tone detection. If anyone else is experimenting with similar React audio tools, what libraries worked best for you?

Collapse
 
aydenonic profile image
Mike • Edited

I had a similar struggle, and what helped was mixing short daily practice with guided lessons. I ended up using artmaster.com because the AI teacher adjusts to what I mess up on, and the bite-sized videos keep things from feeling overwhelming. The 7‑day trial gave me enough time to see if I’d stick with it, and the pro teachers there explain things in a way that actually clicks for me.