My First Spotify – “Name the Artist” trivia game

Like many, I was paying close attention last week during the run up to Spotify’s “big announcement”.  When they revealed their plan to integrate apps within their ecosystem, I was intrigued. I decided to jump right in and try and build something within Spotify for a couple of reasons: 1) They are a major player in the new music industry and its interesting to see how they are approaching apps.  2) I’ve been learning HTML5/JS and I saw an opportunity to put my skills to the test.  3) I’ve been meaning to revisit the amazing Echo Nest Platform, and after seeing this blog post by Paul Lamere I was inspired to give it a shot.  Now that I’ve gone through the process, I wanted to share the outcome as well as some tips and tricks I picked up along the way.

A Spotify app is basically a specialized website that sits within the main Spotify program, written in the familiar HTML5 + Javascript + CSS paradigm.  A Javascript library allows access to much of Spotify’s functionality, and you can combine that with other APIs, external web queries and assorted HTML5 trickery to produce your app.  Spotify does not fully support the HTML5 protocol (for example, the audio and video tags are not supported) but there’s a fair amount of functionality to work with.

The first step was to register as a developer, which is a fairly painless process.  I was approved within 24 hours.  For my first experiment, I decided to build a little music trivia game – “Name the Artist”.  The results can be seen in the video above.  It’s rough around the edges and its not going to win any design awards, but it works and its actually fairly fun and challenging.

To start, you enter a musical style.  That style is used to search for music via Echo Nest and return a list of songs that become potential quiz questions.  For each question, I randomly choose an entry from my search results, and then play it through Spotify.  Then, I use Echo Nest to return a list of similar artists in order to populate the other buttons with believable choices.  There is a score that tallies up at the top (300 points if you get it right on the 1st guess, 200 for the 2nd guess, 100 for the 3rd) and I’m using the local storage functionality to save a high score and track it across multiple play sessions.

Spotify API Details

The basic process of developing a Spotify app is easy – developer approval is free and painless, there’s no actual API to download, and the HTML5 framework has one of the lowest technical barriers of entry of any app development I’ve seen (I’m looking at you, Objective-C).  As long as you follow along with the tutorial and setup your files correctly its easy to get something up and running within Spotify.  The built-in inspector/debugger is very user friendly… overall, not a bad little dev environment.

The documentation for the Spotify API, however, is really lacking.  There is very little information on the reference page, and documentation for entire sections of the API are missing entirely.  For example, it was fairly straightforward to find out how to play a track on Spotify when you knew the URI, but it took me forever to figure out how to search for a URI given a track name or artist.  You actually have to open up the Spotify application bundle and dig through the files in order to find a lot of functionality that isn’t documented (credit to tobias_ at StackOverflow for that one).  After digging through the Search source files, I was able to find the answer… here’s how you do it, for the curious:

//returns the Spotify URI of the first search result
function searchForURI(search) {
sp.core.search(search, true, true, {
onSuccess: function(result) {
//return the URI of the first track
var URI;
URI = result.tracks[0].uri; //1st result from array of tracks
playTrack(URI); //insert your playback function here
}
});
}

Some other Spotify oddities to be aware of… for whatever reason, I am getting really bad results from using the Spotify search with the genre tag.  When I search “genre:hip-hop” I get 0 results, even though it is clearly on the list of acceptable genres (very strange).  That’s why I ended up using EchoNest to populate my list of potential songs.  Also, as someone that has opted to use Spotify for free (w/ adds) I noticed that every so often my app would get interrupted by an attempt to play an ad, and it always ended up breaking my code.  The documentation mentions that you should be aware that ads will play and make sure to deal with them in your code, but its not clear anywhere how you actually do that.

Echo Nest API Details

Echo Nest is really an incredible API… I’ve tinkered with it off and on for about a year and I was really glad to revisit it for this project.  In my past experimentation I’ve found that the track analysis features provide mixed results – the beat maps are often misaligned or just plain wrong, section markings are erratic at times, etc – but the metadata API is incredibly powerful and works really well.

To get my potential list of songs, I used the Song Search function, passing the user-specified style through to the Echo Nest “style” argument in my search.  I used “artist_min_familiarity” and “song_min_hotttnesss” to ensure that I was getting back tracks that would be relatively mainstream; without them, I was getting some really obscure results that made the game very difficult.  Those search parameters, by the way, are a huge part of what makes Echo Nest so powerful.  The ability to filter results by how well-known an artist is, or how popular a song is right now, are extremely powerful and useful features.

One downside of the Echo Nest search is that its almost too good – you get pretty much the exact same results every time you search… useful in some cases, but not if you are trying to build a quiz game that will generate new questions every time.  In order to mitigate this, I used the “sort” argument to get results back by tempo, which added a bit of variety.  I still ended up getting a lot of similar results – many tracks by the same artist, and in some cases many versions of the same song – so I had to add some randomization code to my app, as well as a history to prevent the same artist from playing back twice in a row.  It seems like the Playlist method might solve some of my problems, as it’s designed to return a list of songs that do not repeat.  However, you can’t currently build a playlist from a specific genre (feature request!) so I didn’t get to take advantage of it this time around.

Another issue that I encountered with my search is that the number of results varied wildly based on the style input.  For example, searching for “rap” gave me a ton of results, but “hiphop” returned only a handful.  Not exactly sure what is causing this, but its worth noting that this is a “style” search, not a “genre” search (which isn’t available)… so my best guess is that style is a lot more subjective and probably less uniformly applied.

The alternate choices are generated with the Similar Artist method.  Again, you get the exact same results every time you search for the same artist, so I had to add some randomization to make sure that the choices presented to the player seemed reasonable.

Final Thoughts

This first attempt at a Spotify app is pretty simplistic and not much to look at, but its a functional piece of code and I learned a lot in the process of making it – not bad for just a few nights work!

As far as whether the Spotify app initiative will ultimately be successful – I’d say the jury is still out.  There’s no doubt that Spotify is a powerful player in the space, but there are some issues that give me pause.  As mentioned, the documentation for the API is really lacking right now.  Presumably this is a result of the beta status, but it needs to improve a lot if they want to get enable developers.  There’s also a nebulous concept submission to deal with before your app can be “officially” published, and as far as I can tell there is no way to charge money for an app.  That will definitely limit the appeal to a lot of indie developers… the kind that typically bring interesting ideas to the table.  It’ll be interesting to see how things develop as Spotify Apps move from Beta out into wide release.

I don’t have any plans to try and submit any official Spotify apps anytime soon, but I enjoyed the process and I’ll probably continue to tinker with it in my free time.  Hopefully this post was informative and helpful to anyone looking to get started with the Spotify API.  If you have any comments or questions, feel free to post your thoughts.

Advertisements
  1. Great read. I have been recently playing around with Spotify. Looking into getting involved with some Echo Nest (Only found it the other day!)

    Good Job. 🙂

    • Thanks very much Tom! Echo Nest has a lot to offer, I’ve only just scratched the surface myself. Let me know if you come up with anything cool…

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: