Forums → Programming Forum → Adobe Flash Music Visualization Help

16	13255

offline

jpx111

264 posts

Nomad

Posted September 20, '08 2:37am UTC

Hello fellow Flash users
Today, I was exploring the world of music visualization in flash and i came across a good tutorial thingy...i was modifying it and changing numbers around and i got a pretty cool effect ...except you see, the whole thing is done on AS3 and doing a whole project on codes isn't my thing... I have a doubt...but first let me show you the script:

var url:String = "Mas Que Nada.mp3";
var request:URLRequest = new URLRequest(url);
var s:Sound = new Sound();
s.addEventListener(Event.COMPLETE, completeHandler);
s.load(request); var song:SoundChannel = s.play();
song.addEventListener(Event.SOUND_COMPLETE, soundCompleteHandler);
var ba:ByteArray = new ByteArray();

var gr:Sprite = new Sprite();
gr.x = 150;
gr.y = 400;
var blur:BlurFilter = new BlurFilter(10,20, BitmapFilterQuality.HIGH);
gr.filters = [blur];
addChild(gr);

var time:Timer = new Timer(50);
time.addEventListener(TimerEvent.TIMER, timerHandler);
time.start();

function completeHandler(event:Event):void {
event.target.play();
}

function soundCompleteHandler(event:Event):void {
time.stop();
}

function timerHandler(event:TimerEvent):void {
SoundMixer.computeSpectrum(ba,false);
var i:int;
gr.graphics.clear();
var mat:Matrix = new Matrix();
mat.rotate(1.57079633);
gr.graphics.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x0A7614], [1, 1], [10, 170], mat);

gr.graphics.moveTo(0,0);
var w:int = 1;
for (i=0; i<512; i+=w) {
var t:Number = ba.readFloat();
var n:Number = (t * 500);
gr.graphics.drawRect(i, 0, w, -n);
}
}

note that i did make this code...i just tweaked it
for it to work, you must change the address in the quotes in the first line to a website link to a song, OR the name of a music file placed in the same folder as the present flash file (and if i didn't mention it before, you have to save your flash file somewherefirst after you copy the code into it)...
you could hit play now and adore the prettiness ...and then help me with my problem
now that you are on the same track as me, what i want to do is add another sprite on top of the present one...but each time i do it, it compiles it without any errors, but while playing it , it doesn't show the sprites...

Any help will be greatly appreciated

Thanks a lot
- jpx

Hello fellow Flash users :D\r\nToday, I was exploring the world of music visualization in flash and i came across a good tutorial thingy...i was modifying it and changing numbers around and i got a pretty cool effect :)...except you see, the whole thing is done on AS3 and doing a whole project on codes isn't my thing... I have a doubt...but first let me show you the script:\r\n\r\n[quote]var url:String = "Mas Que Nada.mp3";\r\nvar request:URLRequest = new URLRequest(url);  \r\nvar s:Sound = new Sound();  \r\ns.addEventListener(Event.COMPLETE, completeHandler);  \r\ns.load(request);  var song:SoundChannel = s.play();  \r\nsong.addEventListener(Event.SOUND_COMPLETE, soundCompleteHandler);  \r\nvar ba:ByteArray = new ByteArray();  \r\n\r\nvar gr:Sprite = new Sprite();  \r\ngr.x = 150;  \r\ngr.y = 400;  \r\nvar blur:BlurFilter = new BlurFilter(10,20, BitmapFilterQuality.HIGH);\r\ngr.filters = [blur];\r\naddChild(gr);  \r\n\r\n\r\n\r\nvar time:Timer = new Timer(50);  \r\ntime.addEventListener(TimerEvent.TIMER, timerHandler);  \r\ntime.start();  \r\n  \r\nfunction completeHandler(event:Event):void {  	\r\n  event.target.play();  \r\n}  \r\n\r\nfunction soundCompleteHandler(event:Event):void {  	\r\n  time.stop();  \r\n} \r\n\r\n\r\nfunction timerHandler(event:TimerEvent):void {  	\r\n  SoundMixer.computeSpectrum(ba,false);  	\r\n  var i:int;  	\r\n  gr.graphics.clear();  	\r\n   var mat:Matrix = new Matrix();\r\nmat.rotate(1.57079633);\r\ngr.graphics.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x0A7614], [1, 1], [10, 170], mat);\r\n\r\n  gr.graphics.moveTo(0,0);  	\r\n  var w:int = 1;  	\r\n  for (i=0; i<512; i+=w) {  		\r\n    var t:Number = ba.readFloat();  		\r\n    var n:Number = (t * 500);  		\r\n   gr.graphics.drawRect(i, 0, w, -n);  	\r\n }\r\n}\r\n[/quote]\r\n\r\nnote that i did make this code...i just tweaked it :)\r\nfor it to work, you must change the address in the quotes in the first line to a website link to a song, OR the name of a music file placed in the same folder as the present flash file (and if i didn't mention it before, you have to save your flash file somewherefirst after you copy the code into it)...\r\nyou could hit play now and adore the prettiness :)...and then help me with my problem :D\r\nnow that you are on the same track as me, what i want to do is add another sprite on top of the present one...but each time i do it, it compiles it without any errors, but while playing it , it doesn't show the sprites...\r\n\r\nAny help will be greatly appreciated :D\r\n\r\nThanks a lot \r\n- jpx

16 Replies

offline

jpx111

264 posts

Nomad

Posted September 20, '08 2:38am UTC

sorry for double post but:

note that i did make this code...i just tweaked it

its supposed to say i did NOT make it :P

offline

IQAndreas

299 posts

Peasant

Posted September 22, '08 3:51am UTC

I tried out the code and it looked really neat. )

I am but a beginner in Action Script, but I have worked a lot with VB and similar code, so I pretty much understand what this code is doing.

However, I do not get what you are trying to do. In what way do you mean create another sprite on top of the present?

If you are trying to create it directly on top of the other, one is blocking the other, which is the reason you do not see it.

I messed around with the code a bit and got this:

var url:String = "09 Hotel California.mp3";
var request:URLRequest = new URLRequest(url);
var s:Sound = new Sound();
s.addEventListener(Event.COMPLETE, completeHandler);
s.load(request);
var song:SoundChannel = s.play();
song.addEventListener(Event.SOUND_COMPLETE, soundCompleteHandler);
var ba:ByteArray = new ByteArray();

var gr1:Sprite = new Sprite();
gr1.x = 0;
gr1.y = 400;
var blur:BlurFilter = new BlurFilter(10,20, BitmapFilterQuality.HIGH);
gr1.filters = [blur];
addChild(gr1);

var gr2:Sprite = new Sprite();
gr2.x = 0;
gr2.y = 400;
addChild(gr2);

var time:Timer = new Timer(50);
time.addEventListener(TimerEvent.TIMER, timerHandler);
time.start();

function completeHandler(event:Event):void {
event.target.play();
}

function soundCompleteHandler(event:Event):void {
time.stop();
}

function timerHandler(event:TimerEvent):void {
SoundMixer.computeSpectrum(ba,false);
var i:int;
gr1.graphics.clear();
gr2.graphics.clear();
var mat:Matrix = new Matrix();
mat.rotate(1.57079633);
gr1.graphics.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x0A7614], [1, 1], [10, 170], mat);
gr2.graphics.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x0A7614], [1, 1], [10, 170], mat);

gr1.graphics.moveTo(0,0);
gr2.graphics.moveTo(0,0);
var w:int = 1;
for (i=0; i<512; i+=w) {
var t:Number = ba.readFloat();
var n:Number = (t * 500);
gr1.graphics.drawRect(i, 0, w, -n);
gr2.graphics.drawRect(i, 0, w, -n);
}
}

It turned out neat, because the blur applied to gr1 shows up behind the hard lines of gr2, so there is like a shadow or a blur outside of the outline.

Also, if you move up the effect a little more (like saying gr.y = 200; instead) you can see that there is really a top and a bottom to this wave, the wave is just moved down so you only see the top part.

Does this give you an idea of what to do? If not, please explain the question more, and I will be happy to help in any way I can.

I tried out the code and it looked really neat. :))\r\n\r\nI am but a beginner in Action Script, but I have worked a lot with VB and similar code, so I pretty much understand what this code is doing.\r\n\r\nHowever, I do not get what you are trying to do. In what way do you mean create another sprite on top of the present?\r\n\r\nIf you are trying to create it directly on top of the other, one is blocking the other, which is the reason you do not see it.\r\n\r\nI messed around with the code a bit and got this:\r\n[quote]var url:String = "09 Hotel California.mp3";\r\nvar request:URLRequest = new URLRequest(url);\r\nvar s:Sound = new Sound();\r\ns.addEventListener(Event.COMPLETE, completeHandler);\r\ns.load(request);\r\nvar song:SoundChannel = s.play();\r\nsong.addEventListener(Event.SOUND_COMPLETE, soundCompleteHandler);\r\nvar ba:ByteArray = new ByteArray();\r\n\r\nvar gr1:Sprite = new Sprite();\r\ngr1.x = 0;\r\ngr1.y = 400;\r\nvar blur:BlurFilter = new BlurFilter(10,20, BitmapFilterQuality.HIGH);\r\ngr1.filters = [blur];\r\naddChild(gr1);\r\n\r\nvar gr2:Sprite = new Sprite();\r\ngr2.x = 0;\r\ngr2.y = 400;\r\naddChild(gr2);\r\n\r\nvar time:Timer = new Timer(50);\r\ntime.addEventListener(TimerEvent.TIMER, timerHandler);\r\ntime.start();\r\n\r\nfunction completeHandler(event:Event):void {\r\n	event.target.play();\r\n}\r\n\r\nfunction soundCompleteHandler(event:Event):void {\r\n	time.stop();\r\n}\r\n\r\nfunction timerHandler(event:TimerEvent):void {\r\n	SoundMixer.computeSpectrum(ba,false);\r\n	var i:int;\r\n	gr1.graphics.clear();\r\n	gr2.graphics.clear();\r\n	var mat:Matrix = new Matrix();\r\n	mat.rotate(1.57079633);\r\n	gr1.graphics.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x0A7614], [1, 1], [10, 170], mat);\r\n	gr2.graphics.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x0A7614], [1, 1], [10, 170], mat);\r\n\r\n	gr1.graphics.moveTo(0,0);\r\n	gr2.graphics.moveTo(0,0);\r\n	var w:int = 1;\r\n	for (i=0; i<512; i+=w) {\r\n		var t:Number = ba.readFloat();\r\n		var n:Number = (t * 500);\r\n		gr1.graphics.drawRect(i, 0, w, -n);\r\n		gr2.graphics.drawRect(i, 0, w, -n);\r\n	}\r\n}[/quote]\r\n\r\nIt turned out neat, because the blur applied to [b]gr1[/b] shows up behind the hard lines of [b]gr2[/b], so there is like a shadow or a blur outside of the outline.\r\n\r\nAlso, if you move up the effect a little more (like saying [b]gr.y = 200;[/b] instead) you can see that there is really a top and a bottom to this wave, the wave is just moved down so you only see the top part.\r\n\r\nDoes this give you an idea of what to do? If not, please explain the question more, and I will be happy to help in any way I can.

offline

jpx111

264 posts

Nomad

Posted September 22, '08 8:45pm UTC

thank you very much Andreas. You helped me wrap my head around this...
Today I'm a happy kid ... I'll probably post a code of a finished piece later

offline

jpx111

264 posts

Nomad

Posted September 22, '08 11:51pm UTC

Hello Everyone
I've made a final product using the code. Thank you again Andreas for your help. This is the single best thing that I've made using only AS3. No drawn art is used.
I built this using this Flash tutorial:

http://www.communitymx.com/content/article.cfm?cid=8E9A0

And if you want to see what I did, download the following .zip file, then extract it, and then open either of the folders (Hotel California or Mas Que Nada) and double click on the .swf file.

http://www.datafilehost.com/download-681e0173.html

All music in the .zip folder belongs to their respective owners.

Hotel California - The Eagles
Mas Que Nada - Sergio Mendez

I do not mean to trespass upon any copyrights by doing this.

I've also added my .fla file for any curious creature who thinks this is pretty stuff. But of course, you need Flash to open it. Also, you can put any song into it by opening the .fla file, going to the first frame's script on the main time line and editing the green link in the double quotes. However, your mp3 file needs to be in the same folder as the .fla for this to work. The link in the double quotes could be a link to a song on the internet.

I'm taking any comments of any sort...so please, post away.

PS: Please do not take this stuff and claim it as your own...your guilt will haunt you if you do.

PPS: If you think this is great stuff, go to the following link:

http://www.gskinner.com/blog/archives/2006/10/as3_music_visua.html

Hello Everyone :D\r\nI've made a final product using the code. Thank you again Andreas for your help. This is the single best thing that I've made using only AS3. No drawn art is used.\r\nI built this using this Flash tutorial:\r\n\r\nhttp://www.communitymx.com/content/article.cfm?cid=8E9A0\r\n\r\nAnd if you want to see what I did, download the following .zip file, then extract it, and then open either of the folders (Hotel California or Mas Que Nada) and double click on the .swf file.\r\n\r\nhttp://www.datafilehost.com/download-681e0173.html\r\n\r\nAll music in the .zip folder belongs to their respective owners.\r\n\r\nHotel California - The Eagles\r\nMas Que Nada - Sergio Mendez\r\n\r\nI do not mean to trespass upon any copyrights by doing this.\r\n\r\nI've also added my .fla file for any curious creature who thinks this is pretty stuff. But of course, you need Flash to open it. Also, you can put any song into it by opening the .fla file, going to the first frame's script on the main time line and editing the green link in the double quotes. However, your mp3 file needs to be in the same folder as the .fla for this to work. The link in the double quotes could be a link to a song on the internet.\r\n\r\nI'm taking any comments of any sort...so please, post away.\r\n\r\nPS: Please do not take this stuff and claim it as your own...your guilt will haunt you if you do.\r\n\r\nPPS: If you think this is great stuff, go to the following link:\r\n\r\nhttp://www.gskinner.com/blog/archives/2006/10/as3_music_visua.html

offline

IQAndreas

299 posts

Peasant

Posted September 23, '08 12:17am UTC

All music in the .zip folder belongs to their respective owners.

Hotel California - The Eagles
Mas Que Nada - Sergio Mendez

Just curious, how old are you?

It seems like (to my surprise) most people on here are around 13-15 years old. I assumed you were as well, and seeing that song, I assumed you had just gotten that track from a tutorial.

I was shocked there were other weirdos out there that had both The Eagles and Sergio Mendez on their computer. :P

Also, you stated on your page that you are an amateur 3d modeler. What program do you use?

offline

jpx111

264 posts

Nomad

Posted September 23, '08 12:25am UTC

lol...I am 14...and I like classic rock, jazz, blues, etc... weird?...i thought so...but there's a bunch of people like me where I live...so its not so weird :P

and as relating to 3D modeling, i use any free software I can get my hands on ... i use Google SketchUP(most proficient in it), Gmax (pretty bad at it), Maya Personal Learning Edition (second most proficient in it)...do you do any 3D modeling?

offline

IQAndreas

299 posts

Peasant

Posted September 23, '08 12:32am UTC

That's great that you are getting into computer programming that early on. It will definitely benefit you in the future, and you can really get some high paying jobs in the computer industry.

do you do any 3D modeling?

Yes. I am currently learning to use Blender (found at blender.org).

It is free and works fantastically well. The whole interface looks a little weird, but once you get used to it, it works wonders, and I wish all programs worked the same way. I sometimes accidentally use the convenient keyboard shortcuts in other programs, which, sadly, does not usually work.

I would really recommend giving it a try. It is open source, so it is constantly being worked on and made better.

Also, what about Simon & Garfunkel? Can't beat that, can you? ;-)

offline

Zophia

9,435 posts

Scribe

Posted September 23, '08 12:48am UTC

Well you asked me to leave a comment here, jpx111~

So, uhm, I don't understand any of the coding, but it sounds pretty cool. I should download the .zip?

Also, yay for Blender.

offline

IQAndreas

299 posts

Peasant

Posted September 23, '08 12:50am UTC

Ooh. Looks nice.
Also, Mas Que Nada was a "spiced up jazz version". I like it.

It makes me want to create a music player in flash.

Good job. Perhaps you could mix around with it a bit and allow users to select a predefined visualization from a drop down list. Or perhaps being able to import music files or play them streaming from the internet.

offline

jpx111

264 posts

Nomad

Posted September 23, '08 12:54am UTC

lol...i'm not really that much into programming...but yeah i do it cuz sometimes it produces crazy results...i especially love doing it in VB cuz everything is so easy there

I've used Blender...I have it on my computer presently...I tried to learn it, but...i sorta quit halfway...this was two years ago...i might just try doing it again

Simon and Garfunkel are pretty good...but I don't really listen to them much ...just a couple of songs I like from them...
btw have you heard the ukulele orchestra of great Britain? Do check it out...they do cover sort of things and medleys of other songs and stuff
and I think we are somewhat getting off topic :P... you could continue this conversation on my profile if you want to

Now back to my program...any comments...anyone?

offline

jpx111

264 posts

Nomad

Posted September 23, '08 12:58am UTC

whoops sorry for double post but i didn't see the two preceding comments...

@zophia: if you want to see the pretty stuff, yes you should download the zip

@andreas: wow that's just really wired...cuz i was thinking of doing the same 2 things!!!...awkward...

offline

dank

986 posts

Peasant

Posted September 23, '08 2:23am UTC

There's a lot you can do with the new sound spectrum pakage in AS3. I used it in my latest game, Beat Machine. You can calculate all the major beats and such by calculating the average of the last x notes and comparing how much difference there is between the average and the current sound.

offline

jpx111

264 posts

Nomad

Posted September 23, '08 2:43am UTC

thankyou dank...i will look into what you said...if I don't understand it after I try to look at it, may I please ask you for help?...and btw, very fun game

offline

jpx111

264 posts

Nomad

Posted October 9, '08 3:06am UTC

Sorry for bringing this thread back up again but, me has a question...

Dank, you know how you said to find the average of the sounds?...Well,what data of the sound should i do the averaging of?

offline

dank

986 posts

Peasant

Posted October 9, '08 11:38pm UTC

What you should do is build up an array of, say about 20, of the last sound recordings. Then, you just average them and see if the current sound being analyzed is greater than x%.

Showing 1-15 of 16

Categories

Quests

Community

Forums → Programming Forum → Adobe Flash Music Visualization Help