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.

Recommendation Architecture

I separated creative interpretation from catalog validation. GPT-4o turns the user's song or mood description into a structured vibe summary and a list of song-and-artist recommendations. The application then searches Spotify for each recommendation using both track and artist, runs those lookups concurrently, and removes suggestions that cannot be resolved to real Spotify tracks before displaying them.

This gives the model room to reason about subjective qualities such as sound, style, lyrical themes, and attitude while keeping the final results grounded in Spotify's catalog. When a user asks for more recommendations, the existing tracks are included in the model context so the next set avoids repeating earlier results.

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

Playback and Cross-Window State

I used NextAuth with Spotify OAuth and the Spotify Web Playback SDK to support authenticated, in-browser playback. The custom player transfers playback to the browser as a Spotify device and maintains play/pause state, playback position, seeking, volume, and track changes as users move through recommendations. When the browser cannot use the full playback path, the interface falls back to Spotify's embedded player.

For picture-in-picture mode, I move the active player into a Document Picture-in-Picture window rather than creating a disconnected second player. When that window closes, the same player is returned to its original container, preserving the active playback experience while the user works in another tab.

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.