Share
I denne opplæringen lærer jeg deg hvordan du lager en visuell representasjon av lydfilens lydspekter ved hjelp av Flash SoundMixer.computeSpectrum metode. Vi bruker fire klasser for denne effekten: Lyd, SoundChannel, SoundMixer, og ByteArray. Jeg skal forklare hver klasse som vi bruker dem.
La oss se på det endelige resultatet vi vil jobbe for:
Start Flash Pro og opprett et nytt Flash-dokument. Still scenestørrelsen til 500x300px, bakgrunnsfargen til # 000000, og bildesatsen til 24fps.
På din tidslinje, velg det eksisterende laget og endre navnet på "Knapper". Klikk deretter Vindu> Vanlige biblioteker> Knapper.
Velg favorittknappsettet, og dra og slipp "Play" og "Stop" -knappene til nederste høyre hjørne av scenen.
Angi forekomstnavnene på disse knappene til play_btn og stop_btn, henholdsvis.
Opprett en ny AS-fil, og lagre den som Main.as. Legg til denne koden (les kommentarene for flere detaljer):
Denne koden skal plasseres i vår nye klasse:
Accentsconagua
pakke import flash.display.Sprite; importere flash.media.Sound; // Lydklassen er det første trinnet i å jobbe med lyd. Den brukes til å laste inn en lyd, spille en lyd og administrere grunnleggende lydegenskaper. importere flash.net.URLRequest; offentlig klasse Main utvider Sprite private var lyd: lyd; offentlig funksjon Main () lyd = nytt lyd (ny URLRequest ("sound.mp3")); // tilordne musikk til lydvariabelen. sound.play (); // spille tilordnet lyd. Du må sette en MP3-fil kalt sound.mp3 i samme katalog som FLAs utgangskatalog. Enhver MP3 vil gjøre; på er inkludert i opplæringen er kilde nedlasting.
Legg klassenavnet til klassefeltet i Publiser-delen av Egenskaper-panelet for å knytte FLA til hoveddokumentklassen.
Hvis du ikke er kjent med begrepet en dokumentklasse, sjekk ut denne Quick Tip før du leser videre.
Trykk deretter Ctrl + Enter for å teste programmet.
La oss legge til en forekomst av en ny klasse: SoundChannel. Denne klassen brukes til å holde forskjellige lyder i separate lydkanaler; hver kanal er opprettet av en forekomst av SoundChannel, og vi bruker disse tilfellene til å kontrollere lydene.
pakke import flash.display.Sprite; importere flash.media.Sound; importere flash.media.SoundChannel; importere flash.net.URLRequest; importer flash.events.MouseEvent; offentlig klasse Main utvider Sprite private var lyd: lyd; privat var kanal: SoundChannel; offentlig funksjon Main () lyd = nytt lyd (ny URLRequest ("sound.mp3")); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler); privat funksjon onPlayHandler (event: MouseEvent): void channel = sound.play (); privat funksjon onStopHandler (event: MouseEvent): void channel.stop (); Som du kan se, når Play klikkes, spiller vi ikke bare MP3, vi tildeler den også til en SoundChannel. Vi kan da styre avspillingen gjennom denne SoundChannel-forekomsten senere - i dette tilfellet ved å stoppe det.
La oss nå lage noen enkle animasjoner for denne lyden, igjen med SoundChannel-klassen.
pakke import flash.display.Sprite; importere flash.media.Sound; importere flash.media.SoundChannel; importere flash.net.URLRequest; importer flash.events.MouseEvent; importere flash.events.Event; offentlig klasse Main utvider Sprite private var lyd: lyd; privat var kanal: SoundChannel; offentlig funksjon Main () lyd = nytt lyd (ny URLRequest ("sound.mp3")); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler); privat funksjon onPlayHandler (event: MouseEvent): void channel = sound.play (); // tilordne lyd til kanalklasse addEventListener (Event.ENTER_FRAME, animateBars); // gjeng animasjonen hver ramme privat funksjon onStopHandler (event: MouseEvent): void channel.stop (); graphics.clear (); removeEventListener (Event.ENTER_FRAME, animateBars); // stopp for å gjøre animasjonen privat funksjon animateBars (event: Event): void graphics.clear (); graphics.beginFill (0xAB300C, 1); // Tegn et rektangel hvis høyde tilsvarer channel.leftPeak graphics.drawRect (190,300,50, -kanal.leftPeak * 160); graphics.endFill (); graphics.beginFill (0xAB300C, 1); // Tegne et rektangel hvis høyde tilsvarer channel.rightPeak graphics.drawRect (250,300,50, -kanal.rightPeak * 160); graphics.endFill (); De leftPeak og rightPeak egenskaper av a SoundChannel forekomsten samsvarer med lydens nåværende amplitude, gjennom venstre og høyre kanal. Tenk på det på denne måten: Hvis du har stereohøyttalere, da leftPeak er lydvolumet som kommer ut av venstre høyttaler, og rightPeak er volumet av lyden som kommer ut av høyre høyttaler.
Du kan trykke Ctrl + Enter for å teste programmet ditt:
De SoundMixer klassen kontrollerer alle innebygde og streaming lydene i programmet, for alle SoundChannels samtidig.
Den har tre metoder: areSoundsInaccessible (), som bestemmer om noen lyder er utilgjengelige på grunn av sikkerhetsgrunner; STOPALL (), som stopper avspilling av alle lyder; og computeSpectrum (), som er det vi er interessert i for denne opplæringen. Sistnevnte metode tar et "øyeblikksbilde" av gjeldende lyd, og skyver den inn i et ByteArray-objekt.
ByteArray-klassen gir metoder og egenskaper for å optimalisere lesing, skriving og arbeid med binære data. Den lagrer data som en rekke byte, derav navnet. Finn ut mer med denne introduksjonen til ByteArray.
Så nå la oss lage en mer komplisert animasjon ved hjelp av SoundMixer.computeSpectrum () metode. Igjen, les kommentarene i koden for å forstå oppførselen fullt ut:
pakke import flash.display.Sprite; importere flash.media.Sound; importere flash.utils.ByteArray; importere flash.events.Event; importer flash.media.SoundMixer; importer flash.filters.GlowFilter; importere flash.net.URLRequest; importer flash.events.MouseEvent; importere flash.media.SoundChannel; offentlig klasse Main utvider Sprite private var lyd: lyd; privat var kanal: SoundChannel; private var byteArr: ByteArray = ny ByteArray (); private var glød: GlowFilter = ny GlowFilter (); privat var filterArr: Array; privat var linje: Sprite = new Sprite (); offentlig funksjon Main () // lage en "glød" effekt for animasjonen vi vil gjengi glow.color = 0x009900; glow.alpha = 1; glow.blurX = 10; glow.blurY = 10; // laste inn MP3 til lydobjekt lyd = ny lyd (ny URLRequest ("sound.mp3")); // bruk glød effekt filterArr = nytt Array (glow); line.filters = filterArr; addChild (linje); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler); privat funksjon onPlayHandler (event: MouseEvent): void channel = sound.play (0,1000); addEventListener (Event.ENTER_FRAME, spectrumHandler); privat funksjon onStopHandler (event: MouseEvent): void channel.stop (); line.graphics.clear (); removeEventListener (Event.ENTER_FRAME, spectrumHandler); privatfunksjon spectrumHandler (hendelse: hendelse): void line.graphics.clear (); line.graphics.lineStyle (1, Math.random () * 0xFFFFFF); line.graphics.moveTo (-1,150); // skyv spekterets byte inn i ByteArray SoundMixer.computeSpectrum (byteArr); for (var jeg: 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 viktigste delene av denne koden er linjer 53 og 57. Her blir hele lydbølgen oversatt til en ByteArray, som deretter leses, byte av byte, og oversettes til et sett med tall.
ByteArray vil være 512 flyter lenge; i til loop, leser vi bare de første 256 flyter, som tilsvarer hele lydbølgen av venstre kanal (lyden kommer gjennom venstre høyttaler).
Trykk Ctrl + Enter for å teste programmet.
Vi kan fylle ut området under linjen for å gi oss en annen effekt:
Alt vi trenger å gjøre er å tegne en boks og fylle den inn, ved hjelp av grafikk metoder. Koden for dette er som følger:
pakke import flash.display.Sprite; importere flash.media.Sound; importere flash.utils.ByteArray; importere flash.events.Event; importer flash.media.SoundMixer; importer flash.filters.GlowFilter; importere flash.net.URLRequest; importer flash.events.MouseEvent; importere flash.media.SoundChannel; offentlig klasse Main utvider Sprite private var lyd: lyd; privat var kanal: SoundChannel; private var byteArr: ByteArray = ny ByteArray (); private var glød: GlowFilter = ny GlowFilter (); privat var filterArr: Array; privat var linje: Sprite = new Sprite (); offentlig funksjon Main () glow.color = 0xFF0000; glow.alpha = 1; glow.blurX = 10; glow.blurY = 10; lyd = ny lyd (ny URLRequest ("sound.mp3")); filterArr = nytt 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 funksjon onPlayHandler (event: MouseEvent): void channel = sound.play (0,1000); addEventListener (Event.ENTER_FRAME, spectrumHandler); privat funksjon onStopHandler (event: MouseEvent): void channel.stop (); line.graphics.clear (); removeEventListener (Event.ENTER_FRAME, spectrumHandler); private funksjon spectrumHandler (event: Event): void // tegne en kant av boksen, og spesifiser en fill line.graphics.clear (); line.graphics.beginFill (0xFF0000,1); line.graphics.lineStyle (1,0xFF0000); line.graphics.moveTo (-1,150); SoundMixer.computeSpectrum (byteArr); for (var jeg: 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); Vi kan ta denne ideen videre, for å legge til enda mer interessante og komplekse effekter:
I dette tilfellet trekker vi to spektra ovenpå hverandre, en for venstre kanal og en til høyre. For å oppnå dette, bruker vi to til løkker som hver leser i 256 flyter, den ene etter den andre.
pakke import flash.display.Sprite; importere flash.media.Sound; importere flash.utils.ByteArray; importere flash.events.Event; importer flash.media.SoundMixer; importer flash.filters.GlowFilter; importere flash.net.URLRequest; importer flash.events.MouseEvent; importere flash.media.SoundChannel; offentlig klasse Main utvider Sprite private var lyd: lyd; privat var kanal: SoundChannel; private var byteArr: ByteArray = ny ByteArray (); private var glød: GlowFilter = ny GlowFilter (); privat var filterArr: Array; privat var linje: Sprite = new Sprite (); privat var num: nummer; offentlig const GRAFT_HEIGHT: int = 150; // sett animasjonshøyde offentlig const CHANNEL_SIZE: int = 256; // sett venstre / høyre kanalstørrelse offentlig funksjon Main () glow.color = 0x009900; glow.alpha = 1; glow.blurX = 10; glow.blurY = 10; lyd = ny lyd (ny URLRequest ("sound.mp3")); filterArr = nytt array (glød); // legge lys til animasjonen line.filters = filterArr; addChild (linje); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler); privat funksjon onPlayHandler (event: MouseEvent): void channel = sound.play (0,1000); // spill lyd 1000 ganger addEventListener (Event.ENTER_FRAME, spectrumHandler); privat funksjon onStopHandler (event: MouseEvent): void channel.stop (); line.graphics.clear (); removeEventListener (Event.ENTER_FRAME, spectrumHandler); privatfunksjon spectrumHandler (event: Event): void num = 0; line.graphics.clear (); // lage nåværende grafikklinje.graphics.lineStyle (0, 0x00FF00); line.graphics.beginFill (0x00FF00,0.5); line.graphics.moveTo (0, GRAFT_HEIGHT); SoundMixer.computeSpectrum (byteArr); // legge byte til Sound mixer for (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; jeg--) num = (byteArr.readFloat () * GRAFT_HEIGHT); line.graphics.lineTo (jeg * 2, GRAFT_HEIGHT - num); line.graphics.lineTo (0, GRAFT_HEIGHT); line.graphics.endFill (); Så vi har lært å bruke de ulike lydklassene, og hvordan å lage vakre lydtrekk animasjoner ved hjelp av SoundMixer.
Takk for at du tok deg tid til å lese denne artikkelen, fordi dette er min første veiledning. Hvis du har noen spørsmål, vennligst legg dem i en kommentar.
