AudioArt

Skills: React.js, Next.js, JavaScript, CSS, Frontend/Backend API Integration

View Live Site: https://audio-art.netlify.app/

During the summer of 2023, I embarked on a journey of self-improvement in the realm of web development. My mission? To craft a passion-infused creation that would resonate with as many people as possible.

As I brainstormed for the perfect project, I pondered what sparks joy in both myself and a wide userbase. The answer? Music - the universal language of joy.

Ah, Spotify - my faithful companion that graced my phone screen daily. The personalized playlists that I uniquely tailor to my soul, has become an integral part of my life's soundtrack. Each playlist that found its home in my library holds a special place in my heart. And what takes each of them from merely great to utterly sublime? Custom cover art.

Speaking of greatness, the rise of OpenAI had caught my attention. With their revolutionary tools like ChatGPT and DALL-E, I knew there was magic waiting to be harnessed.

And lo and behold, out of this fusion of passion and possibility, spouted forth my brainchild - AudioArt. A little web app with a big purpose: to breathe life into playlists through cover art generated by OpenAI. It's like Picasso collaborating with the future - an artistic partnership between my music-loving heart and the AI marvels reshaping our world.

How was it first made?

I used React.js, Next.js, Spotify's Web API, and OpenAI's API. I wanted it to be short and quick user experience. So I made it as simple as possible: log into Spotify, choose a playlist, enter a description of what the playlist means to you, and click a button.

Why the description? Well, it's about making the cover art feel as personal as possible. To generate the cover art, I call ChatGPT (generatePrompt( )) to come up with a vivid image description which I then feed into DALL-E through an API call to output the image (fetchImage( )).

Alongside the user's description, I use Spotify's API to extract 4 audio features from each track on the playlist: danceability, energy, speechiness, and valence. I average these 4 features across the whole playlist and provide these values to ChatGPT, so it can take them into account while creating the image prompt.

I tailored the generatePrompt( ) API call to be more indicative of certain artistic elements in different contexts: when danceability and energy are high in a playlist, colors are brighter and vivid, speechiness cues up distinct shapes and hues, and if the valence is high, the image gives off an overall feel-good vibe. Once the art has been generated, the user can then download it for personal use.

What I'm working on now...

I want to streamline the experience even more by allowing the user to directly change the cover art of their playlist within my app. I also want to explore improving the call to ChatGPT by instructing it to use specific art styles with specific audio feature values. For example, if the danceability factor is greater than 0.66, use higher saturation and higher brightness in the colors. I also want to add more options for the user such as choosing an art style.

For now, this project is just a concept and idea - it's in development mode, only open to a very limited audience to log in and use. Later on down the road, if I am able to achieve my ambitious vision for the app, I'd apply for Spotify's extended quota mode.

I conceived an idea and worked hard to realize it by combining two products I love. Overall, I'm super proud of myself and the hard work that has gone into AudioArt so far.

Here's to a lifetime filled with continuous learning and boundless creative ideas.