tutorial Sound spectrum in flash actionscript 3

Sound spectrum in flash actionscript 3

_{door vinTage op 24-10-2007}

Je eigen geluidsspectrum maken via actionscript3

Je kent ze wel, geluidsgolven zoals je ze ook wel ziet in verschillende media spelers.
Natuurlijk willen wij zelf ook zoiets hebben in onze superfancy flash media speler en als het even kan er zelf ook nog een leuke look aan geven.

Nou, dat kan dus ook!

Het maken van zo'n spectrum is eigenlijk niet zo heel moeilijk, er bestaat een functie voor in AS3 en die gaan we hier behandelen, de looks van je spectrum is iets wat je eigenlijk niet kan leren, dat is meer een kwestie van fantasie en experimenteren met filters, kleurtjes en nog meer in die trant.

Om te beginnen hebben we natuurlijk een geluidsbron nodig, we kunnen een mp3 inladen of een FLVmovie in onze swf laden, onze spectrum analizer zal reageren op alles wat geluid maakt in ons eindresultaat.
Het maakt niets uit of de geluidsbron extern wordt ingeladen of dat deze in flash ge-embed zit, de spectrum analizer reageert op alle geluid ( behalve mic/line ingangen ).

De belangrijkste functie in onze spectrum analizer.

actionscript code

SoundMixer.computeSpectrum(byteArray, FFTMode, stretchFactor);

 

byteArray is dus een array dat binaire data bevat.
De inhoud word continue overschreven door de functie computeSpectrum, waarbij de eerste 256 waardes het linker kanaal en van 257 tot 512 het rechter kanaal representeren.
In deze array staan de waardes die bij de geluidsbron horen.

FFTMode (optioneel), Deze parameter (boolean) bepaald of we een ruwe wave vorm willen hebben, of dat we een spectrum willen hebben dat een frequentie gebied toont.
Als we kiezen voor de default value (true) dan hebben we een wave vorm.
Als we kiezen voor false, dan krijgen we een output die frequentie gebieden representeert, waarbij de lagere frequenties links worden weergegeven en de hogere frequenties rechts.

stretchFactor (optioneel), Deze parameter bepaald met welke resolutie we de geluidsbron willen berekenen.
0 is 44.1 KiloHertz
1 is 22.05 KiloHertz
2 is 11 ...etc

In onderstaande voorbeeld kun je de laatste 2 parameters veranderen en zien wat het verschil is:

Download de gratis flash plugin
Normaal zou hier dit voorbeeld moeten staan.

Actionscript3

Zo, nu we de belangrijkste functie kennen gaan we dus over tot de orde van de dag, namelijk iets laten zien.
Met onderstaande code laden we een geluidsfragment in onze SWF en dmv actionscript tekenen we de "equalizer".

actionscript code

//pad naar het geluid wat we in flash willen laden

var song:String = "liedje.mp3"

var geluid:Sound = new Sound();    

geluid.load(new URLRequest(song));

geluid.play();

//spectrum analyzer codes

var byteArray:ByteArray = new ByteArray(); 

function maakSpectrum(event:Event) {

  SoundMixer.computeSpectrum(byteArray);

  graphics.clear(); //meterjes weghalen

  for (var i:Number = 0; i < 512; i += 4) {//aantal "metertjes"

    //metertjes tekenen

    graphics.lineStyle(1, 0x000000);

    graphics.beginFill(0xff0000);

    //drawRect (x, y, width, height)

    graphics.drawRect(i , 200, 2, byteArray.readFloat() * 100);

  }

}

this.addEventListener(Event.ENTER_FRAME, maakSpectrum);

Vraag

Nu we dus een globale indruk hebben gekregen hoe we met SoundMixer.computeSpectrum een en ander kunnen doen, zou ik jullie willen vragen om helemaal los te gaan met allerlei filters en speciale effecten, om zo de meest fantastische special effects te creëren, laat je creaties maar zien in het forum of in de flashCase.

Veel plezier met het maken van je eigen kickass spectrum analizers!

Share |

Stem op deze tutorial

Reacties

Je bent niet ingelogged, je kan geen commentaar geven, of commentaren lezen over deze tutorial.