Music Vibe Explorer

Problem

Music discovery can feel overwhelming with millions of tracks available on streaming platforms. Users often struggle to find new music that matches their current mood or the vibe of a song they love, beyond the standard algorithm-driven playlists.

Spotify offers its own AI DJ, but I find that it tends to sample a lot from songs it already knows I like. It doesn't focus as much on songs that I might like based on songs I've previously listened to.

Goal

Create an intuitive web application that helps users discover music through natural language queries and vibe-based recommendations. The app needed to integrate with Spotify for song search and playback, use AI to understand musical preferences, and provide an engaging user experience with a custom-built player. Users needed to be able to easily change tracks while they do other tasks on their computer.

Key design goals:

• Make music discovery feel conversational and intuitive
• Stream music directly in the browser without leaving the app
• Provide playback controls that enhance the listening experience

Solution

I built a Next.js web application that uses GPT-4o to generate music recommendations based on natural language input. Users can enter either a song name or a mood description.

Key features:

• AI-powered recommendations: Users describe what they're looking for, and GPT-4o analyzes the input to suggest vibe-matched tracks
• Spotify integration: Queries the Spotify API to get tracks based on queries generated by GPT-4o. NextAuth handles OAuth authentication, and the Spotify Web Playback SDK enables in-browser streaming.
• Custom player: Full playback controls (play/pause, seek, volume, track navigation) with a picture-in-picture mode, so that you can keep the controls visible even while browsing other tabs
• Interactive UI: Card-based interface displays recommendations, and users can load more or play any track with a single click

Result

The app successfully combines AI-driven discovery with seamless Spotify playback. The custom player and picture-in-picture mode provide a more flexible listening experience than standard streaming interfaces.