14

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.

3 Answers 3

4

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.

enter image description here

3

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

4
  • I'm not sure I understood 100% of your answer (maybe like 90%)... from what I got though, it sounds like you're referring to how to send a URL/URI request from the browser to the app. Like I said, I'm wondering how data goes from the app back to the browser, and I don't think your response answers that, unless I just misunderstood it completely. Oct 29, 2012 at 1:29
  • 6
    Spotify could register a "web-*" protocol as mentioned. That's not how they do it though. Your Spotify application has a local web server running on port 4371. Try and ping "hrsjtjfquwfoi.spotilocal.com" you will see it resolves to localhost. If you look at your network tab you will see that when the play button is pressed it updates a status in the page.
    – Layke
    Oct 29, 2012 at 9:52
  • I don't understand how the mechanism behind registering a web-* protocol (in the app, somehow), means Spotify can send data to the browser. That it's running a local web server is interesting, but that doesn't explain how the button in the browser gets updated, at least not directly. Do they do long-polling or use websockets to connect to that server to get notified of Spotify's status? Is that how it works? Oct 29, 2012 at 21:09
  • I'm thinking that might be it, the source does have a reference to that URL: return"https://"+ka+".spotilocal.com" Oct 29, 2012 at 22:08
3

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.