Ge ett MP3-ljudspektrum i Flash med ComputeSpectrum ()

I denna handledning lär jag dig hur man skapar en visuell representation av ljudfilens ljudspektrum, med hjälp av Flash SoundMixer.computeSpectrum metod. Vi använder fyra klasser för denna effekt: Ljud, Soundchannel, Soundmixer, och Bytearray. Jag förklarar varje klass som vi använder dem.

Slutresultatförhandsvisning

Låt oss ta en titt på det slutliga resultatet vi ska arbeta för:

Klicka för att visa demo

Steg 1: Ställ in din Flash-fil

Starta Flash Pro och skapa ett nytt Flash-dokument. Ställ in scenstorleken till 500x300px, bakgrundsfärgen till # 000000 och bildhastigheten till 24fps.

På din tidslinje markerar du det befintliga lagret och byter namn på det "Knappar". Klicka sedan Fönster> Vanliga bibliotek> Knappar.

Välj din favoritknappsats, dra och släpp sedan "Spela" och "Stopp" -knapparna till det nedre högra hörnet av scenen.

Ange instansnamnen på dessa knappar till play_btn och stop_btn, respektive.

Steg 2: Skapa dokumentklassen

Skapa en ny AS-fil och spara den som Main.as. Lägg till den här koden (läs kommentarerna för mer information):

Denna kod ska placeras i vår nya klass:

 paket import flash.display.Sprite; importera flash.media.Sound; // Ljudklassen är det första steget i att arbeta med ljud. Den används för att ladda ett ljud, spela ett ljud och hantera grundläggande ljudegenskaper. importera flash.net.URLRequest; public class Main sträcker sig Sprite private var sound: Sound; allmän funktion Main () ljud = nytt ljud (ny URLRequest ("sound.mp3")); // Tilldela musik till ljudvariabeln. sound.play (); // spela tilldelat ljud.

Du måste ange en MP3-fil som heter sound.mp3 i samma katalog som din FLAs utdatakatalog. Vilken mp3 som helst kommer att göra; på ingår i handledningens källkods nedladdning.

Steg 3: Dokumentklass

Lägg till klassnamnet i klassfältet i avsnittet Publicera i fönstret Egenskaper för att associera FLA med huvuddokumentklassen.

Om du inte är bekant med konceptet för en dokumentklass, kolla in denna Snabba Tips innan du läser vidare.

Tryck sedan på Ctrl + Enter för att testa din applikation.

Steg 4: Hantera ljudet med hjälp av knappar

Låt oss lägga till en instans av en ny klass: Soundchannel. Denna klass används för att hålla olika ljud i separata ljudkanaler; varje kanal skapas av en instans av Soundchannel, och vi använder dessa instanser för att styra ljuden.

 paket import flash.display.Sprite; importera flash.media.Sound; importera flash.media.SoundChannel; importera flash.net.URLRequest; importera flash.events.MouseEvent; public class Main sträcker sig Sprite private var sound: Sound; privat var kanal: SoundChannel; allmän funktion Main () ljud = nytt ljud (ny URLRequest ("sound.mp3")); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler);  privat funktion onPlayHandler (händelse: MouseEvent): void channel = sound.play ();  privat funktion onStopHandler (händelse: MouseEvent): void channel.stop ();

Som du kan se, när Play klickar, spelar vi inte bara MP3, vi tilldelar den också till en SoundChannel. Vi kan sedan styra uppspelningen via denna SoundChannel-förekomst senare - i det här fallet, genom att stoppa det.

Steg 5: Skapa enkel animering

Låt oss nu skapa en enkel animering för detta ljud, igen med hjälp av SoundChannel-klassen.

 paket import flash.display.Sprite; importera flash.media.Sound; importera flash.media.SoundChannel; importera flash.net.URLRequest; importera flash.events.MouseEvent; importera flash.events.Event; public class Main sträcker sig Sprite private var sound: Sound; privat var kanal: SoundChannel; allmän funktion Main () ljud = nytt ljud (ny URLRequest ("sound.mp3")); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler);  privat funktion onPlayHandler (händelse: MouseEvent): void channel = sound.play (); // tilldel ljud till kanalklassen addEventListener (Event.ENTER_FRAME, animeraBars); // gör animeringen varje ram privat funktion onStopHandler (händelse: MouseEvent): void channel.stop (); graphics.clear (); removeEventListener (Event.ENTER_FRAME, animeraBars); // stoppa animeringen privat funktion animateBars (händelse: Event): void graphics.clear (); graphics.beginFill (0xAB300C, 1); // Rita en rektangel vars höjd motsvarar channel.leftPeak graphics.drawRect (190,300,50, -kanal.leftPeak * 160); graphics.endFill (); graphics.beginFill (0xAB300C, 1); // Rita en rektangel vars höjd motsvarar channel.rightPeak graphics.drawRect (250,300,50, -kanal.rättig * 160); graphics.endFill ();

De leftPeak och rightPeak egenskaper av a Soundchannel exemplet motsvarar ljudets nuvarande amplitud genom de vänstra och högra kanalerna. Tänk på det här sättet: Om du har stereohögtalare, då leftPeak är ljudvolymen som kommer ut från vänster högtalare och rightPeak är ljudvolymen som kommer ut från höger högtalare.

Du kan trycka på Ctrl + Enter för att testa din ansökan:

Steg 6: Vad är SoundMixer?

De Soundmixer klassen kontrollerar alla inbäddade och strömmande ljud i programmet, för alla SoundChannels samtidigt.

Den har tre metoder: areSoundsInaccessible (), som avgör om ljudet är otillgängligt på grund av säkerhetsskäl; stopAll (), vilket stoppar uppspelning av alla ljud och computeSpectrum (), vilket är vad vi är intresserade av för denna handledning. Den senare metoden tar en "snapshot" av det aktuella ljudet, och trycker det in i ett ByteArray-objekt.

Steg 7: Vad är ByteArray?

Klassen ByteArray ger metoder och egenskaper för att optimera läsning, skrivning och arbete med binär data. Det lagrar data som en rad byte, det vill säga dess namn. Ta reda på mer med denna introduktion till ByteArray.

Steg 8: Mer komplexa animationer

Så nu låt oss skapa en mer komplex animering med hjälp av SoundMixer.computeSpectrum () metod. Återigen, läs kommentarerna i koden för att fullständigt förstå beteendet:

 paket import flash.display.Sprite; importera flash.media.Sound; importera flash.utils.ByteArray; importera flash.events.Event; importera flash.media.SoundMixer; importera flash.filters.GlowFilter; importera flash.net.URLRequest; importera flash.events.MouseEvent; importera flash.media.SoundChannel; public class Main sträcker sig Sprite private var sound: Sound; privat var kanal: SoundChannel; privat var byteArr: ByteArray = ny ByteArray (); privat var glöd: GlowFilter = ny GlowFilter (); privat var filterArr: Array; privat var linje: Sprite = new Sprite (); allmän funktion Main () // skapa en "glöd" effekt för animationen vi kommer att göra glow.color = 0x009900; glow.alpha = 1; glow.blurX = 10; glow.blurY = 10; // ladda din MP3 till ljudobjektets ljud = nytt ljud (ny URLRequest ("sound.mp3")); // Applicera glöd-effektfiltretArr = Ny Array (Glöd); line.filters = filterArr; addChild (linje); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler);  privat funktion onPlayHandler (händelse: MouseEvent): void channel = sound.play (0,1000); addeventlistener (Event.ENTER_FRAME, spectrumHandler);  privat funktion onStopHandler (händelse: MouseEvent): void channel.stop (); line.graphics.clear (); removeEventListener (Event.ENTER_FRAME, spectrumHandler);  privatfunktionsspektrumHandler (händelse: händelse): void line.graphics.clear (); line.graphics.lineStyle (1, Math.random () * 0xFFFFFF); line.graphics.moveTo (-1150); // tryck spektrumets byte i ByteArray SoundMixer.computeSpectrum (byteArr); för (var i: uint = 0; i<256; i++) // read bytes and translate to a number between 0 and +300 var num:Number = byteArr.readFloat() * 150 + 150; //use this number to draw a line line.graphics.lineTo(i*2,num);

De viktigaste delarna av denna kod är linjerna 53 och 57. Här översätts hela ljudvågan till en ByteArray, som sedan läses, byte med byte och översätts till en uppsättning tal.

ByteArray kommer att vara 512 floats långa; i för slinga läser vi endast de första 256 flottorna, som motsvarar hela ljudvågan i den vänstra kanalen (ljudet kommer genom vänster högtalare).

Tryck Ctrl + Enter för att testa din applikation.

Steg 9: Fyll i luckorna

Vi kan fylla i området under linjen för att ge oss en annan effekt:

Allt vi behöver göra är att rita en låda och fylla den i, med hjälp av grafik metoder. Koden för detta är följande:

 paket import flash.display.Sprite; importera flash.media.Sound; importera flash.utils.ByteArray; importera flash.events.Event; importera flash.media.SoundMixer; importera flash.filters.GlowFilter; importera flash.net.URLRequest; importera flash.events.MouseEvent; importera flash.media.SoundChannel; public class Main sträcker sig Sprite private var sound: Sound; privat var kanal: SoundChannel; privat var byteArr: ByteArray = ny ByteArray (); privat var glöd: GlowFilter = ny GlowFilter (); privat var filterArr: Array; privat var linje: Sprite = new Sprite (); allmän funktion Main () glow.color = 0xFF0000; glow.alpha = 1; glow.blurX = 10; glow.blurY = 10; ljud = nytt ljud (ny URLRequest ("sound.mp3")); filterArr = ny Array (glöd); line.filters = filterArr; addChild (linje); addChild (play_btn); addChild (stop_btn); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler);  privat funktion onPlayHandler (händelse: MouseEvent): void channel = sound.play (0,1000); addeventlistener (Event.ENTER_FRAME, spectrumHandler);  privat funktion onStopHandler (händelse: MouseEvent): void channel.stop (); line.graphics.clear (); removeEventListener (Event.ENTER_FRAME, spectrumHandler);  privatfunktionsspektrumHandler (händelse: händelse): void // rita en kant av rutan och ange en fill line.graphics.clear (); line.graphics.beginFill (0xFF0000,1); line.graphics.lineStyle (1,0xFF0000); line.graphics.moveTo (-1150); SoundMixer.computeSpectrum (byteArr); för (var i: uint = 0; i<256; i++) var num:Number = byteArr.readFloat() * 200 + 150; line.graphics.lineTo(i*2,num);  //draw the rest of the box line.graphics.lineTo(512,300); line.graphics.lineTo(0,300); line.graphics.lineTo(-1,150);

Steg 10: Försök med något annat

Vi kan ta denna idé vidare, för att lägga till ännu mer intressanta och komplexa effekter:

I det här fallet ritar vi två spektra ovanpå varandra, en för den vänstra kanalen och en till höger. För att uppnå detta använder vi två för slingor som varje läser i 256 flottor, en efter en.

 paket import flash.display.Sprite; importera flash.media.Sound; importera flash.utils.ByteArray; importera flash.events.Event; importera flash.media.SoundMixer; importera flash.filters.GlowFilter; importera flash.net.URLRequest; importera flash.events.MouseEvent; importera flash.media.SoundChannel; public class Main sträcker sig Sprite private var sound: Sound; privat var kanal: SoundChannel; privat var byteArr: ByteArray = ny ByteArray (); privat var glöd: GlowFilter = ny GlowFilter (); privat var filterArr: Array; privat var linje: Sprite = new Sprite (); privat var nummer: nummer; offentlig konst GRAFT_HEIGHT: int = 150; // Ange animationshöjd offentlig konst CHANNEL_SIZE: int = 256; // Ange vänster / höger kanalstorlek offentlig funktion Main () glow.color = 0x009900; glow.alpha = 1; glow.blurX = 10; glow.blurY = 10; ljud = nytt ljud (ny URLRequest ("sound.mp3")); filterArr = ny Array (glöd); // lägg till glöd till animeringen line.filters = filterArr; addChild (linje); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler);  privat funktion onPlayHandler (händelse: MouseEvent): void channel = sound.play (0,1000); // spela ljud 1000 gånger addEventListener (Event.ENTER_FRAME, spectrumHandler);  privat funktion onStopHandler (händelse: MouseEvent): void channel.stop (); line.graphics.clear (); removeEventListener (Event.ENTER_FRAME, spectrumHandler);  privatfunktionsspektrumHandler (händelse: händelse): void num = 0; line.graphics.clear (); // skapa nuvarande grafiklinje.graphics.lineStyle (0, 0x00FF00); line.graphics.beginFill (0x00FF00,0.5); line.graphics.moveTo (0, GRAFT_HEIGHT); SoundMixer.computeSpectrum (byteArr); // lägg till byte till Sound mixer för (var i: int = 0; i < CHANNEL_SIZE; i++)  num = (byteArr.readFloat() * GRAFT_HEIGHT); line.graphics.lineTo(i * 2, GRAFT_HEIGHT - num);  line.graphics.lineTo(CHANNEL_SIZE * 2, GRAFT_HEIGHT); line.graphics.endFill(); line.graphics.lineStyle(0, 0xFF0000); line.graphics.beginFill(0xFF0000, 0.5); line.graphics.moveTo(CHANNEL_SIZE * 2,GRAFT_HEIGHT); for (i = CHANNEL_SIZE; i > 0; jag--) num = (byteArr.readFloat () * GRAFT_HEIGHT); line.graphics.lineTo (jag * 2, GRAFT_HEIGHT - num);  line.graphics.lineTo (0, GRAFT_HEIGHT); line.graphics.endFill ();

Slutsats

Så vi har lärt oss hur man använder olika ljudklasser och hur man skapar vackra ljudritningsanimationer med Soundmixer.

Tack för att du har tagit dig tid att läsa den här artikeln, för det här är min första handledning. Om du har några frågor, vänligen lämna dem i en kommentar.

Koda