Share
In diesem Tutorial werde ich Ihnen zeigen, wie Sie mithilfe von Flashs eine visuelle Darstellung des Audiospektrums einer Audiodatei erstellen SoundMixer.computeSpectrum Methode. Wir verwenden vier Klassen für diesen Effekt: Klingen, SoundChannel, Tonmischer, und ByteArray. Ich werde jede Klasse erklären, während wir sie verwenden.
Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten:
Starten Sie Flash Pro und erstellen Sie ein neues Flash-Dokument. Stellen Sie die Bühnengröße auf 500x300px, die Hintergrundfarbe auf # 000000 und die Bildrate auf 24fps ein.
Wählen Sie in Ihrer Timeline die vorhandene Ebene aus und benennen Sie sie in "Schaltflächen" um. Dann klick Fenster> Allgemeine Bibliotheken> Schaltflächen.
Wählen Sie Ihr bevorzugtes Tastenset aus und ziehen Sie die Schaltflächen "Play" und "Stop" in die rechte untere Ecke der Bühne.
Legen Sie die Instanznamen dieser Schaltflächen auf fest play_btn und stop_btn, beziehungsweise.
Erstellen Sie eine neue AS-Datei und speichern Sie sie als Main.as. Fügen Sie diesen Code hinzu (lesen Sie die Kommentare für weitere Details):
Dieser Code sollte in unsere neue Klasse eingefügt werden:
Accentsconagua
package import flash.display.Sprite; import flash.media.Sound; // Die Soundklasse ist der erste Schritt in der Arbeit mit Sound. Es wird verwendet, um einen Sound zu laden, einen Sound abzuspielen und grundlegende Soundeigenschaften zu verwalten. import flash.net.URLRequest; public class Main erweitert Sprite private var sound: Sound; public function Main () sound = neuer Sound (neue URLRequest ("sound.mp3")); // weisen Sie der Klangvariablen Musik zu. sound.play (); // zugewiesenen Sound abspielen. Sie müssen eine MP3-Datei mit dem Namen eingeben sound.mp3 im selben Verzeichnis wie das Ausgabeverzeichnis Ihrer FLA. Alle MP3-Dateien können on ist im Quellendownload des Tutorials enthalten.
Fügen Sie den Klassennamen im Feld "Publizieren" des Eigenschaftenbereichs zum Feld "Klasse" hinzu, um die FLA der Hauptdokumentklasse zuzuordnen.
Wenn Sie mit dem Konzept einer Dokumentenklasse nicht vertraut sind, lesen Sie diesen Quick Tip, bevor Sie weiterlesen.
Drücken Sie dann Strg + Eingabetaste, um Ihre Anwendung zu testen.
Fügen wir eine Instanz einer neuen Klasse hinzu: SoundChannel. Diese Klasse wird verwendet, um verschiedene Sounds in separaten Audiokanälen zu speichern. Jeder Kanal wird von einer Instanz von erstellt SoundChannel, und wir verwenden diese Fälle, um die Sounds zu steuern.
package import flash.display.Sprite; import flash.media.Sound; import flash.media.SoundChannel; import flash.net.URLRequest; import flash.events.MouseEvent; public class Main erweitert Sprite private var sound: Sound; Privater Var-Kanal: SoundChannel; public function Main () sound = neuer Sound (neue URLRequest ("sound.mp3")); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler); private Funktion onPlayHandler (Ereignis: MouseEvent): void channel = sound.play (); private Funktion onStopHandler (Ereignis: MouseEvent): void channel.stop (); Wie Sie sehen, wird beim Anklicken von Play nicht nur die MP3-Datei abgespielt, sondern auch einem SoundChannel zugewiesen. Die Wiedergabe kann dann später über diese SoundChannel-Instanz gesteuert werden - in diesem Fall durch Anhalten.
Lassen Sie uns nun einige einfache Animationen für diesen Sound erstellen.
package import flash.display.Sprite; import flash.media.Sound; import flash.media.SoundChannel; import flash.net.URLRequest; import flash.events.MouseEvent; import flash.events.Event; public class Main erweitert Sprite private var sound: Sound; Privater Var-Kanal: SoundChannel; public function Main () sound = neuer Sound (neue URLRequest ("sound.mp3")); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler); private Funktion onPlayHandler (event: MouseEvent): void channel = sound.play (); // weist der Channel-Klasse Sound zu. addEventListener (Event.ENTER_FRAME, animateBars); // die Animation jedes Bild rendern private Funktion onStopHandler (event: MouseEvent): void channel.stop (); graphics.clear (); removeEventListener (Event.ENTER_FRAME, animateBars); // Wiedergabe der Animation stoppen private Funktion animateBars (event: Event): void graphics.clear (); graphics.beginFill (0xAB300C, 1); // Zeichne ein Rechteck, dessen Höhe channel.leftPeak graphics.drawRect entspricht (190.300,50, -channel.leftPeak * 160); graphics.endFill (); graphics.beginFill (0xAB300C, 1); // Zeichne ein Rechteck, dessen Höhe Channel.rightPeak graphics.drawRect entspricht (250,300,50, -channel.rightPeak * 160); graphics.endFill (); Das leftPeak und RightPeak Eigenschaften von a SoundChannel Instanz entsprechen der aktuellen Amplitude des Sounds durch den linken und rechten Kanal. Stellen Sie sich das so vor: Wenn Sie Stereolautsprecher haben, dann leftPeak ist die Lautstärke des Tons, der aus dem linken Lautsprecher kommt, und RightPeak ist die Lautstärke des Tons, der aus dem rechten Lautsprecher kommt.
Sie können Strg + Eingabetaste drücken, um Ihre Anwendung zu testen:
Das Tonmischer class steuert alle eingebetteten und Streaming-Sounds in der Anwendung für alle SoundChannels gleichzeitig.
Es gibt drei Methoden: areSoundsInaccessible (), die bestimmt, ob Sounds aus Sicherheitsgründen nicht zugänglich sind; stopAll (), wodurch die Wiedergabe aller Sounds gestoppt wird; und computeSpectrum (), Das ist, was uns für dieses Tutorial interessiert. Die letztere Methode nimmt einen "Schnappschuss" des aktuellen Sounds auf und schiebt ihn in ein ByteArray-Objekt.
Die ByteArray-Klasse stellt Methoden und Eigenschaften bereit, um das Lesen, Schreiben und Arbeiten mit binären Daten zu optimieren. Es speichert Daten als ein Array von Bytes, daher seinen Namen. Weitere Informationen finden Sie in dieser Einführung in ByteArray.
Erstellen wir nun eine komplexere Animation mit der SoundMixer.computeSpectrum () Methode. Lesen Sie erneut die Kommentare im Code, um das Verhalten vollständig zu verstehen:
package import flash.display.Sprite; import flash.media.Sound; import flash.utils.ByteArray; import flash.events.Event; import flash.media.SoundMixer; import flash.filters.GlowFilter; import flash.net.URLRequest; import flash.events.MouseEvent; import flash.media.SoundChannel; public class Main erweitert Sprite private var sound: Sound; Privater Var-Kanal: SoundChannel; private var byteArr: ByteArray = neues ByteArray (); private var glow: GlowFilter = neuer GlowFilter (); private var filterArr: Array; private var-Zeile: Sprite = new Sprite (); public function Main () // Erstellen eines "Glow" -Effekts für die Animation. Wir werden glow.color = 0x009900 rendern. Glühen α = 1; glow.blurX = 10; glow.blurY = 10; // lade dein MP3 in das Sound-Objekt sound = new Sound (neue URLRequest ("sound.mp3")); // wende den Leuchteffekt filterArr = new Array (Glow); line.filters = filterArr; addChild (Linie); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler); private Funktion onPlayHandler (Ereignis: MouseEvent): void channel = sound.play (0,1000); addEventListener (Event.ENTER_FRAME, spectrumHandler); private Funktion onStopHandler (Ereignis: MouseEvent): void channel.stop (); line.graphics.clear (); removeEventListener (Event.ENTER_FRAME, spectrumHandler); private function spectrumHandler (event: Event): void line.graphics.clear (); line.graphics.lineStyle (1, Math.random () * 0xFFFFFF); line.graphics.moveTo (-1.150); // die Bytes des Spektrums in den ByteArray schieben 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); Die wichtigsten Teile dieses Codes sind die Zeilen 53 und 57. Hier wird die gesamte Schallwelle in ein ByteArray übersetzt, das dann Byte für Byte gelesen und in eine Reihe von Zahlen übersetzt wird.
Das ByteArray wird 512 Floats lang sein; in dem zum Schleife lesen wir nur die ersten 256 Floats, die der gesamten Schallwelle des linken Kanals entsprechen (der Ton, der durch den linken Lautsprecher kommt).
Drücken Sie Strg + Eingabetaste, um Ihre Anwendung zu testen.
Wir können den Bereich unterhalb der Linie ausfüllen, um einen anderen Effekt zu erzielen:
Alles, was wir tun müssen, ist, ein Feld zu zeichnen und es mit auszufüllen Grafik Methoden. Der Code dafür lautet wie folgt:
package import flash.display.Sprite; import flash.media.Sound; import flash.utils.ByteArray; import flash.events.Event; import flash.media.SoundMixer; import flash.filters.GlowFilter; import flash.net.URLRequest; import flash.events.MouseEvent; import flash.media.SoundChannel; public class Main erweitert Sprite private var sound: Sound; Privater Var-Kanal: SoundChannel; private var byteArr: ByteArray = neues ByteArray (); private var glow: GlowFilter = neuer GlowFilter (); private var filterArr: Array; private var-Zeile: Sprite = new Sprite (); öffentliche Funktion Main () glow.color = 0xFF0000; Glühen α = 1; glow.blurX = 10; glow.blurY = 10; sound = neuer Sound (neue URLRequest ("sound.mp3")); filterArr = neues Array (Glühen); line.filters = filterArr; addChild (Linie); addChild (play_btn); addChild (stop_btn); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler); private Funktion onPlayHandler (Ereignis: MouseEvent): void channel = sound.play (0,1000); addEventListener (Event.ENTER_FRAME, spectrumHandler); private Funktion onStopHandler (Ereignis: MouseEvent): void channel.stop (); line.graphics.clear (); removeEventListener (Event.ENTER_FRAME, spectrumHandler); private function spectrumHandler (event: Event): void // Zeichne eine Kante der Box und gib eine Fülllinie an.graphics.clear (); line.graphics.beginFill (0xFF0000,1); line.graphics.lineStyle (1,0xFF0000); line.graphics.moveTo (-1.150); 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); Wir können diese Idee noch weiterführen, um noch interessantere und komplexere Effekte hinzuzufügen:
In diesem Fall zeichnen wir zwei Spektren übereinander, eines für den linken und eines für den rechten Kanal. Um dies zu erreichen, verwenden wir zwei zum Schleifen, die jeweils in 256 Floats nacheinander eingelesen werden.
package import flash.display.Sprite; import flash.media.Sound; import flash.utils.ByteArray; import flash.events.Event; import flash.media.SoundMixer; import flash.filters.GlowFilter; import flash.net.URLRequest; import flash.events.MouseEvent; import flash.media.SoundChannel; public class Main erweitert Sprite private var sound: Sound; Privater Var-Kanal: SoundChannel; private var byteArr: ByteArray = neues ByteArray (); private var glow: GlowFilter = neuer GlowFilter (); private var filterArr: Array; private var-Zeile: Sprite = new Sprite (); private var num: Nummer; public const GRAFT_HEIGHT: int = 150; // Animationshöhe setzen public const CHANNEL_SIZE: int = 256; // set link / right channel size öffentliche Funktion Main () glow.color = 0x009900; Glühen α = 1; glow.blurX = 10; glow.blurY = 10; sound = neuer Sound (neue URLRequest ("sound.mp3")); filterArr = neues Array (Glühen); // füge der Animation line.filters Glow hinzu = filterArr; addChild (Linie); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler); private Funktion onPlayHandler (Ereignis: MouseEvent): void channel = sound.play (0,1000); // Sound 1000-mal abspielen addEventListener (Event.ENTER_FRAME, spectrumHandler); private Funktion onStopHandler (Ereignis: MouseEvent): void channel.stop (); line.graphics.clear (); removeEventListener (Event.ENTER_FRAME, spectrumHandler); private function spectrumHandler (event: Event): void num = 0; line.graphics.clear (); // aktuelle Grafik erstellen line.graphics.lineStyle (0, 0x00FF00); line.graphics.beginFill (0x00FF00,0.5); line.graphics.moveTo (0, GRAFT_HEIGHT); SoundMixer.computeSpectrum (byteArr); // füge dem Sound-Mixer Bytes hinzu (var i: int = 0; < 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.lineTo (i * 2, GRAFT_HEIGHT - num); line.graphics.lineTo (0, GRAFT_HEIGHT); line.graphics.endFill (); Wir haben also gelernt, wie man die verschiedenen Sound-Klassen verwendet und wie man schöne Animationen für das Zeichnen von Sounds erstellt Tonmischer.
Vielen Dank, dass Sie sich die Zeit genommen haben, diesen Artikel zu lesen, da dies mein erstes Tutorial ist. Wenn Sie Fragen haben, lassen Sie sie bitte in einem Kommentar.
