Latest Project: Colourful Echo – Music Visualizer Displaying Data and Colors Behind Your MP3’s


I’m incredibly excited and proud to announce the launch of my latest site/project. Colourful Echo is a music visualizer that provides motion and color to any mp3 you upload.

Using data from Echo Nest to determine both pitch and loudness, along with data from Colour Lovers for color palettes… Colourful Echo reveals a side of your music you may not have seen before.

I first came across Echo Nest about a year ago, when they debuted with a fantastic online app called The Jingler. Through that site, users could upload their own mp3, and sleigh bells would automatically get added to any track.

More recently, the Echo Nest folks released More Cowbell, using the same technology. Again, through user-uploaded tracks, portions of Christopher Walken’s classic SNL skit got inserted into the file… all perfectly timed out, and with extra cowbell to boot.

A year or so ago, I started tinkering around a bit with the Echo Nest API. I didn’t get very far… just looked around some, really. But last month, I started digging through a lot of the methods, and started to get into the details a bit more.

Around that time, I also came across Eamae Mirkin’s Visualization in 7/4, a video he created using data from Echo Nest, combined with Processing. I really dug Mirkin’s visualizer, and it got me thinking again about animating songs, and visualizing them.

I’ve done two by-hand animations to music (Gould and Head in Hands), and was thinking a lot about how I might try to provide motion for two tracks in particular: Tokyo (by the Books) and Chariot (by Page France).

I’ve really enjoyed animating music before, but Echo Nest seemed like it could provide a possible avenue to create the animations dynamically. No more hand-tweening (though it’s quite satisfying and fun). No more timing issues. The Echo Nest API helps to take care of a lot of the heavy lifting.

Now for some of the nitty gritty: file uploads are handled through Flash and PHP. I’m storing every upload over on Amazon (I’m using their Simple Storage Service). I am sort of hoping this site takes off, and that a lot of people will like interacting with it… and so Amazon’s storage approach made the most sense to me.

I have to tell you – I had a hell of a time getting my head around the whole upload approach. I’m an ok Flash guy for the most part, and I’m still stuck in AS1 land… but when it got more involved on the server/code front, I tore a lot of hair out trying to troubleshoot.

Ultimately, getting data from Echo Nest and Colour Lovers was the easy part. The bigger challenge for me was to route and rename all the uploads over to Amazon.

I’ll be paying storage costs for any files uploaded, but it seems a small price to pay. Well, I hope it is anyway. While there’s a chance this site could get extremely popular, I’m hoping the pricing structure at Amazon keeps me in the clear… even with a ton of traffic. Here’s the breakdown of my costs:

  • $0.15 per GB-Month of storage used
  • $0.10 per GB – all data transfer in
  • $0.17 per GB – first 10 TB / month data transfer out
  • $0.01 per 1,000 PUT, POST, or LIST requests
  • $0.01 per 10,000 GET and all other requests

It’s actually a pretty incredible deal. Given how things are set up, I should be able to keep the site up and running despite any traffic spikes I’m lucky enough to receive.

In terms of data for the visualization, I’m using the get_segments method from Echo Nest, and basing most of my visualizations that way. Both the size and alpha of the circle/ripple are based on a loudness variable. The color is based on a pitch variable.

I’m using the Colour Lovers API to generate a random palette. I do a small check to ensure that there are five different colors used, but other than that… it just grabs a random palette from the site.

As an addition, I also included a text field where you can enter in a custom Colour Lovers palette ID, in case there’s a particular palette that you’re really interested in seeing.

This project has been a very strange labor of love, the past few weeks. I’ve really been totally obsessed with this thing, and worked on it any available moment I had. In hindsight, now that it’s launched and officially “done,” I’m wondering whether anyone else will feel the same interest/excitement that I felt.

Whenever I get involved in a project, to me it’s just the neatest thing in the world. It’s incredibly cool, exciting, one-of-a-kind. But after creating and launching projects, there’s this slight gap or pause where I wait to see if anyone else finds it as interesting as me. And of course, in my head, I keep thinking “gee, I just wasted a whole lot of time on something not all that terribly interesting.”

With this project in particular, I’m hoping it catches on some. I’ve built in safeguards for it, so overall… glass half full, I suppose. I don’t feel there’s anything huge or profound here in this project. There’s a little bit of synesthesia, which is nice. But for the most part, whenever I’m viewing a track, I tend to zone out a little bit. I get drawn into the subsiding circles, and my mind wanders a little bit.

If you’re visiting this site, and you get sucked in to a visualization… great! If it provides a small bit of calm in an otherwise busy day, I’m content with that. In fact, I’d say that amounts to a pretty good day’s work, as far as I’m concerned.

Here’s hoping you see a song you really like.

———

Huge thanks to the great folks at Echo Nest, who kindly answered all of my annoying questions. And also, much thanks to the crew at twelvestone.com, for their knowledgeable replies to my questions in both the Back End and Flash forums.

———

// Edit: Forgot to mention that, a
t the end of each animation… there’s a permalink that gives you access to the song and the palette used. There’s also some custom object/embed code, so you can post the visualization to your website/blog. Happy linking!

This Post Has 7 Comments

  1. This is really really awesome. I love how you hooked up both APIs and got them flowing together… SO awesome… I might bother you about the S3 storage sometime soon too :) thanksTJ

    TJ Mapes Reply


  2. Thanks, TJ! I’m excited now that it’s “out” and about in the wild. Hopefully, it’ll pick up somewhere and make the rounds. I got a nice note from the folks over at Echo Nest, which was pretty cool.Definitely let me know your questions re Amazon’s S3. I blew days figuring that mother out, so I can likely save you a lot of time (and headache).

    avoision Reply


  3. This is amazing Felix! Awesome job! I can absolutely relate your enthusiasm when it comes to new projects, and I’m very happy to see you roll this out. I will happily help in spreading the word.P.S. I must add, that this really works well with cold medicine!

    Brian Reply


  4. This is really amazing Felix! I don’t know all the technical aspects that went into it but i love that it can change colors based on your mood. now, if only you could add in the cowbells… that would be cool!

    Christine Reply


  5. The cowbell plugin is slated for version 2. :P

    avoision Reply


  6. I tried to see the demo like 20 times but it doesn’t work.

    Jerry Reply


  7. Hi Jerry -I think there were some changes made over at Echo Nest to their API. As a result, I’m not quite able to target the necessary data (and my Flash files are breaking).I’ll dive back into this this weekend, and should be able to reconfigure things. It’s down for now, but I’m hoping to have it back up and running shortly.

    avoision Reply


Leave A Reply