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

(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)