Classic ‘Sound Equalizer’ in Flash/AS3
Got a background music on your Flash website? It would be nice to add a tiny equalizer in the footer. Or maybe you’re developing an AS3 application that features MP3 playback? An equalizer will surely be useful in there too…
During the long years I spent on creating campaign sites in Flash, the need for an equalizer kept coming back. However, with a tight deadline (all dealines are tight, aren’t they?) there isn’t always enough time to develop such ‘sweet candy’ elements. If you’ve ever been there, search no more and check this out:
I developed this classic sound equalizer, while I was playing with the BitmapData object in AS3. Now, it surely ain’t a breakthrough or a milestone in actionscript development, and lots of really cool sound visualizations are already out there [1] [2]. The way I see it, this classic equalizer is a ready-to-use, easy-to-use (even for the non-gurus) and highly customizable component. Thanks to the usage of BitmapData rather then vector graphics it is also pretty fast.
Feel free to play around with the demo above, and if you like it, you can get all the SOURCE HERE. I publish it under the MIT license which means that you are free to use it for anything you want.
Inside the source ZIP you will find a few AS3 classes, a FLA cointaining an example and a READ_FIRST text file, which you should… well, read first. The equalizer is pure code, so there are no assets. Just add the packages to your classpath and you are ready to go. The basic class that is responsible for drawing the equalizer is the com.everydayflash.equalizer.Equalizer. Since it extends the Sprite class, just create an instance of it and add it to your DisplayObject like this:
import com.everydayflash.equalizer.Equalizer;
var eq:Equalizer = new Equalizer();
addChild(eq);
.. and that’s all folks, you should see an equalizer by now. Of course for the equalizer to work there must be SOME sound playing in your Flash application… I leave this to you, but in case you do not know how to play a sound in Flash, here’s a simple tutorial I googled for you.
In order to customize the way it looks, the Equalizer class constructor takes an optional argument, which is an instance of com.everydayflash.equalizer.EqualizerSettings class. Check the source of this class to see all the options that can be set in there (more or less everything that is available in the demo above). Also check the example Main.as class to see how to use it – it is merely a few extra lines of code.
Have fun and email me if you have any questions!
I get this error with flash player 9.0.124 debug version
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at com.everydayflash.equalizer.util::SpectrumReader/reverseLeftChannel()
at com.everydayflash.equalizer.util::SpectrumReader/getSpectrum()
at com.everydayflash.equalizer::Equalizer/render()
Thanks for the note Chris. The error you are getting is probably due to the strange behavior of the Flash Player when more then one sound is played using Flash in your browser window(s). When that happens, a Security Violation error is throw whenever you try to access the computeSpectrum method. In my code I choose to ignore it (lines 74-79 in SpectrumReader.as), but apparently it make things even worst :)
So – try to make sure no other flash piece is playing any sounds in your browser when you run the equalizer.
I will research about a way to make this behavior less buggy and post an update of the code as soon as I have some time to do that.
Very Nice work Man.
I’ve wanted to make one of these for a while but didnt really know how.
Looking forward to getting stuck into your code
Thank you EverydayFlash;) Your code really works. I am going to use it on a website I am working on at the moment.
Hmm. Looking at that blurred reflection of spectrum i god a strong desire to go and make a fire music equalizer :)
Hi could anyone here help me on my 1st mp3 player that i created.
Now my problem is i dunno how to add in the equalizer/spectrum
anyone of you please if you could help me on this please let me know
and i will post my files.
Thanks
still very blur on flash CS3.
will try my best
lee
@lee the best places to seek help in general Flash and Actionscript problems are forums.
I can recommend you either this one http://www.gotoandlearnforum.com or http://www.actionscript.org.
Nice Equalizer, is their anyway to have it play randomly loaded XML songs. I have an mp3 player that loads songs via an xml file. So… when your code asks for a mp3 called “track.mp3″ it doesn’t jive with my player. Any hwlp would be appreciated.
Thanks
@Jmm You can remove the code that loads track.mp3. There is no need to connect the equalizer explicitly to any music source, because the SoundMixer.computeSpectrum() method works globally in Flash. Just add the equalizer to the display list, play a track and it should work.
Hello,
Awesome – thank you! Can I change the color to a specific green?
bartek, you are a genious. I finally had a chance, this weekend, to tinker with your code and get it to work with my XML mp3player. It compiles fine and seems to be working great once published to HTML, but if I play it locally with my stand alone player it works for about 3 seconds then I get this error: and program shuts down.
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at com.everydayflash.equalizer.util::SpectrumReader/reverseLeftChannel()
at com.everydayflash.equalizer.util::SpectrumReader/getSpectrum()
at com.everydayflash.equalizer::Equalizer/render()
Not too big of a deal, since my intended purpose is for the web anyway, but it’s something to look into. Have any ideas?
Thanks
# Eric Watson Says:
September 14th, 2008 at 2:27 am
Hello,
Awesome – thank you! Can I change the color to a specific green?
————————————————————————————————————
Eric Yes, inside the color folder are the different color AS files, you can use any hexadecimal color code you want.
@Jmm thanks. For the error: if you look up in the comments list (2nd comment), I already wrote why I think this is happening.
bartek, is there a way to display an average of both the left and right spectrums, like Winamp player does, instead of showing them separately side by side?
@Jmm you could do that by changing the SpectrumReader.as class a bit – so that is mixes both channels.
Very nice man! I get that error too, but from what I understand, you say it occurs if another flash player is playing a sound? I always have imeem/myspace music players going so that might be why! Thanks for such an awesome class!
it saved me a lot of time – THANX!
hej.
świetne!
podpinam to cudo właśnie pod swój player’ek. właściwie jak już wszystko jest gotowe zauważyłem konkretnego dileja ok.1s pomiędzy dźwiękiem a equalizer’em przy odsłuchiwaniu on-line.
any ideas ?
pzdr!
Is the any way I can make each of the bars a different color?
hey, i got a problem when using your component with embedded video.
when using the video through a netstream object i have a global soundobject that is being used by the eq. this worked fine!
but my video is embedded into a movieclip, for publishing in a projector. how do i apply the movieclips sound to the global soundobject?
for my understanding, it should work then.
at the moment, i get no visual feedback from the eq.
thx in advance,
best regards rob
Thanks a lot !!! Great work
Any way to have the spectrum work with a netstream (rtmp connection)?
@Jeff I never tried, but if the Flash built in SoundMixer.computeSpectrum works with streamed sound (I don’t see why it shouldn’t) the equalizer will work as well.
freakin rockstar!!!
Great work!
But … I have a problem with the eq not showing up when my swf is played on the server.
Offline published within the Flash IDE and offline in the browser everything is fine.
My sounds are playing online as well, just the eq does not work.
I tried to add the eq to the stage only after the play button was clicked and the sound is streamed.
Any idea out there?
absolutely same issue like ‘uwe’ here!
Its working when I test it locally on my PC but it is not working on server.
My project streams from flash media server too, and its not working for NetStream.
This error appears when I try to play stream from FMS:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at com.everydayflash.equalizer.util::SpectrumReader/::reverseLeftChannel()
at com.everydayflash.equalizer.util::SpectrumReader/getSpectrum()
at com.everydayflash.equalizer::Equalizer/render()
But anyways I would like to thank you for the great work.
Respect!
@uwe, @bentley – try to start the equalizer only when you know that the sound is buffered and started playing.
Yepieeeee! I have found the bug.
The problem, as far as my project is concerned, was that the sound files were streamed from another domain. I could solve the issue by copying the audio files on the same domain. And voilà, sound AND EQ.
Perhaps it’s the same with benleys’…?
uwe
The problem here is that i MUST play live streams (from live radio streams) directly as a sound object or as a NetStream object.
Lets say I take sound object. In this case I am taking the sound directly from the radio station’s stream. I don’t know if there is a AS developer who is not using Flash Media Server for streaming audio but my boss wants me to do it both ways. @bartek, you are good at Sound issues, would you tell me if this is wrong (using Sound Class for streaming live sound)? Because sometimes there are problems – the sound isn’t the way it should be – it goes too fast or too slow.
So for every radio station I have different link. So, @uwe, there is no way I can take the streams on same domain. I will try what @bartek said.
I should also find a solution of the NetStream object problem – the equalizer is not appearing.
Hey, thanks a lot for this great sound equalizer! I wrote a plugin for the jw player so it can show the sound equalizer in the display, looks pretty nice. Greets
Great EQ, the best ive seen in flash!! Thanks for sharing it.
Very nice. I wish I knew how to do it on my own though or see the code that’s actually running the program. Id like to see the equalizer class included next time even if its read-only.
@JC Do you mean the source code for the equalizer? You can grab a ZIP with all the sources here. The link is mentioned in the post above :)
NM peaZip was confusing me when I extracted with winZip I found the files. Ty
Whats up with the color code your using? 10 alphanumeric. Can you tell me whats thats called I only know hex and dont know how to change colors in this. Thanks
haha again got that to work. 0x is standard then the next channel is alpha to all those who were wondering, then regualar hex code.
@JC :) In AS some methods expect color defined as RGB (ex. 0xab23d4) and sometimes as ARGB (ex. 0xff2983f2). This can be a little bit confusing at the beginning.
Hello Bartek.
First of all, thanks for the great script. I don’t think I’ve seen anything like that before.
I ran into a problem, though. When I had implemented your equalizer into my player and then on tried to view it on Firefox it loads well unless there already was a Flash page opened that was playing sound.
I did change my player a bit so the equalizer wouldn’t start before the sound was already loaded, but without any success. Maybe you have a solution for this?
Thank you,
Andrewsas
Hello again,
I dug some further and it happened with all the other equalizers as well, the first equalizers stops from working if another is opened, looks like you can’t have 2 eqs at the same time with AS3. The only one that doesn’t have any effect is the eq on Myspace, but that’s probably coded in Flex I suppose?
Thank you for a great script nevertheless, I will be using it in my projects from now on.
Cheers, Andrewsas.
Hi, I’m a newbie to flash but I’d really like to personalize this equalizer…can anyone tell me how to add a play/stop button? I found this but I don’t know where to put it or if it’s even right!Please help me :-)
{
var musicOn:Boolean = true
onOff.addEventListener(MouseEvent.CLICK, onOffSound);
function onOffSound(e:Event) {
if (musicOn == true) {
musicOn = false;
trans.volume=0;
SoundMixer.soundTransform = trans;
} else {
musicOn = true;
trans.volume=1;
SoundMixer.soundTransform = trans;
}
Hi all.
I have some problems..
Error #2044: Unhandled IOErrorEvent:. text=Error #2032: Stream Error.
at Main()
can any body help me? What is the problem.. and this error only apper in IE and FireFox
Great Job on the Equalizer!
I just have only one issue. Did anyone managed to get the Equalizer working with a NetStream object? (FMS)
I have seen the previous post about it but with no success.
Thanks again for some great work!
Hey man, great work! I know this is probably a dead thread, but I have a question. I am modifying this to use with a voice generator, but my issue is that I can’t find where to make the bars drop faster, what file should I be looking at, and what line specifically?
Once again, great job m8.
I’m new to Flash and I’ve been trying to figure this out all night until 4am. Is there a step by step method to get this to work, because I’m ready to uninstall. Frustrated
Awesome works great for what I needed.
http://josephgiddings.com/wordpress/wp-content/themes/the-last-fall/header.swf
However, the actual header in the wordpress doesn’t seem to like the eq.
http://josephgiddings.com/wordpress
any thoughts?
THanks for your time.
[...] while there are several tutorials out there for “graphic equalizers” in Flash, these “equalizers” [...]
hi,
this kind of error :”TypeError: Error #1009: Cannot access a property or method of a null object reference …” appears when you have diferent domains for flash-player and mp3 source. If you will have the same url for both you will not find any error. Works great with all browsers, and with 2-3 players on the same browser. Great job :) If you respect the rule mentioned above, it will work greeeeat
Hey,
I am trying to use this in flex but I cant it not showing the equalizer there is no error though.
Let me know if u know why.
Thanks
Dinesh
Dinesh – you might be having the same problem I was having. This post helped me avoid the DisplayObject/UIComponent type conflict: http://www.boostworthy.com/blog/?p=224
Czołem! Świetny komponent! Właśnie czegoś takiego szukałem. Niestety mam tego samego buga co większość użytkowników. Po podpięciu playera do dynamicznie ładowanych kawałków – mimo, iż ładowane są z tej samej domeny, crossdomain.xml nie działa. Co ciekawe, bug występuje w FF a w IE wszystko hula jak należy… Problemem jest metoda SoundMixer.computeSpectrum(). Próbowałem kilku rozwiązań ale bez pozytywnego efektu… Jakieś nowości w tej kwestii?
pozdrawiam
great class, thanks a lot bartek!
for all of you with problems while streaming a “rtmp://” source:
check the computeSpectrum() API from adobe:
“This method is supported over RTMP in Flash Player 9.0.115.0 and later and in Adobe AIR. You can control access to streams on Flash Media Server in a server-side script. For more information, see the Client.audioSampleAccess and Client.videoSampleAccess properties in Server-Side ActionScript Language Reference for Adobe Flash Media Server.”
for more information check this:
http://livedocs.adobe.com/flashmediaserver/3.0/docs/help.html?content=08_xmlref_053.html
cheers,
ron
hello!
I downloaded the source and add an extra layer with 4 buttons(like in the tutorial) and the AS code and i’ve got this error: “1180: Call to a possibly undefined method addFrameScript.”
What should i have to do with it to get it work!?
Thanks!
RKG
ohh, the error location is: Main.as and the source: package{
Hello, I’ve got few problems. When I load locally hosted .mp3 there are no problems, but when I try to load stream ( ex. “http://scfire-ntc-aa07.stream.aol.com:80/stream/1003″ ) then it works only as a preview ( ctrl+enter ). When I publish it, stream plays, but equalizer doesn’t appear. Please help.
I would like to say thank a lot for these great utilities.No problem.Karel
I searched the Web plenty of similar files for Flash,but all of it is done by the help of timeline of Flash.I think,that it is not good way.When you will create more difficult file then the one will not be markedly providing an easy survey.Well done…
I am sorry for my mistakes of text,because I am from the Czech republic and my English is not anything special:-).Keep it up
Thank you very much for your application, had long sought something like this for my website.
I’m in the audio post.
(I do not speak English, sorry, this is a translation automatic google)
A big hug.
Manuel
Madrid, Spain
[...] Classic spectrum analyer [...]
hi Bartek.
Nice work.
I am working on audio player for sale. I use this class of yours? My English is not very good, sory.I wish you good work.
@eliza Yes, you can use it anyway you want, also for commercial projects (it’s released under the MIT license)
Thank you for your reply. I’m follower everyday3d.
http://tinyurl.com/d6n52y
Classic ‘Sound Equalizer’ in Flash/AS3 – Everyday 3D
thax bartek;
This work is every good, i like it ;)
For anyone struggling with the issue of having this waveform work in the Flash IDE but not when published, make sure that the domain that is serving the audio stream has a crossdomain.xml file that allows access to all (*).
Also make sure that the ‘checkPolicyFile’ for the Netstream object is set to true! This took me quite a while to figure out…