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.
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.
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!