Posts Tagged echo nest

Cannes Burn

This weekend brought me to Cannes and the French Riviera for the MIDEM Music Hack Day where I’ve spent about 40 hours working on my music hack called Cannes Burn.  Cannes Burn is a visualization that accompanies the song Burn by Ellie Goulding. Go check it out if you haven’t already seen it before reading on. It requires a modern computer and browser that supports webgl.

Image

The Hack uses the new ENsync.js library that I created last week. ENsync uses the Echo Nest analysis to provide synchronization of a JS web app with music.  With ENsync you can setup elaborate animations that are triggered by musical events (such on every bar, beat or tatum).  The Hack also uses threejs – the amazing 3D library by Mr.Doob.

Creating the hack was a whole lot of fun – I spent hours building 3D shapes out of flying cubes. I probably listened to the song Burn many hundreds of times this weekend. (Thanks to my hacker neighbors who put up with my endless Ellie looping without complaint).  

It has been a great weekend here in Cannes. It is so inspiring to be surrounded by a bunch of really smart folks who are passionate about music and technology and see and hear how they are building their stuff.  Such a great, sharing vibe from all of the hackers. I feel really lucky to  part of it all!   

Check out all the hacks on hacker league:  MIDEM Music Hack Day Hacks and check out my hack at:  Cannes Burn

 

, , , , ,

2 Comments

Using The Echo Nest to get the top 100 Twitter artists

This week Twitter and The Echo Nest announced a partnership where  Twitter IDs for verified accounts are incorporated into The Echo Nest’s ID mapping layer (aka Rosetta Stone).  This makes it easy for developers to get the Twitter handle for an artist.   To demonstrate just how easy it is, I wrote a little web app that displays the top 100 artists that have  verified Twitter accounts.    Here’s the core bit of code for the app:


function fetchTopTwitterArtists() {
    var url = 'http://developer.echonest.com/api/v4/artist/top_hottt?callback=?';

    $.getJSON(url, { 'api_key': 'GETYOUROWNAPIKEY', 'format':'jsonp',
      'results': 100, 'bucket': ['hotttnesss', 'id:twitter'], 'limit': true},
     function(data) {
       for (var i = 0; i < data.response.artists.length; i++) {
          var artist = data.response.artists[i];
          var elem = $("<li>");
          var link = $("<a>");
          var handle = artist.foreign_ids[0].foreign_id.replace('twitter:artist:', '');
          link.attr('href', 'http://twitter.com/' + handle);
          link.text(artist.name);
          elem.append(link);
          $("#results").append(elem);
       }
     }
  });
}

The key bits here are creating the artist/top_hottt request to The Echo Nest and  adding the id:twitter bucket and setting limit to true. This tells the Echo Nest to include the twitter handle information in the results and limit the results to only those artists that have twitter information.  After that it is just pulling the data out of the results and formatting it for the lovely display.   The Twitter ID info is returned in an ID block that looks like this:

            {"catalog": "twitter","foreign_id": "twitter:artist:LMFAO"}

Note that the Twitter ID is returned in a URN form. To get the actual Twitter URL for an artist we just need to replace the ‘twitter:artist:’ bits with ‘http://twitter.com/&#8217;.

You can see the app here:  Top 100 artists with verified Twitter accounts.  As you can see, I tried to make the web app as ugly as possible. The only thing it needs is some Comic Sansification.  The code is available for detailed study in this gist.

, ,

1 Comment

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 Last.fm,  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  platformsupport@spotify.com.    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": [
     "en"
 ],
 "RequiredPermissions": [
     "http://*.echonest.com"
 ]
}

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 (event.data.curtrack) {
            if (getCurrentTrack()  != curTrackID) {
                var curArtist = getCurrentArtist();
                if (curArtist != null) {
                    newTree(curArtist);
                }
            }
        }
    });
}

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.

[youtube http://youtu.be/finObm36V6Y]

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.

, , ,

36 Comments

Loudest songs in the world

Lots of ink has been spilled about the Loudness war and how modern recordings keep getting louder as a cheap method of grabbing a listener’s attention.   We know that, in general, music is getting louder. But what are the loudest songs? We can use The Echo Nest API to answer this question.  Since the Echo Nest has analyzed millions and millions of songs, we can make a simple API query that will return the set of loudest songs known to man.  (For the hardcore geeks, here’s the API query that I used).   Note that I’ve restricted the results to those in the 7Digital-US catalog in order to guarantee that I’ll have a 30 second preview for each song.

So without further adieu, here are the loudest songs


Topping and Core by Grimalkin555

The song Topping and Core by Grmalking555 has a whopping loudness of  4.428 dB.


Modifications by Micron

The song Modifications  by Micron has a loudness of  4.318 dB.


Hey You Fuxxx! by Kylie Minoise

The song Hey You Fuxxx! by Kylie Minoise with a loudness of 4.231 dB

Here’s a little taste of Kylie Minoise live (you may want to turn down your volume)


War Memorial Exit by Noma


The song War Memorial Exit by Noma with a loudness of 4.166 dB


Hello Dirty 10 by Massimo

The song Hello Dirty 10 by Massimo with a loudness of 4.121 dB.


These songs are pretty niche. So I thought it might be interesting to look the loudest songs culled from the most popular songs.  Here’s the query to do that.  The loudest popular song is:

Welcome to the Jungle by Guns 'N Roses

The loudest popular song is Welcome to the Jungle by Guns ‘N Roses with a loudness of -1.931 dB.


You may be wondering how a loudness value can be greater than 0dB.  Loudness is a complex measurement that is both a function of time and frequency.  Unlike traditional loudness measures, The Echo Nest analysis models loudness via a human model of listening,  instead of  directly mapping loudness  from the recorded signal. For instance, with a traditional dB model a simple sinusoidal function would be measured as having the same exact “amplitude” (in dB) whether at 3KHz or 12KHz. But with The Echo Nest model, the loudness is lower at 12KHz than it is at 3KHz because you actually perceive those signals differently.

Thanks to the always awesome 7Digital for providing album art and 30 second previews in this post.

, ,

5 Comments

Finding artist names in text

Let’s say you have a block of text – perhaps a tweet or a web page from a music review site.  If you want to find out if the text mentions a particular artist such as Weezer, it is a pretty straightforward task:  Just search through the text for the artist name and all the variants and aliases for that artist.  It is pretty easy.

What is harder is trying to figure out if any artists are mentioned in a block of text, and if so, which ones.  Since there are millions of artists, each with their own set of aliases and variants, the simple search that we use to find ‘Weezer’ in a tweet doesn’t work so well.  The fact that many artist names are also common words adds to the difficulty.

Luckily I work with a bunch of really smart folks at The Echo Nest who’ve already had to solve this problem in order to make The Echo Nest work.  Over on the Echo Nest blog, there’s a nifty description of the problem of artist name identification and  extraction and an announcement of the release of a new (and very much beta) API called artist/extract that will expose some of this functionality to application developers that use our APIs.

This morning I spent a few minutes and created a little web app that lets you play with the artist/extract API. Here’s a screenshot:

In this example I’ve typed in the text:

I like Deerhoof,  and Emerson, Lake and Palmer.  I don’t like Coldplay, or Justin Bieber. GNR is OK. Go try it yourself!

You can see that it found Deerhoof and Coldplay, (easy enough), and a spelling variant of Emerson, Lake & Palmer.  It also recognized GNR as two bands – GNR (a Portuguese rock band),  and as a nickname for Guns N’ Roses.  Also notice that it didn’t get confused by the mention of ‘ OK. Go’  that is embedded in there.  The extractor is not always perfect – it tries hard to avoid confusing artists with regular English words (since just about every English word is a band name), so it will rely on letter case and other hints to try to separate real artist mentions from accidental ones.

The artist extractor is very much a beta api so it may be a bit unsteady on its feet and may sometimes not work as you’d expect it to.  Nevertheless, it is a nifty bit of music data infrastructure that will help us understand better who is talking about what artists.

Read the API docs  for Artist/Extract – or try out the little web demo.

, , ,

4 Comments

What happens at a Music Hack Day?

So what is a Music Hack Day really like?  Here’s a quick rundown of some of the things that will happen at the Music Hack Day.

9AM – 10AM Saturday morning – Registration – hackers start to arrive between 9AM and 10AM for registration.

 

Welcome to the Microsoft NERD

 

You get your badge, wander around the venue (which is graciously provided by Microsoft) have a muffin and a cup of coffee and meet up with old friends and / or make new friends.

 

Smiling faces greet you at MHD Registration

 

 

Informal hacking space at the NERD

 

This is a good time to start scoping around for hacking partners if you think you might need some help building a hack.  If you want to get a head start in connecting with other hackers consider posting to the Ideas page on the Music Hack Day Boston Wiki.

 

Group hacking

 

 

Meet interesting people at Music Hack Day

 

 

10AM – Opening remarks – someone will walk you through the weekend, and give you an idea of what to expect, and tell you all the important info like where the bathrooms are.

 

Dave Haynes kicks of Music Hack Day London

 

10:15 – Lightning pitches – a big part of the Music Hack Day is the sharing of knowledge about various music-related technologies, whether it’s an API, a library, technique, hardware gizmo.  During the lightning pitches, everyone who has a technology that they’d like to talk about gives a 60 second description of their technology.

 

Getting ready for the lightning rounds

 

11:00 Morning Workshops – The morning workshops are 15 to 20 minute overviews of a particular technology.  There may be be 10 to 20 workshops run in a two hour period.  Depending on the number workshop, there may be more than one track, so pay attention during the lightning pitches to figure out which workshops you’d like to attend.

 

Waiting for the workshops to start

 

Some companies offer prizes to the best hack that uses their technology.  If you want to try to win something cool like a concert tickets, an iPad, or some cash, pay attention to the workshops to see who is giving out prizes.

 

The Echo Nest workshop

 

 

The Songkick workshop

 

1:00PM Lunch time – lunch is free – but don’t let it stop you from hacking.

 

Eat or hack?

 

2:00PM Hacking commences – after lunch – formal hacking begins. You have 24 hours to build something cool that is related to music. Hacking will finish up at 2:30PM on Sunday.

 

Hacking commences

 

2:00PM Afternoon workshops – In the afternoon, there are some in-depth workshops where you can learn how to build or do something.  The workshops (as with everything at the Music Hack Day), is optional, you can chose to attend a workshop or find a quiet spot and work on your hack.   Some of the workshops may be scheduled on an ad hoc basis (anyone can put on a workshop, just post a note on the ‘workshops board’).  There are 3 hardware oriented workshops, at the Boston Music Hack Day that will give you an opportunity to build or interact with hardware (a rare thing for many of us software types).

Pen plotter & Chiplotle workshop Douglas Repetto and Brian Whitman will show you how to plot your beautiful music visualizations or whatever else on quite possibly the sexiest of all paper output mechanisms — early 1980s HPGL pen plotters! You’ll learn how to use Chiplotle, a Python bridge for live HPGL drawing control, and we’ll have a a few plotters on hand for everyone to use.  Plus, there will be plotters available for hacking after the workshop.

plotter.jpg
More info:

Electric Eels Workshop

“Electric Eels” workshop – by Noah Vawter – This project introduces a mobile platform for electronic music instruments.  It encouragesplaying them more like traditional instruments.  The new techniques this project introduces extend the role of electricity generation – Electrical energy for every note comes from its players’ movements.

Atari Punk Console workshop

https://i1.wp.com/farm4.static.flickr.com/3438/3923062090_719757c150.jpg

Jimmie Rodgers will lead a workshop on building Atari Punk Consoles. The Atari Punk Console is a simple synthesizer with a wide range of sounds. It is so named because the sounds generated are similar to those of the early Atari consoles. In this workshop you will learn the basics of the timing circuits used to make these crazy sounds. You will also learn how to solder, and how to change the the sounds with your fingers as the contact, or even using light to make a simple light Theremin.

 

Jimmie's workshop

 

All parts and tools included in the costs. Additional parts will be available, so you will be able to customize your APC with lights, touch contacts, photo resistors, etc. You are encouraged to find a fun case for your APC and bring it (cigar box, mint tin, Mr. Potato Head other plastic toy, etc), anything hollow that can hold a deck of cards would do. If you do not have a case, then Altoid tins will be available at the workshop.

 

Hardware hacking

 

6PM – Dinner – At 6PM the pizzas arrive. Get a slice or two and some soda (the beer comes later), and get back to your hack.  Remember, eating and sleeping is for the weak

 

Eating is for the weak

 

9:30 PM – Leg stretching time. – Hacking continues until around 9:30 PM when the Microsoft NERD will close. At that point hacking shifts to the Echo Nest (a few  T stops away).

 

Onto the T to get to the Echo Nest

 

10:00 PM Hacking Continues at the Echo Nest

 

The Echo Nest offices

 


The venue for overnight hacking is at the Echo Nest in Davis Square – 4 stops away on the T from the main venue.  At the Echo Nest there will be some beer, some live music provided by Javelin, and plenty of comfortable hacking space for the hardcore hackers.

 

Late night hacking

 

Overnight hacking is where all the magic happens.

 

Overnight hacking in London

 

 

Overnight hacking at the Echo Nest

 

8AM Sunday Morning – On Sunday morning, hacking finishes up at the Echo Nest and will return to the Microsoft NERD at 9AM, where you’ll find some more coffee and light breakfast.  Hacking continues thorough lunch.

 

Remember, eating is for the weak.

 

2:30 PM Hacking finishes. By 2:30 PM you should have information about your hack posted to the wiki.  Only hacks included on the wiki by 2:30 PM will be included in the final presentations.

 

Last minute hacking

 

3:00 PM – Final Demos – This is the time to show your stuff!  Once all the hacks are complete, everyone will move to the big room for the hack demos. We’ll be joined by about 100 non-hackers who are here to see all the demos.   During the demo time, everyone who managed to get a hack listed onto the hacks wiki by 2:30 will get 2 minutes to present their hack.

 

Giving a demo - Flight of the bumble bee on guitar

 

There will be people from the music industry, the press, and the tech world in attendance so it doesn’t hurt to try to make your 2 minutes in the spotlight memorable.    We should have two projectors setup so each hack presenter should have 2 minutes to setup and then 2 minutes to present.

 

Demoing the big piano

 

 

Ben demos the roomba recon

 

 

Giving good demo is fun

 

We will be ruthless with the timing. When your 2 minutes are up,  we’ll start the next demo, so make sure you get to the point quickly

5:00 PM  – final awards – At 5PM the panel of judges will gather to pick the winners of the prizes, and present the awards.  But of course, everyone is a winner.

 

Announcing the prize winners

 

6:00PM – After all is done, we will find a local pub to get some refreshment.

 

Time for a beer

 

It is sure to be a good time.

Photos from flickr photographers:  Elizabeth Thomsen,  Dave Haynes, Thomas Bonte, Ben Reyes, Brad Searles, aroscoe, habber,  David Noël, imelda, James Wheare, narq,

, , ,

Leave a comment

Which band has the hotttnesss?

Developer/musician Paul Barrett (aka echodeck) has created pop.ularity a nifty web-based music quiz based on last.fm and the Echo Nest APIs.  In the quiz you try to guess which band is hotter on the web. The quiz uses Last.fm plays, Last.fm listeners, Echo Nest Hottttnesss and Echo Nest familiarity to measure popularity for each band.

It’s a fun game – give it a whirl!     http://pop.ularity.co.uk/

, , ,

3 Comments