I want to build a feature where clicking a button on my webpage will automatically start playing a track in the user’s desktop Spotify application. The goal is to have the music play directly through their existing Spotify client without turning my website into a playback device.
I’ve tried several approaches that didn’t work:
Spotify Web API integration
Embedded Spotify widgets
Direct URL redirects
The key requirement is that the actual audio playback should happen in the user’s Spotify desktop app, not in the browser. I don’t want my website to become a media player itself.
Is there a way to communicate with the local Spotify client to trigger playback remotely?
You could try combining the Web Playback SDK with deep linking. The SDK plays through the browser, but you can set it up to transfer playback to the desktop app right after it starts. Just authenticate and start playback with the SDK, then use spotify: URIs to hand control over to the desktop client. Your web app kicks things off, but the desktop app takes over in seconds. The transfer’s automatic if the user has Spotify Connect enabled. I did this for a playlist sharing app and it worked way better than just using URI schemes - handles auth properly and gives you decent error handling when the desktop app’s not running.
Honestly, window.open() with Spotify URIs works best for me. Just do window.open('spotify:track:your-track-id', '_self') and it’ll open the desktop app if it’s installed. Way cleaner than location.href for the handoff. You might get popup warnings depending on browser settings, but most people just click through.
The desktop Spotify client doesn’t have a public API that browsers can talk to directly - security restrictions block that. But you can use Spotify URIs with the spotify: protocol instead. Just redirect users to something like spotify:track:4iV5W9uYEdYUVa79Ozker8 when they click your button. This launches the desktop app and starts playback. Only catch is users need Spotify installed and set as the default handler for spotify URIs. I’ve used this on a music discovery site and it works great on Windows and macOS. The UX feels smooth since you’re using the native protocol instead of fighting browser security.
Had this exact problem last year. window.location.assign('spotify:track:TRACK_ID') works way better than the other methods - handles the browser handoff much cleaner. The game changer was adding fallback detection. Listen for the blur event on your window to see if Spotify actually opened, then show an error after a few seconds if they’re still on your page. Catches all the cases where Spotify isn’t installed or the URI thing is broken. Pro tip: prefix your URIs with the web player URL as backup so users at least get sent to play.spotify.com when the desktop handoff craps out.