Posts Tagged spotify

Writing an Echo Nest + Spotify App

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 app is functional, but not very pretty. Here’s a screenshot:

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. 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://*’. 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.

Leave a comment

Boil the Frog – the unreleased Spotify Version

Update – You are probably looking for this web-based version of Boil The Frog and the blog post about it.

Screenshot 1:2:13 5:54 AM-3

The rest of this article is about the unreleased Spotify Version of Boil the Frog.

I’m at Music Apps Hack Weekend doing my favorite thing: hacking on music. I’ve just finished my hack called Boil the Frog.  Boil the Frog  is a Spotify App that will create playlists that gradually take you from one music style to another.  It is like the proverbial story of the frog in the pot of water. If you heat the water gradually, the frog won’t notice and will happily sit in the pot until it becomes frog stew.  With Boil the Frog  you can do the same thing musically.  Create a playlist that gradually takes your pre-teen from Miley Cyrus to Miles Davis, or perhaps more perversely the Kenny G fan to Cannibal Corpse.

To build the app I built an artist similarity graph of 100,000 of the most popular artists. I use The Echo Nest artist similarity to connect each artist to its four nearest neighbors. To find the path between any two artists I use a bidirectional Dijkstra shortest path algorithm.  Most paths can be computed in less than 100ms.

The Spotify Apps API is the perfect hacking platform. You can build a Spotify app that has full access to the vast Spotify music catalog and artwork, along with access to the listener’s catalog.   Since the Spotify Apps run in an embedded browser all of your web app programming skills apply.  You can use jQuery, make calls to JSON APIs, use HTML 5 canvas. It is all there. Spotify has done a really good job putting together this platform.  The only downside is that, unlike the web, it is hard to actually release Spotify apps, but the Spotify team is working to make this easier.    I’d love to release Boil the Frog because it is really fun to make playlists that bring you from one music style to another. It is interesting to see what musical neighborhoods you wander through on your way.  For instance, I made a Kenny G to Cannibal Corpse playlist. To get there, the playlist brought me from easy listening, to movie soundtracks and then through video game soundtracks to get to the heavy metal world.  Cool stuff.  If you want to see a playlist between two artists let me  know in the comments and I’ll create and share the playlist with you.

I made a video of Boil the Frog in action.   Check it out:


Update: I’ve just pushed the client code out to github:

, , ,


The Future of Mood in Music

One of my favorite hacks from Music Hack Day London is Mood Knobs.  It is a Spotify App that generates Echo Nest playlists by mood. Turn some cool virtual analog knobs to generate playlists.

Mood Knobs

The developers have put the source in github. W00t.  Check it all out here: The Future of Mood in Music.

, ,

1 Comment

My Music Hack Day London hack

It is Music Hack Day London this weekend.  However, I am in New England, not Olde England, so I wasn’t able to enjoy in all the pizza, beer and interesting smells that come with a 24 hour long hackathon.  But that didn’t keep me from writing code. Since Spotify Apps are the cool new music hacking hotttnesss, I thought I’d create a Spotify related hack called the Artist Picture Show. It is a simple hack – it shows a slide show of artist images while you listen to them. It gets the images from The Echo Nest artist images API and from Flickr.  It is a simple app, but I find the experience of being able to see the artist I’m listening too to be quite compelling.

Slightly more info on the hack here.


, ,


Building a Spotify App

On Wednesday November 30, Spotify announced their Spotify Apps platform that will let developers create Spotify-powered music apps that run inside the Spotify App.   I like Spotify and I like writing music apps so I thought I would spend a little time kicking the tires and write about my experience.

First thing, the Spotify Apps are not part of the official Spotify client, so you need to get the Spotify Apps Preview Version.  This version works just like the version of Spotify except that it includes an APPS section in the left-hand navigator.

If you click on the App Finder  you are presented with a dozen or so Spotify Apps including,  Rolling Stones, We are Hunted and Pitchfork.  It is worth your time to install a few of these apps and see how they work in Spotify to get a feel for the platform. MoodAgent has a particularly slick looking interface:

A Spotify App is essentially a web app run inside a sandboxed web browser within Spotify.  However, unlike a web app you can’t just create a Spotify App, post it on a website and release it to the world. Spotify is taking a cue from Apple and is creating a walled-garden for their apps. When you create an app, you submit it to Spotify and if they approve of it, they will host it and it will magically appear in the APPs sections on millions of Spotify desktops.

To get started you need to have your Spotify account enabled as a ‘developer’. To do this you have to email your credentials to    I was lucky, it took just a few hours for my status to be upgraded to developer (currently it is taking one to three days for developers to get approved).  Once you are approved as a developer, the Spotify client automagically gets a new ‘Develop’ menu that gives you access to the Inspector, shows you the level of HTML5 support and lets you easily reload your app:

Under the hood, Spotify Apps is based on Chromium so those that are familiar with Chrome and Safari will feel right at home debugging apps.  Right click on your app and you can bring up the familiar Inspector to get under the hood of your application.

Developing a Spotify App is just like developing a modern HTML5 app.  You have a rich toolkit: CSS, HTML and Javascript. You can use jQuery, you can use the many Javascript  libraries. Your app can connect to 3rd party web services like The Echo Nest.  The  Spotify Apps supports just about everything your Chrome browser supports with some exceptions: no web audio, no video, no geolocation and no Flash (thank god).

Since your Spotify App is not being served over the web, you have to do a bit of packaging to make it available to Spotify during development.   To do this you create a single directory for your app. This directory should have at least the index.html file for your app and a manifest.json file that contains info about your app.  The manifest  has basic info about your app.  Here’s the manifest for my app:

% more manifest.json
 "BundleType": "Application",
 "AppIcon": {
     "36x18": "MusicMaze.png"
 "AppName": {
     "en": "MusicMaze"
 "SupportedLanguages": [
 "RequiredPermissions": [

The most important bit is probably the ‘RequiredPermissions’ field. This contains a list of hosts that my app will communicate with. The Spotify App sandbox will only let your app talk to hosts that you’ve explicitly listed in this field. This is presumably to prevent a rogue Spotify App using the millions of Spotify desktops as a botnet.  There are lots of other optional fields in the manifest. All the details are on the Spotify Apps integration guidelines page.

I thought it would be pretty easy to port my MusicMaze to Spotify.   And it turned out it really was. I just had to toss the HTML, CSS and Javascript into the application directory, create the manifest, and remove lots of code.  Since the Spotify App version runs inside Spotify, my app doesn’t have to worry about displaying album art, showing the currently playing song, album and artist name, managing a play queue, support searching for an artist. Spotify will do all that for me. That let me remove quite a bit of code.

Integrating with Spotify is quite simple (at least for the functionality I needed for the Music Maze). To get the currently playing artist I used this code snippet:

var sp = getSpotifyApi(1);
function getCurrentArtist() {
   var playerTrackInfo = sp.trackPlayer.getNowPlayingTrack();
   if (playerTrackInfo == null) {
      return null;
   } else {
      return track.album.artist;

To play a track in spotify given its Spotify URI use the snippet:

function playTrack(uri) {
     sp.trackPlayer.playTrackFromUri(uri, {
        onSuccess: function() { console.log("success");} ,
        onFailure: function () { console.log("failure");},
        onComplete: function () { console.log("complete"); }

You can easily add event listeners to the player so you are notified when a track starts and stops playing. Here’s my code snippet that will create a new music maze whenever the user plays a new song.

function addAudioListener() {
    sp.trackPlayer.addEventListener("playerStateChanged", function (event) {
        if ( {
            if (getCurrentTrack()  != curTrackID) {
                var curArtist = getCurrentArtist();
                if (curArtist != null) {

Spotify cares what your app looks like.  They want apps that run in Spotify to feel like they are part of Spotify. They have a set of UI guidelines that describe how to design your app so it fits in well with the Spotify universe.   They also helpfully supply a number of CSS themes.

Getting the app up and running and playing music in Spotify was really easy. It took 10 minutes from when I received my developer enabled account until I had a simple Echo Nest playlisting app running in Spotify

Getting the full Music Maze up and running took a little longer, mainly because I had to remove so much code to make it work.  The Maze itself works really well in Spotify.   There’s quite a bit of stuff that happens when you click on an artist node.  First, an Echo Nest artist similarity call is made to find the next set of artists for the graph. When those results arrive, the animation for the expanding the graph starts.  At the same time another call to Echo Nest is made to get an artist playlist for the currently selected artist. This returns a list of ‘good’ songs by that artist.  The first one is sent off to Spotify for it to play.  Click on a node again and the next song it that list of good songs plays.  Despite all these web calls, there’s no perceptible delay from the time you click on a node in the graph until you hear the music.

Here’s a video of the Music Maze in action.  Apologies for the crappy audio, it was recorded from my laptop speakers.


Here’s the down side of creating a Spotify App.  I can’t show it to you right now.  I have to submit it to Spotify and only when and if the approve it, and when they decided to release it will it appear in Spotify.  One of the great things about web development is that you can have an idea on Friday night and spend a weekend writing some code and releasing it to the world by Sunday night.  In the Spotify Apps world, the nimbleness of the web is lost .

Overall, the developer experience for writing Spotify Apps is great.  It is a very familiar programming environment for anyone who’s made a modern web app. The debugging tools are the same ones you use for building web apps. You can use all your favorite libraries and toolkits and analytics packages that you are used to.   I did notice some issues with some of  the developer docs – in the tutorial sample code the ‘manifest.json’ is curiously misspelled ‘maifest.json’.  The JS docs didn’t always seem to match reality.   For instance, as far as I can tell, there’s no docs for the main Spotify object or the trackPlayer.  To find out how to do things, I gave up on the JS docs and instead just dove into some of the other apps to see how they did stuff . (I love a world where you ship the source when you ship your app).  Update – In the comments Matthias Buchetics points us to this Stack Overflow post that points out where to find the Spotify JavaScript source in the Spotify Bundle.  At least we can look at the code until the time when Spotify releases better docs.

Update2 – here’s a gist that shows the simplest Spotify App that calls the Echo Nest API.  It creates a list of tracks that are similar to the currently playing artist.  Another Echo Nest based Spotify App called Mood Knobs is also on github.

From a technical perspective, Spotify has done a good job of making it easy for developers to write apps that can tap into the millions of songs in the Spotiverse.   For music app developers, the content and audience that Spotify brings to the table will be hard to ignore.  Still there are some questions about the Spotify Apps program that we don’t know the answer to:

  • How quickly will they turn around an app?  How long will it take for Spotify to approve a submitted app? Will it be hours, days, weeks?  How will updates be managed?  Typical web development turnaround on a bug fix is measured in seconds or minutes not days or weeks.  If I build a Music Hack Day hack in Spotify, will I be the only one able to use it?
  • How liberal will Spotify be about approving apps? Will they approve a wide range of indie apps or will the Spotify App store be dominated by the big music brands?
  • How will developers make money?  Spotify says that there’s no way for developers to make money building Spotify apps. No Ads, no revenue share.  No 99 cent downloads.  It is hard to imagine why developers  would flock to a platform if there’s no possibility of making money.

I hope to try to answer some of these questions. I have a bit of cleanup to do on my app, but hopefully sometime this weekend, I’ll submit it to Spotify to see how the app approval process works.  I’ll be sure to write more about my experiences as I work through the process.

, , ,


The Spotified Billboard Charts – now with real playlists

Last month I Spotified the Billboard charts by using the Billboard and Spotify APIs.  However, I wasn’t actually able to create real Spotify playlists since the Spotify web API doesn’t allow creating or manipulating playlists.  But now I’m a premium Spotify user and as a premium user I can use the libspotify / despotify API to do just about anything that the official Spotify client can do.  With my new found Spotify superpower, I revamped my Billboard charts creator to create real Spotify playlists:

The Spotified Billboard Singles Charts

Instead of having to click on every song to listen to it, just click on the chart – this will open the Spotify playlist – hit play and you’ll be in Billboard chart heaven (or hell, depending on your music taste).

To interact with Spotify I used Jotify – a Java client library (based on despotify)  for Spotify.  Jotify is  well written, full featured library written by Felix Bruns (who has been extremely helpful in answering my questions).   I highly recommend Jotify.

, ,

1 Comment

Software that makes you buy hardware

Some software is so good is makes you want to buy hardware so you can run it best.  The classic example is Visicalc which is responsible for making the Apple ][ successful.  Over the years a few software apps have been compelling enough that I bought hardware for them:

  • AppleWriter -> 80 column card – The original Apple ][ could only render a 40 character wide, uppercase display.  However,  one of the first WYSIWYG word processors, AppleWriter supported an 80 column card.  This was a card you’d plug into a slot in the back of the Apple that will let it render 80 column, mixed-case text.  It was a must for word processing.  
  • Doom -> Gravis Ultrasound – Doom was the breakout 3D FPS shooter.  It also had awesome sound support – spatial audio with a kickass sound track.  The best way to render all that audio was the Gravis Ultrasound. It had really fine sounding midi soundbanks to make the distorted electric guitars sound like it came from a NiN album.  I can still remember with great fondness the soundtrack for Episode 1, Level 1:
  • Quake – > 3DFx Voodoo –  the first gaming 3D accelerator (remember video passthrough cables)- all of a sudden 3D FPS games could render at 25 Frames per second.

It has been a while since I’ve been engaged enough with a piece of software to buy some hardware for it. Sure I’ve upgraded memory and video cards to run a new game, but those were natural upgrade stepping stones aligned with the release of software.  However, now, once again,  I find myself with a piece of software that makes me want to upgrade my hardware in order that I can get the most out of the software.  The software is the Spotify iPhone app.



I installed the Spotify app on my 1st gen iPhone yesterday and have been playing with it all day.  There’s something about having 5 million songs available in my pocket ready to listen to that is just indescribable.    On the drive home, I listened to the WeAreHunted playlist, During dinner time with my 14 year old daughter we listened to the Glee soundtrack.  On my after dinner walk I listened to some tracks that  I hadn’t listen to since High School.   It is quite an interesting feeling to be out in the middle of nowhere, have a song come to mind, and moments later be listening to it.  And so I want more.  My feeble 1st gen iPhone with its edge network doesn’t get the music fast enough for me, so I have to rely on Wifi syncing.  Plus the paltry memory size leaves me with less than 2GB  for the local Spotify audio cache. Perhaps enough for  a thousand songs, but I want more!  And so I shall be upgrading my iPhone soon – the 3G and 32GB footprint will help me take full advantage of  this wonderful app.

, , ,


Spotifying over 200 Billboard charts

Yesterday, I Spotified the Billboard Hot 100 – making it easy to listen to the charts.  This morning I went one step further and Spotified all of the Billboard Album and Singles charts.

The Spotified Billboard Charts

That’s 128 singles charts (which includes charts like Luxembourg Digital Songs, Hot Mainstream R&B/Hip-Hop Song and Hot Ringtones ) and 83 album charts including charts like Top Bluegrass AlbumsTop Cast Albums and Top R&B Catalog Albums.

In these 211 charts you’ll find 6,482 Spotify tracks, 2354 being unique (some tracks, like Miley Cyrus’s ‘The Climb’ appear on many charts).

Building the charts stretches the API limits of the Billboard API (only 1,500 calls allowed per day!), as well as stretches my patience (making about 10K calls to the Spotify API while trying not to exceed the rate limit, means it takes a couple of hours to resolve all the tracks).  Nevertheless, it was a fun little project.  And it shows off the Spotify catalog quite well.  For popular western music they have really good coverage.

Requests for the Billboard API: Please increase the usage limit by  10 times.  1,500 calls per day is really limiting, especially when trying to debug a client library.

Requests for the Spotify API: Please, Please Please!!! – make it possible to create and modify Spotify playlists via web services.

, ,


The Billboard Hot 100. In Spotify.

Inspired by Oscar’s 1001 Albums You Must Hear Before You Die …. in Spotify I put together an app that gets the Top charts from Billboard (using the nifty Billboard API) and resolves them to a Spotify ID – giving you a top 100 chart that you can play.

The Billboard Hot 100 in Spotify

Here’s the Top 10:

  1. I Gotta Feeling by The Black Eyed Peas
    Weeks on chart:16 Peak:1
  2. Down by Jay Sean Lil Wayne
    Weeks on chart:13 Peak:2
  3. Party In The U.S.A. by Miley Cyrus
    Weeks on chart:7 Peak:2
  4. Run This Town by Jay-Z, Rihanna & Kanye West
    Weeks on chart:9 Peak:2
  5. Whatcha Say by Jason DeRulo
    Weeks on chart:7 Peak:5
  6. You Belong With Me by Taylor Swift
    Weeks on chart:23 Peak:2
  7. Paparazzi by Lady Gaga
    Weeks on chart:5 Peak:7
  8. Use Somebody by Kings Of Leon
    Weeks on chart:35 Peak:4
  9. Obsessed by Mariah Carey
    Weeks on chart:12 Peak:7
  10. Empire State Of Mind by Jay-Z + Alicia Keys
    Weeks on chart:3 Peak:5

Note that the Billboard API purposely offers up slightly stale charts, so this is really the top 100 of a few weeks ago.  I never listen to the Top 100, and I hadn’t heard of 50% of the artists so listening to the Billboard Top 100 was quite enlightening.  I was surprised at how far removed the Top 100 is from the music that I (and everyone I know) listen to every day.

To build the list I used my Jspot – and a (yet to be released) Java client for the Billboard API. (If you are interested in this API, let me know and I’ll stick it up on google code).  Of course it’d be really nifty if you could specify get and listen to a chart for a given week (i.e. let me listen to the Billboard chart for the week that I graduated from High School).  Sound like something to do for Boston Music Hackday.

Update: I’ve made another list that is a little bit more inline with my own music tastes:

The Spotified Billboard Top Modern Rock/Alternative Albums


Leave a comment

Where is my JSpot?

I like Spotify.  I like Java.  So I combined them.  Here’s a Java client for the new Spotify metadata API:  JSpot

This client lets you do things like search for a track by name and get the Spotify ID for the track so you can play the track in Spotify.  This is useful for all sorts of things like building web apps that use Spotify to play music, or perhaps to build a Playdar resolver so you can use Spotify and Playdar together.

Here’s some sample code that prints out the popularity and spotify ID for all versions of Weezer’s  ‘My Name Is Jonas’.

    Spotify spotify = new Spotify();
    Results<Track> results = spotify.searchTrack("Weezer",  "My name is Jonas");
    for (Track track : results.getItems()) { 
       System.out.printf("%.2f %s \n", track.getPopularity(), track.getId());

This prints out:




If you have Spotify and you click on those links, and those tracks are available in your locale you should hear Weezer’s nerd anthem.

You can search for artists, albums and tracks and you can get all sorts of information back such as release dates for albums, countries where the music can be played, track length, popularity for artists, tracks and albums.  It is very much a 0.1 release. The search functionality is complete so its quite useful, but I haven’t implemented the ‘lookup’ methods yet.   There some javadocs.  There’s a jar file: jspot.jar.  And it is all open source: jspot at google code.

, , , ,