Last week The Echo Nest and Spotify announced an integration of APIs making it easy for developers to write Spotify Apps that take advantage of the deep music intelligence offered by the Echo Nest. The integration is via Project Rosetta Stone (PRS). PRS is an ID mapping layer in the API that allows developers to use the IDs from any supported music service with the Echo Nest API. For instance, a developer can request via the Echo Nest playlist API a playlist seeded with a Spotify artist ID and receive Spotify track IDs in the results.
This morning I created a Spotify App that demonstrates how to use the Spotify and Echo Nest APIs together. The app is a simple playlister with the following functions:
- Gets the artist for the currently playing song in Spotify
- Creates an artist radio playlist based upon the now playing artist
- Shows the playlist, allowing the user to listen to any of the playlist tracks
- Allows the user to save the generated playlist as a Spotify playlist.
The entire app, including all of the HTML, CSS and JavaScript, is 150 lines long.I’ve made all the code available in the github repository SpotifyEchoNestPlaylistDemo. Here are some of the salient bits. (apologies for the screenshots of code. WordPress.com has poor support for embedding sourcecode. I’ve been waiting for gist embeds for a year)
makePlaylistFromNowPlaying() – grabs the current track from spotify and fetches and displays the playlist from The Echo Nest.
fetchPlayst() – The bulk of the work is done in the fetchPlaylist method. This method makes a jsonp call to the Echo Nest API to generate a playlist seeded with the Spotify artist. The Spotify Artist ID needs to be massaged slightly. In the Echo Nest world Spotify artist IDs look like ‘spotify-WW:artist:12341234’ so we convert from the Spotify form to the Echo Nest form with the one liner:
var artist_id = artist.uri.replace('spotify', 'spotify-WW');
Here’s the code:
The function createPlayButton creates a doc element with a clickable play image, that when clicked, calls the playSong method, which grabs the Spotify Track ID from the song and tells Spotify to play it:
Update: I was using a deprecated method of playing tracks. I’ve updated the code and example to show the preferred method (Thanks @mager).
When we make the playlist call we include a buckets parameter requesting that spotify IDs are returned in the returned tracks. We need to reverse the ID mapping to go from the Echo Nest form of the ID to the Spotify form like so:
Saving the playlist as a spotify playlist is a 3 line function:
Installing and running the app
To install the app, follow these steps:
- make sure you have a Spotify Developer Account
- Make a ‘playlister’ directory in your Spotify apps folder (On a mac this is in ~/Spotify/playlister)
- Get the project files from github
- Copy the project files into the ‘playlister’ directory. The files are:
- index.html – the app (html and js)
- manifest.json – describes your app to Spotify. The most important bit is the ‘RequiredPermissions’ section that lists ‘http://*echonest.com’. Without this entry, your app won’t be able to talk to The Echo Nest.
- js/jquery.min.js – jquery
- styles.css – minimal css for the app
- play.png – the image for the play button
- icon.png – the icon for the app
To run the app type ‘spotify:app:playlister’ in the Spotify search bar. The app should appear in the main window.
Wrapping Up
Well, that’s it – a Spotify playlisting app that uses the Echo Nest playlist API to generate the playlist. Of course, this is just the tip of the iceberg. With the Spotify/Echo Nest connection you can easily make apps that use all of the Echo Nest artist data: artist news, reviews, blogs, images, bios etc, as well as all of the detailed Echo Nest song data: tempo, energy, danceability, loudness, key, mode etc. Spotify has created an awesome music app platform. With the Spotify/Echo Nest connection, this platform has just got more awesome.
Music Machinery 