Update: Spotify have since discontinued their app platform.

About Unboxing

Unboxing is our regular feature where someone at Box UK spends a few hours playing with a new framework, library, tool or technique and blogs about his or her experience.

What is it?

At the tail end of last year, Spotify announced their new platform which enabled developers to create ‘apps’ within Spotify itself (yo dawg). As the CEO, Daniel Ek succinctly put it:

“We’re opening up our platform in a way that lets you curate the apps that you want, and really make Spotify yours. This is the beginning of something game-changing for digital music.”

Whether it is game-changing or not is yet to be seen; however, as you may have realised, developers at Box UK love playing with new things. So when the chance to build an app within Spotify came about we were obviously very excited. We all spend most days with headphones on listening to Spotify, so the cool and relevance factor with this was also pretty high.

I decided to get a developer account and take the new platform for a spin.

Getting to grips

The new Spotify platform means that developers can build on Spotify by creating their own applications inside of it using their API. The tech used to create Spotify apps is HTML5, CSS and Javascript. This is great news, as these are languages we use every single day here at Box UK and means that the learning curve for creating an app within Spotify is really low.

The platform itself is built on top of Chromium, which is an open source browser platform, used (and made famous) by Google Chrome. This means that the platform uses WebKit, so any HTML5 or CSS elements that work on WebKit will work here as well (this also includes any –webkit prefixed CSS elements).

There are a few key elements of HTML5 you don’t get; web audio (understandably), video (again, somewhat understandable) and geolocation. The geolocation omission is a shame, as I’m sure there would be lots of cool stuff you could do with geolocation and Spotify (think nearby gigs, what people are listening to around you etc.). Also worth noting (although kind of obvious) is that there is no Flash support.

You can use any JavaScript libraries you want and you can connect to any third-party web services you like (as long as you tell Spotify which ones via your manifest file). This really opens up what you can do with your app. There is nothing stopping you from having a big complicated server-side app which you communicate to via an API within Spotify, and in fact this is probably preferable if you wish to store state, or store just about anything really. You can use HTML5 local storage, but that is obviously very limited (and doesn’t perform greatly), and will be erased once Spotify is restarted.

The API essentially has two parts to it. You have the Metadata API and the Apps API.

Metadata API

This is essentially a third party web service, and can even be used outside of Spotify. If you have an app and need to retrieve any information on an artist, album or track, you can use the Metadata API to retrieve this information.

Apps API

This is the API for the player itself. It gives you access to the Spotify player itself, including the various models and views.

Going deeper: Soundtrackify

So, after the obligatory ‘hello world’ apps as seen on the official Spotify website, I decided to write something a bit more interesting to have a proper play.

The idea I came up for was ‘Soundtrackify’ which essentially grabs the latest movies from the Rotten Tomatoes API and attempts to find soundtracks for them on Spotify. It then allows the user to click through to the relevant album or click a button to play the album through Spotify.


The ‘Soundtrackify’ app

The biggest challenge I faced was retrieving accurate information on movie soundtracks. Genre support within Spotify is severely lacking, and APIs to retrieve this information also lacking or massively out of date. It is because of this reason that the app is simply a best guess (it basically searches Spotify by music title and assumes the top result). If you do happen to know of a reliable way of getting soundtrack information please chip in with a comment, or reply to my Quora question about this.

You can view the code on github. Feel free to download it, run it locally and even fork it and improve upon it! It’s all very basic, but gives a nice simple insight in how an app for Spotify can be built quickly and without complexity.

A few things to be aware of: Themes

There are two themes you can use for the styling of your app; dark and light. These are set up as Spotify resources, which you can use within your app. The dark theme is called adam.css and the light theme is called eve.css.

You must remember to add any external resources (including any JavaScript you may be linking to via CDN) to your manifest.xml.

Google Analytics

You can use Google Analytics in your app. There is support for it built straight into the app.

var googletracker = sp.require("sp://import/scripts/googletracker")var tracker = new googletracker.GoogleTracker("UA-19804545-13");tracker.track("app")

The information you can retrieve for the current user is very limited. Again this is a shame, as it means any kind of friend comparison you may wish to do within your app is out of the question, unless you use a third party service like last.fm (and not everyone will be using last.fm).

Launching your app

So you’ve built your kick ass app. What next? Well you will probably want to launch it! There are a few things you will need to be aware of.Your app must adhere to the Spotify UI and UX guidelines. Similar to how iPhone apps must adhere to the iPhone UI guidelines, you shouldn’t expect your Spotify app to pass submission if your app looks completely different to Spotify itself.

At the time of writing, Spotify are only accepting app submissions from a limited number of developers (the big players I imagine) so chances are that your app won’t get approved at the moment. However, this is pure speculation; there is not much information out there about this process as it’s all still quite new and spangly.

Final thoughts

The Spotify platform itself is flexible and easy to build on. It uses technology that most, if not all of the developer community is comfortable with, and that can only lead to an eventual lively community and vibrant app store (called App Finder currently).

The platform is still very much in its infancy and I wouldn’t expect any apps to yet get approved unless you are a last.fm or a Guardian type of organisation. However, I hope eventually they will open it up and more and more apps become available. I guess they don’t want to dilute the quality by having a high number of apps available, but I think Apple manage this successfully with their App Store, and it should be easily achievable within Spotify.

If you’re a developer, you probably already know the tech, so go and have a play, and be sure to let us know what you come up with!

Want to know more?

About the Author

Ian Jenkins

Ian Jenkins is a Principal Developer at Box UK. He has wide range of development experience in various platforms and languages, in particular PHP and Symfony. Ian has worked on and delivered a number of successful projects and is currently most interested in maintaining and transforming troublesome legacy projects into well-tested, high-performance web applications.