 AS3: Music Visualization Demos with computeSpectrumPosted on October 10, 2006 by Grant SkinnerTo kick off my session at FitC2006, I modified my Blazing Blazes demo to work off the bass level of a loaded music track using the new computeSpectrum feature in ActionScript 3. You can see it in action by clicking the screenshot below (Flash player 9 required). Note that while the demo is small (3kb), the music file is big, so it’ll take a while to load.
I had a lot of fun building the Blaze demo, so on the flight home I played around some more and built a second, more complex visualizer demo using the drawing API, BitmapData and Filters. Again, click the screenshot to see it in action. This one is worth watching all the way through, as the music is quite varied, and produces some interesting results in different parts.
I learned a lot about the quirks of using computeSpectrum in AS3 from these, and plan to write a short article on the subject when I have some free time.
Follow @gskinner on Twitter for more news and views on interactive media.
|
|
|
30 Comments
Very nice. I liked the flames on the blaze logo before... Much better when set to music.
Posted by: Andrew Trice on Oct 10, 2006 11:59am URL: http://www.cynergysystems.com/blogs/page/andr…
Great effects, great musics, great work !
I have a preference for the second, witch really goes well with the RFAD BO.
Posted by: Cédric Néhémie on Oct 10, 2006 12:10pm URL: http://book.abe.free.fr
Is it feasible to read in an MP3 and capture the entire length of the sound into an object so you can draw a waveform? I would like to see something like what SoundForge does with the waveform for the entire sound but most samples I see are for the current portion of the sound only. Thanks for any advice.
Posted by: Lar on Oct 10, 2006 12:34pm
Just curious... the track in the second demo (spectrum_ring) sounds really, really familiar... what movie is that from?
Posted by: Troy Gilbert on Oct 10, 2006 2:45pm URL: http://troygilbert.com/
Lar - not really. computeSpectrum only works on the combined waveform of all currently playing sounds in the player. The only way to generate a waveform of the full song would be to play back the full mp3.
Troy - it's Requiem Overture - it was originally from Requiem for a Dream, but this full orchestral version was used in marketing for the Two Towers.
Posted by: Grant Skinner on Oct 10, 2006 2:49pm URL: http://gskinner.com/
Incredible demo - beautiful work. What's the track from the first demo?
Posted by: matt on Oct 10, 2006 3:05pm
Matt - the first track is "Spitfire" by Prodigy, from their "Always Outnumbered, Never Outgunned" album. It's a pretty good album imho!
Posted by: Grant Skinner on Oct 10, 2006 3:32pm URL: http://gskinner.com/
you should throw the new Fullscreen option on these guys.
sweet stuff!
Posted by: Daniel Larsen on Oct 10, 2006 4:13pm
computeSpectrum is totally my favorite new addition to AS3 (besides the display list)
It was nice meeting you on the bus, btw!
Posted by: Terry on Oct 10, 2006 11:05pm URL: http://www.eprize.com
Wow. Stunning and inspiring is all I can say.
Posted by: Randy Troppmann on Oct 12, 2006 9:57am URL: http://www.spintechnologies.ca/flashblog
Gorgeous !
Posted by: Thomas Poirier on Oct 14, 2006 4:33pm URL: http://www.lesfilmsdumarche.fr
Awsome work Grant.
Yea this really opens alot of potential with this new class.
Looking forward to see more!
Posted by: Eric Chan on Oct 18, 2006 10:26pm URL: http://eepmon.com
Great job!
Posted by: Chuck on Oct 26, 2006 6:38am
Very good
Posted by: tolis on Oct 28, 2006 5:36am URL: http://www.interactivemania.com
Hi grant, excellent example.
Have you got any suggestion how analyze an external flv file with policy restrictions.?
I've got this the problem with youtube flv´s videos.
Thanks..! man
Posted by: luchyx on Oct 30, 2006 1:02am URL: http://riaevolution.com
you should remake this one for a Halloween special with a pumpkin face!! HEH :)
Posted by: corban on Oct 31, 2006 10:55am
This burning effects is the most exiting one that I see in flash. It seems you use displacement map filter, perlin noise, glow and blur filter on bitmap image...
Can you give us some tips for making an exiting fire like yours? :)
Posted by: Ãzgür ALTAY on Nov 7, 2006 1:07pm
This burning effects is the most exiting one that I see in flash. It seems you use displacement map filter, perlin noise, glow and blur filter on bitmap image...
Can you give us some tips for making an exiting fire like yours? :)
Posted by: Ãzgür ALTAY on Nov 7, 2006 1:10pm
Ah, I just had to stop by to see if you accounted for that annoying security issue with having your vis running while another audio swf from another site is running. Good work, that must be the quirks you've spoke of. ;)
I've been playing with computeSpectrum a bit as well, and I'm working on some nice utility classes that make integrating spectral data throughout a site very easy and practical.
Posted by: Steve Schelter on Nov 7, 2006 1:44pm URL: http://www.schelterstudios.com/blog
Cool Grant. You never cease to amaze.
My attempt at Actionscript 3 sound visualisation
http://www.soulwire-illustration.com/actionscript3-dynamic-sound-visualisation.html
Posted by: Justin Soulwire on May 15, 2007 5:46am URL: http://www.soulwire-illustration.com/actionsc…
Give me the fla! Time for that: 1day
Posted by: Jack on Oct 14, 2007 3:29am
When I saw your demo it got me thinking. How far *can* we push the Flash engine? I pulled out an old copy of Milkdrop from 2003 that was tuned for the graphics cards of the day. After a bit of hacking I have most of it running in ActionScript. The tricky part was recreating a texture mapping engine where (u,v) parameters that wrap do the right thing.
Still lots more to do, but for those interested they can see one version at http://flashoid.com/milkdrop.html
Posted by: Scott Penberthy on Nov 16, 2007 10:15pm URL: http://flashoid.com/
Are you going to post the source code??
Posted by: Pat on Nov 28, 2007 8:43pm
nice man!!
Posted by: Jason on Dec 8, 2007 10:24am URL: http://www.communitymx.com/content/article.cf…
I hate you.
I mean that as a compliment.
Posted by: Jackson on Dec 18, 2007 10:13am URL: http://jkr.knftech.com/
Looking for your article about using computeSpectrum in AS3. Will it be soon?
Posted by: MP3Hunt on Feb 7, 2008 7:08am URL: http://mp3muzz.net
Grant, I am trying to use your flame component to mimic the first example. When the soundspectrum levels get very small which equates to the lites going off what values are you changing in the flame component? The flameHeight value never gets it to nothing are you just using your clear function? In your example it looks like it fades to nothing. Thanks!
Posted by: Wade Arnold on Apr 4, 2008 11:14pm URL: http://wadearnold.com/blog/
Oh My!!! Such stunning work!!!
Very good job. I am too trying to learn to visualize sound in flash...and you have given me great inspiration :D
Posted by: Jobin on Sep 22, 2008 5:41pm
very very nice, but can you playing with a different format of music?? wma or wav ad example...
and I can include this file in a music player? it's open source...
Posted by: Il_maca on Jan 3, 2010 3:43pm
They're not working for me, in the first examples the flames don't move at all to the music, and in the second one nothing appears - just music plays :(
Posted by: Chris W on Apr 15, 2010 2:18pm URL: http://www.nocturnalhaunt.com/media/366