Striking the Right Chord: When AI Meets Music

As a passionate weekend guitarist, handling lyrics, chords, and the guitar simultaneously can be quite demanding. The moment your hands are glued to the guitar, scrolling through a songbook or swiping on your phone becomes nearly impossible. It’s a classic dilemma—one that’s more frustrating than missing that perfect chord change.?

But instead of just daydreaming about a solution, I saw this as the perfect opportunity to test out a new tool that we got access to. Enters Anthropic’s Claude 3 Opus. I’d played around with OpenAI’s ChatGPT-4 before, but the results were... let’s just say, “quirky.” So this time, I decided to take a different approach. Armed with macOS’s built-in dictation feature, I was ready to code hands-free, quite literally.?

Bringing AI Onboard: The Claude Collaboration?

So Claude and I started with a basic HTML5 application designed for tablet use. I shared a detailed description of what I wanted and in response, Claude structured the code to divide the screen into two sections: one for navigating the song list and another for displaying the selected song’s details, exactly the way I wanted it to be.? ? ?

While reviewing the layout, I realized improvements were needed:?

This modification was important to improve the overall functionality, making the interface even more intuitive and accessible. This is the final version of the code I received after this step: check the code here.?

Overcoming Hosting Hurdles?

Moving forward, I asked Claude for help improving the app's capabilities by integrating the functionality to retrieve song data from a server. My goal was to organize song details - titles, authors, and filenames - into a manageable JSON format. ? ? ?

However, I ran into a technical issue, my hosting provider's configuration blocked the listing of file directories due to restrictions set in the .htaccess file using the Options directive.?

To navigate this technical challenge, I asked Claude to develop a PHP script capable of generating a JSON file that compiled a list of songs from a specific folder. ? ? ?

Claude responded efficiently, providing the crafted PHP code that not only bypassed the hosting limitations but also enabled dynamic data retrieval of the song information. This solution streamlined the process, ensuring seamless access to the song database.?

This is the iteration of the code that was presented to me.?

Further Challenges and Solutions Implementation?

Working with my new coding buddy, Claude, we took the application's development up another level, by incorporating additional functionalities, such as enabling backward navigation within the browser and restructuring the code into separate HTML, CSS, and JavaScript sections. As our work on the application continued, we did encounter a few more obstacles. ? ?

Firstly, the Polish characters within the song titles weren't displaying correctly, and the second challenge emerged when the song text began scrolling unexpectedly.? ?

Both issues were addressed perfectly. Claude proposed using a font that supports Polish characters and provided the necessary CSS code for seamless integration, and recommended further adjusting the CSS related to the scrolling issue.?

A ChatGPT Contrast?

In Comparison to my previous experience from a couple of months ago with OpenAI’s ChatGPT, where I used it to create a simple script to integrate Atlassian JIRA with Confluence, Claude is completely in a class of it’s own. Despite numerous attempts, ChatGPT failed, producing script versions plagued with bugs. Each fix seemed to breed new issues, ultimately leading to frustration and an unresolved task. In contrast, Claude's, dare I call it “guidance” and proficiency not only navigated us seamlessly through challenges but also uplifted the development process into a great collaboration.?

Conclusion?

In the end, Claude didn’t just help me build a functional app, it made the process enjoyable and surprisingly smooth. If Claude ever needed a LinkedIn recommendation, it’d get a pretty good review—maybe even better than some human developers I’ve worked with.?

This little project wasn’t just about solving my own problem. It highlighted how AI can genuinely assist in turning ideas into reality. So if you’ve got a concept in mind, I’d highly recommend giving AI-assisted coding a shot. You might be surprised at just how far a good collaboration can take you.?

The Final Cut?

With our app now complete, I’m excited to share it with fellow musicians. It’s a small, simple tool, but one that makes playing and singing just a little bit easier—and a lot more fun. So here’s to more music and less scrolling!?

Final App Version?