AS3: Music Visualization Demos with computeSpectrum

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

Grant Skinner

The "g" in gskinner. Also the "skinner".

@gskinner

32 Comments

  1. Very nice. I liked the flames on the blaze logo before… Much better when set to music.

  2. Great effects, great musics, great work !

    I have a preference for the second, witch really goes well with the RFAD BO.

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

  4. Just curious… the track in the second demo (spectrum_ring) sounds really, really familiar… what movie is that from?

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

  6. Incredible demo – beautiful work. What’s the track from the first demo?

  7. Matt – the first track is “Spitfire” by Prodigy, from their “Always Outnumbered, Never Outgunned” album. It’s a pretty good album imho!

  8. you should throw the new Fullscreen option on these guys.

    sweet stuff!

  9. computeSpectrum is totally my favorite new addition to AS3 (besides the display list)

    It was nice meeting you on the bus, btw!

  10. Wow. Stunning and inspiring is all I can say.

  11. Awsome work Grant.

    Yea this really opens alot of potential with this new class.

    Looking forward to see more!

  12. Great job!

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

  14. you should remake this one for a Halloween special with a pumpkin face!! HEH 🙂

  15. Özgür ALTAY November 7, 2006 at 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? 🙂

  16. Özgür ALTAY November 7, 2006 at 1:10pm

    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? 🙂

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

  18. Cool Grant. You never cease to amaze.

    My attempt at Actionscript 3 sound visualisation

    http://www.soulwire-illustration.com/actionscript3-dynamic-sound-visualisation.html

  19. Give me the fla! Time for that: 1day

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

  21. Are you going to post the source code??

  22. I hate you.

    I mean that as a compliment.

  23. Looking for your article about using computeSpectrum in AS3. Will it be soon?

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

  25. 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 😀

  26. 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…

  27. 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 🙁

  28. Hello
    I really like the flame spectrum, request FLA source files, thank you
    My mail is vipnj@163.com

    您好
    我非常喜欢火焰的频谱,请求FLA源文件,谢谢
    我的邮箱是 vipnj@163.com

  29. i very like this,can you give me code,thanks

Leave a Reply

Your email address will not be published. Required fields are marked *