Share
Dans ce tutoriel, je vais vous apprendre à créer une représentation visuelle du spectre audio d'un fichier son à l'aide de Flash. SoundMixer.computeSpectrum méthode. Nous allons utiliser quatre classes pour cet effet: Du son, SoundChannel, Mélangeur sonore, et ByteArray. Je vais expliquer chaque classe comme nous les utilisons.
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Lancez Flash Pro et créez un nouveau document Flash. Définissez la taille de la scène sur 500x300px, la couleur d'arrière-plan sur # 000000 et la fréquence d'images sur 24fps..
Dans votre scénario, sélectionnez le calque existant et renommez-le "Boutons". Puis clique Fenêtre> Bibliothèques communes> Boutons.
Sélectionnez votre ensemble de boutons préféré, puis faites glisser les boutons "Lire" et "Arrêter" dans le coin inférieur droit de la scène..
Définissez les noms d’occurrence de ces boutons sur play_btn et stop_btn, respectivement.
Créez un nouveau fichier AS et enregistrez-le sous. Main.as. Ajoutez ce code (lisez les commentaires pour plus de détails):
Ce code devrait être placé dans notre nouvelle classe:
Accentsconagua
package import flash.display.Sprite; import flash.media.Sound; // La classe Sound est la première étape du travail avec le son. Il est utilisé pour charger un son, jouer un son et gérer les propriétés de base du son. import flash.net.URLRequest; public class Main étend Sprite private var sound: Sound; fonction publique Main () sound = new Sound (nouvelle URLRequest ("sound.mp3")); // assigne de la musique à la variable son. sound.play (); // joue le son assigné. Vous aurez besoin de mettre un fichier MP3 appelé sound.mp3 dans le même répertoire que le répertoire de sortie de votre FLA. Tout MP3 fera l'affaire; on est inclus dans le téléchargement source du tutoriel.
Ajoutez le nom de la classe au champ Classe de la section Publier du panneau Propriétés pour associer le fichier FLA à la classe de document principale..
Si vous n'êtes pas familier avec le concept de classe de document, consultez ce conseil avant de continuer à lire..
Puis appuyez sur Ctrl + Entrée pour tester votre application..
Ajoutons une instance d'une nouvelle classe: SoundChannel. Cette classe est utilisée pour conserver différents sons dans des canaux audio distincts. chaque canal est créé par une instance de SoundChannel, et nous utilisons ces instances pour contrôler les sons.
package import flash.display.Sprite; import flash.media.Sound; import flash.media.SoundChannel; import flash.net.URLRequest; import flash.events.MouseEvent; public class Main étend Sprite private var sound: Sound; canal var privé: SoundChannel; fonction publique Main () sound = new Sound (nouvelle URLRequest ("sound.mp3")); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler); fonction privée onPlayHandler (event: MouseEvent): void channel = sound.play (); fonction privée onStopHandler (event: MouseEvent): void channel.stop (); Comme vous pouvez le constater, lorsque vous cliquez sur Play, nous ne faisons pas que lire le format MP3, nous l'attribuons également à un SoundChannel. Nous pouvons ensuite contrôler la lecture via cette instance SoundChannel ultérieurement - dans ce cas, en la faisant s'arrêter.
Créons maintenant une animation simple pour ce son, en utilisant à nouveau la classe SoundChannel.
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 étend Sprite private var sound: Sound; canal var privé: SoundChannel; fonction publique Main () sound = new Sound (nouvelle URLRequest ("sound.mp3")); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler); fonction privée onPlayHandler (event: MouseEvent): void channel = sound.play (); // affecte le son à la classe de canal addEventListener (Event.ENTER_FRAME, animateBars); // rend l'animation chaque image fonction privée onStopHandler (event: MouseEvent): void channel.stop (); graphics.clear (); removeEventListener (Event.ENTER_FRAME, animateBars); // arrête le rendu de l'animation fonction privée animateBars (event: Event): void graphics.clear (); graphics.beginFill (0xAB300C, 1); // Dessine un rectangle dont la hauteur correspond à channel.leftPeak graphics.drawRect (190 300,50, -channel.leftPeak * 160); graphics.endFill (); graphics.beginFill (0xAB300C, 1); // Dessine un rectangle dont la hauteur correspond à channel.rightPeak graphics.drawRect (250 300,50, -channel.rightPeak * 160); graphics.endFill (); le gauchePeak et rightPeak propriétés d'un SoundChannel exemple correspondent à l’amplitude actuelle du son, par les canaux gauche et droit. Pensez-y de cette façon: si vous avez des haut-parleurs stéréo, gauchePeak est le volume du son sortant du haut-parleur gauche, et rightPeak est le volume du son sortant du haut-parleur droit.
Vous pouvez appuyer sur Ctrl + Entrée pour tester votre application:
le Mélangeur sonore La classe contrôle tous les sons incorporés et en flux continu dans l'application, pour tous les canaux SoundChannels en même temps..
Il a trois méthodes: areSoundsInaccessible (), qui détermine si des sons sont inaccessibles pour des raisons de sécurité; arrête tout(), qui arrête la lecture de tous les sons; et computeSpectrum (), c'est ce qui nous intéresse pour ce tutoriel. La dernière méthode prend un "instantané" du son actuel et le pousse dans un objet ByteArray.
La classe ByteArray fournit des méthodes et des propriétés permettant d'optimiser la lecture, l'écriture et l'utilisation des données binaires. Il stocke les données sous forme de tableau d'octets, d'où son nom. En savoir plus avec cette introduction à ByteArray.
Alors maintenant, créons une animation plus complexe en utilisant le SoundMixer.computeSpectrum () méthode. Encore une fois, lisez les commentaires dans le code pour bien comprendre le comportement:
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 étend Sprite private var sound: Sound; canal var privé: SoundChannel; private var byteArr: ByteArray = new ByteArray (); lueur var privée: GlowFilter = new GlowFilter (); private var filterArr: Tableau; ligne var privée: Sprite = new Sprite (); public function Main () // crée un effet "brillant" pour l'animation à rendre glow.color = 0x009900; glow.alpha = 1; glow.blurX = 10; Glow.blurY = 10; // charge ton MP3 dans l'objet Sound sound = new Sound (new URLRequest ("sound.mp3")); // applique l'effet glow filterArr = new Array (glow); line.filters = filterArr; addChild (line); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler); fonction privée onPlayHandler (événement: MouseEvent): void channel = sound.play (0,1000); addEventListener (Event.ENTER_FRAME, spectreHandler); fonction privée onStopHandler (event: MouseEvent): void channel.stop (); line.graphics.clear (); removeEventListener (Event.ENTER_FRAME, spectrumHandler); fonction privée spectreHandler (événement: événement): void ligne.graphiques.clear (); line.graphics.lineStyle (1, Math.random () * 0xFFFFFF); line.graphics.moveTo (-1,150); // insère les octets du spectre dans ByteArray SoundMixer.computeSpectrum (byteArr); pour (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); Les parties les plus importantes de ce code sont les lignes 53 et 57. Ici, toute l’onde sonore est traduite en un ByteArray, qui est ensuite lu, octet par octet, puis traduit en un ensemble de nombres..
Le ByteArray aura une longueur de 512 flotteurs; dans le pour boucle, nous ne lisons que les 256 premiers flotteurs, qui correspondent à l’ensemble de l’onde sonore du canal gauche (le son provenant du haut-parleur gauche).
Appuyez sur Ctrl + Entrée pour tester votre application..
Nous pouvons remplir la zone sous la ligne pour nous donner un effet différent:
Tout ce que nous avons à faire est de dessiner une case et de la remplir en utilisant graphique méthodes. Le code pour ceci est comme suit:
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 étend Sprite private var sound: Sound; canal var privé: SoundChannel; private var byteArr: ByteArray = new ByteArray (); lueur var privée: GlowFilter = new GlowFilter (); private var filterArr: Tableau; ligne var privée: Sprite = new Sprite (); fonction publique Main () glow.color = 0xFF0000; glow.alpha = 1; glow.blurX = 10; Glow.blurY = 10; sound = new Sound (nouvelle URLRequest ("sound.mp3")); filterArr = nouveau tableau (lueur); line.filters = filterArr; addChild (line); addChild (play_btn); addChild (stop_btn); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler); fonction privée onPlayHandler (événement: MouseEvent): void channel = sound.play (0,1000); addEventListener (Event.ENTER_FRAME, spectreHandler); fonction privée onStopHandler (event: MouseEvent): void channel.stop (); line.graphics.clear (); removeEventListener (Event.ENTER_FRAME, spectrumHandler); fonction privée spectreHandler (événement: événement): void // dessine un bord de la zone et spécifie un remplissage line.graphics.clear (); line.graphics.beginFill (0xFF0000,1); line.graphics.lineStyle (1,0xFF0000); line.graphics.moveTo (-1,150); SoundMixer.computeSpectrum (byteArr); pour (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); Nous pouvons pousser cette idée plus loin, pour ajouter des effets encore plus intéressants et complexes:
Dans ce cas, nous allons dessiner deux spectres l'un sur l'autre, un pour le canal gauche et un pour le droit. Pour ce faire, nous allons utiliser deux pour des boucles lues chacune en 256 flotteurs, les unes après les autres.
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 étend Sprite private var sound: Sound; canal var privé: SoundChannel; private var byteArr: ByteArray = new ByteArray (); lueur var privée: GlowFilter = new GlowFilter (); private var filterArr: Tableau; ligne var privée: Sprite = new Sprite (); private var num: Number; public const GRAFT_HEIGHT: int = 150; // set animation height public const CHANNEL_SIZE: int = 256; // définit la fonction publique main / gauche de la taille du canal gauche () glow.color = 0x009900; glow.alpha = 1; glow.blurX = 10; Glow.blurY = 10; sound = new Sound (nouvelle URLRequest ("sound.mp3")); filterArr = nouveau tableau (lueur); // ajoute de l'éclat à l'animation line.filters = filterArr; addChild (line); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler); fonction privée onPlayHandler (événement: MouseEvent): void channel = sound.play (0,1000); // joue le son 1000 fois addEventListener (Event.ENTER_FRAME, spectrumHandler); fonction privée onStopHandler (event: MouseEvent): void channel.stop (); line.graphics.clear (); removeEventListener (Event.ENTER_FRAME, spectrumHandler); fonction privée spectreHandler (événement: événement): void num = 0; line.graphics.clear (); // crée les graphiques actuels line.graphics.lineStyle (0, 0x00FF00); line.graphics.beginFill (0x00FF00,0.5); line.graphics.moveTo (0, GRAFT_HEIGHT); SoundMixer.computeSpectrum (byteArr); // ajoute des octets au mélangeur de son pour (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.lineTo (i * 2, GRAFT_HEIGHT - num); line.graphics.lineTo (0, GRAFT_HEIGHT); line.graphics.endFill (); Nous avons donc appris à utiliser les différentes classes de sons et à créer de superbes animations de dessins sonores à l'aide de Mélangeur sonore.
Merci d'avoir pris le temps de lire cet article, car il s'agit de mon premier tutoriel. Si vous avez des questions, s'il vous plaît laissez-les dans un commentaire.
