How does the Spotify web browser button interact with the Spotify app?

Question

Check out this play button, written entirely it seems, using javascript: spotify play button.

Notice that pressing play will cause Spotify to start playing music. OK, I figure that's done via some app-specific protocol link (like spotify://play), although I could be wrong. But the crazy part is that if you stop playing music in Spotify, the button will be updated in the browser to show that the music has stopped playing! How does that work?

You can look at its source here.

Answer 1

The desktop runs a server at *.spotilocal.com on your computer, then on the web, the embed player (example) will choose a subdomain name (example: fdxubmxkqp.spotilocal.com).

It then makes request to the local server's API, examples:

https://fdxubmxkqp.spotilocal.com:4370/service/version.json
https://fdxubmxkqp.spotilocal.com:4370/simplecsrf/token.json

And it just returns some JSON:

{
"version": 9, 
"client_version": "1.0.10.107.gd0dfca3a"
}

See this screenshot for more info, or you can get the same info by going to news.spotify.com and using the Network inspector with spotilocal as a filter.

Answer 2

(Note, this isn't how they actually do it, but it is still a valid answer for someone looking to implement something similar)

Using Custom Protocol Content Handlers

It registers a custom protocol content handler. You can register protocols through your browser, for any "web-*" protocol, in order to have your website handle that protocol, but you can also have applications when installed register a protocol. (This is how Spotify works). See this article here:

Registering an Application to a URL Protocol

Your browsers can be configured to recognize certain handlers.

I'm not sure on how every browser does it, I believe it works on a registry level for Internet Explorer as per the article linked above.

Anyway, in Chrome and Firefox there is a window.navigator.registerProtocolHandler function for registering your protocols.

See here: https://developer.mozilla.org/en-US/docs/DOM/navigator.registerProtocolHandler

Also, check out this very brief article. (It's very sparse on information though)

---

Chrome 13 finally includes navigator.registerProtocolHandler. This API allows web apps to register themselves as possible handlers for particular protocols. For example, users could select your application to handle "mailto" links.

Register a protocol scheme like:

navigator.registerProtocolHandler(
    'web+mystuff', 'http://example.com/rph?q=%s', 'My App');

---

In case I didn't make this clear in my answer, I've provided information on how web applications can register their own protocol, but also, how desktop applications can register a new protocol. (Any web app, needs to be prefixed with web-* to avoid security concerns)