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

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)

Answer 3

The spotify play button long polls (over HTTPS) the spotify application running on localhost to update the state.