Share
În acest tutorial, vă voi învăța cum să creați o reprezentare vizuală a spectrului audio al unui fișier sonor, folosind Flash SoundMixer.computeSpectrum metodă. Vom folosi patru clase pentru acest efect: Sunet, SoundChannel, SoundMixer, și ByteArray. Voi explica fiecare clase pe măsură ce le folosim.
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
Lansați Flash Pro și creați un nou document Flash. Setați dimensiunea scenei la 500x300px, culoarea de fundal la 000000 și rata cadrelor la 24fps.
În linia temporală, selectați stratul existent și redenumiți-l "Butoane". Apoi apasa Fereastră> Biblioteci comune> Butoane.
Selectați setul de butoane preferat, apoi glisați și fixați butoanele "Play" și "Stop" în colțul din dreapta jos al scenei.
Setați numele instanțelor acestor butoane play_btn și stop_btn, respectiv.
Creați un fișier AS nou și salvați-l ca Main.as. Adăugați acest cod (citiți comentariile pentru mai multe detalii):
Acest cod trebuie plasat în noua noastră clasă:
Accentsconagua
pachet import flash.display.Sprite; import flash.media.Sound; // Clasa Sound este primul pas în lucrul cu sunetul. Este folosit pentru a încărca un sunet, a reda un sunet și a gestiona proprietățile de bază ale sunetului. import flash.net.URLRequest; clasa publică principală extinde Sprite private var sound: Sound; funcția publică principală () sound = new Sound (nou URLRequest ("sound.mp3")); // atribuiți muzică variabilei sonore. sound.play (); // reda sunetul atribuit. Va trebui să puneți un fișier MP3 numit sound.mp3 în același director ca directorul de ieșire al FLA. Orice MP3 va face; on este inclus în descărcarea sursei tutorialului.
Adăugați numele clasei în câmpul Clasă din secțiunea Publicare din panoul Proprietăți pentru a asocia FLA cu clasa Document principal.
Dacă nu sunteți familiarizat cu conceptul de clasă de documente, consultați acest sfat rapid înainte de a citi mai departe.
Apoi apăsați Ctrl + Enter pentru a testa aplicația.
Să adăugăm o instanță a unei clase noi: SoundChannel. Această clasă este folosită pentru a păstra diferite sunete în canale audio separate; fiecare canal este creat de o instanță de SoundChannel, și folosim aceste instanțe pentru a controla sunetele.
pachet import flash.display.Sprite; import flash.media.Sound; import flash.media.SoundChannel; import flash.net.URLRequest; importul flash.events.MouseEvent; clasa publică principală extinde Sprite private var sound: Sound; canal privat var: SoundChannel; funcția publică principală () sound = new Sound (nou URLRequest ("sound.mp3")); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler); funcția privată onPlayHandler (eveniment: MouseEvent): void channel = sound.play (); funcția privată onStopHandler (eveniment: MouseEvent): void channel.stop (); După cum puteți vedea, atunci când se face clic pe Play, nu redăm doar fișierele MP3, ci le atribuim și unui SoundChannel. Putem apoi controla redarea prin această instanță SoundChannel mai târziu - în acest caz, stopând-o.
Acum, să creăm o animație simplă pentru acest sunet, folosind din nou clasa SoundChannel.
pachet import flash.display.Sprite; import flash.media.Sound; import flash.media.SoundChannel; import flash.net.URLRequest; importul flash.events.MouseEvent; importul flash.events.Event; clasa publică principală extinde Sprite private var sound: Sound; canal privat var: SoundChannel; funcția publică principală () sound = new Sound (nou URLRequest ("sound.mp3")); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler); funcția privată onPlayHandler (eveniment: MouseEvent): void channel = sound.play (); // asignarea sunetului la canalul addEventListener (Event.ENTER_FRAME, animateBars); // render animația fiecărui cadru funcția privată onStopHandler (eveniment: MouseEvent): void channel.stop (); graphics.clear (); removeEventListener (Event.ENTER_FRAME, animateBars); // opri randarea animației animateBars (eveniment: Eveniment): void graphic.clear (); graphics.beginFill (0xAB300C, 1); // Desenați un dreptunghi a cărui înălțime corespunde cu graficul de canal.leftPeak.drawRect (190,300,50, -channel.leftPeak * 160); graphics.endFill (); graphics.beginFill (0xAB300C, 1); // Desenați un dreptunghi al cărui înălțime corespunde canalului. Dreapta grafică.drawRect (250,300,50, -channel.rightPeak * 160); graphics.endFill (); leftPeak și rightPeak proprietățile unui SoundChannel exemplu, corespund amplitudinii actuale a sunetului, prin canalele din stânga și din dreapta. Gândiți-vă la acest lucru: dacă aveți boxe stereo, atunci leftPeak este volumul sunetului care iese din difuzorul stâng și rightPeak este volumul sunetului care iese din difuzorul din dreapta.
Puteți apăsa pe Ctrl + Enter pentru a testa aplicația:
SoundMixer clasa controlează toate sunetele încorporate și streaming în aplicație, pentru toate SoundChannels simultan.
Are trei metode: areSoundsInaccessible (), care determină dacă sunetele sunt inaccesibile din motive de securitate; stopAll (), care oprește redarea tuturor sunetelor; și computeSpectrum (), ceea ce ne interesează pentru acest tutorial. Ultima metodă ia o "instantanee" a sunetului curent și îl împinge într-un obiect ByteArray.
Clasa ByteArray oferă metode și proprietăți pentru a optimiza citirea, scrierea și lucrul cu datele binare. Se stochează datele ca o serie de octeți, de unde și numele. Aflați mai multe cu această Introducere în ByteArray.
Acum, hai să creăm o animație mai complexă utilizând SoundMixer.computeSpectrum () metodă. Din nou, citiți comentariile din cod pentru a înțelege pe deplin comportamentul:
pachet import flash.display.Sprite; import flash.media.Sound; import flash.utils.ByteArray; importul flash.events.Event; import flash.media.SoundMixer; import flash.filters.GlowFilter; import flash.net.URLRequest; importul flash.events.MouseEvent; import flash.media.SoundChannel; clasa publică principală extinde Sprite private var sound: Sound; canal privat var: SoundChannel; privat var byteArr: ByteArray = nou ByteArray (); glow privat var: GlowFilter = nou GlowFilter (); private var filtruArr: Array; linie privată var: Sprite = Sprite nou (); funcția publică Main () // a crea un efect "strălucire" pentru animația pe care o vom face glow.color = 0x009900; glow.alpha = 1; glow.blurX = 10; glow.blurY = 10; // încărcați fișierul MP3 în sunet Obiect sunet = sunet nou (nou URLRequest ("sound.mp3")); // aplicați efectul de strălucire filterArr = array nou (strălucire); line.filters = filterArr; addChild (line); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler); funcția privată onPlayHandler (eveniment: MouseEvent): void channel = sound.play (0,1000); addEventListener (Event.ENTER_FRAME, spectrumHandler); funcția privată onStopHandler (eveniment: MouseEvent): void channel.stop (); line.graphics.clear (); removeEventListener (Event.ENTER_FRAME, spectrumHandler); spectrul funcției privateHandler (eveniment: Eveniment): void line.graphics.clear (); line.graphics.lineStyle (1, Math.random () * 0xFFFFFF); line.graphics.moveTo (-1150); // împingeți octeții spectrului în ByteArray SoundMixer.computeSpectrum (byteArr); pentru (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); Cele mai importante părți ale acestui cod sunt liniile 53 și 57. Aici, întregul val sunet este tradus într-un ByteArray, care este apoi citit, byte byte, și tradus într-un set de numere.
ByteArray va avea o lungime de 512 de plutitoare; în pentru , citim numai primele 256 de flotoare, care corespund întregului val de sunet al canalului stâng (sunetul care vine prin difuzorul stâng).
Apăsați Ctrl + Enter pentru a testa aplicația.
Putem umple zona sub linie pentru a ne da un efect diferit:
Tot ce trebuie să facem este să tragem o cutie și să o umplem, folosind grafică metode. Codul pentru aceasta este după cum urmează:
pachet import flash.display.Sprite; import flash.media.Sound; import flash.utils.ByteArray; importul flash.events.Event; import flash.media.SoundMixer; import flash.filters.GlowFilter; import flash.net.URLRequest; importul flash.events.MouseEvent; import flash.media.SoundChannel; clasa publică principală extinde Sprite private var sound: Sound; canal privat var: SoundChannel; privat var byteArr: ByteArray = nou ByteArray (); glow privat var: GlowFilter = nou GlowFilter (); private var filtruArr: Array; linie privată var: Sprite = Sprite nou (); funcția publică Main () glow.color = 0xFF0000; glow.alpha = 1; glow.blurX = 10; glow.blurY = 10; sound = sunet nou (nou URLRequest ("sound.mp3")); filterArr = array nou (strălucire); line.filters = filterArr; addChild (line); addChild (play_btn); addChild (stop_btn); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler); funcția privată onPlayHandler (eveniment: MouseEvent): void channel = sound.play (0,1000); addEventListener (Event.ENTER_FRAME, spectrumHandler); funcția privată onStopHandler (eveniment: MouseEvent): void channel.stop (); line.graphics.clear (); removeEventListener (Event.ENTER_FRAME, spectrumHandler); spectrul funcției privateHandler (eveniment: Eveniment): void // trageți o margine a casetei și specificați o linie de umplere.graphics.clear (); line.graphics.beginFill (0xFF0000,1); line.graphics.lineStyle (1,0xFF0000); line.graphics.moveTo (-1150); SoundMixer.computeSpectrum (byteArr); pentru (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); Putem lua această idee mai departe, pentru a adăuga și efecte și mai interesante și complexe:
În acest caz, vom atrage două spectre unul peste celălalt, unul pentru canalul din stânga și unul pentru dreapta. Pentru a realiza acest lucru, vom folosi două pentru buclele pe care fiecare le citește în 256 plutesc unul după celălalt.
pachet import flash.display.Sprite; import flash.media.Sound; import flash.utils.ByteArray; importul flash.events.Event; import flash.media.SoundMixer; import flash.filters.GlowFilter; import flash.net.URLRequest; importul flash.events.MouseEvent; import flash.media.SoundChannel; clasa publică principală extinde Sprite private var sound: Sound; canal privat var: SoundChannel; privat var byteArr: ByteArray = nou ByteArray (); glow privat var: GlowFilter = nou GlowFilter (); private var filtruArr: Array; linie privată var: Sprite = Sprite nou (); privat var num: Număr; public const GRAFT_HEIGHT: int = 150; // set animație înălțime public const CHANNEL_SIZE: int = 256; // setați dimensiunea canalului stânga / dreapta funcția publică principală () glow.color = 0x009900; glow.alpha = 1; glow.blurX = 10; glow.blurY = 10; sound = sunet nou (nou URLRequest ("sound.mp3")); filterArr = array nou (strălucire); // adăugați strălucire la animație line.filters = filterArr; addChild (line); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler); funcția privată onPlayHandler (eveniment: MouseEvent): void channel = sound.play (0,1000); // play sunet de 1000 de ori addEventListener (Event.ENTER_FRAME, spectrumHandler); funcția privată onStopHandler (eveniment: MouseEvent): void channel.stop (); line.graphics.clear (); removeEventListener (Event.ENTER_FRAME, spectrumHandler); spectrul funcției privateHandler (eveniment: Eveniment): void num = 0; line.graphics.clear (); // crea linia grafică curentă.graphics.lineStyle (0, 0x00FF00); line.graphics.beginFill (0x00FF00,0.5); line.graphics.moveTo (0, GRAFT_HEIGHT); SoundMixer.computeSpectrum (byteArr); / / adăugați bytes la Mixer de sunet pentru (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; i)) num = (byteArr.readFloat () * GRAFT_HEIGHT); line.graphics.linePentru (i * 2, GRAFT_HEIGHT - num); line.graphics.lineTo (0, GRAFT_HEIGHT); line.graphics.endFill (); Așa că am învățat cum să folosim diferitele clase de sunet și cum să creăm animații frumoase de desen animat SoundMixer.
Vă mulțumim că ați avut timp să citiți acest articol, deoarece acesta este primul meu tutorial. Dacă aveți întrebări, vă rugăm să le lăsați într-un comentariu.
