Share
En este tutorial, te enseñaré cómo crear una representación visual del espectro de audio de un archivo de sonido, usando Flash SoundMixer.computeSpectrum método. Usaremos cuatro clases para este efecto: Sonar, Canal de sonido, Mezclador de sonido, y ByteArray. Explicaré cada clase como las usamos..
Echemos un vistazo al resultado final en el que trabajaremos:
Inicie Flash Pro y cree un nuevo documento de Flash. Establezca el tamaño del escenario en 500x300 px, el color de fondo en # 000000 y la velocidad de fotogramas en 24 fps.
En su línea de tiempo, seleccione la capa existente y cámbiele el nombre a "Botones". Entonces haga clic Ventana> Bibliotecas comunes> Botones.
Seleccione su grupo de botones favorito, luego arrastre y suelte los botones 'Play' y 'Stop' en la esquina inferior derecha del escenario.
Establezca los nombres de instancia de estos botones en play_btn y parada_btn, respectivamente.
Cree un nuevo archivo AS y guárdelo como Main.as. Agregue este código (lea los comentarios para más detalles):
Este código debe ser colocado en nuestra nueva Clase:
Accentsconagua
paquete import flash.display.Sprite; import flash.media.Sound; // La clase de sonido es el primer paso para trabajar con sonido. Se utiliza para cargar un sonido, reproducir un sonido y administrar las propiedades básicas del sonido. importar flash.net.URLRequest; La clase pública Main extiende Sprite private var sound: Sound; función pública Main () sound = new Sound (new URLRequest ("sound.mp3")); // asignar música a la variable de sonido. sound.play (); // reproducir el sonido asignado. Tendrás que poner un archivo MP3 llamado sonido.mp3 en el mismo directorio que el directorio de salida de su FLA. Cualquier MP3 hará on está incluido en la fuente de descarga del tutorial.
Agregue el nombre de la clase al campo Clase en la sección Publicar del panel de Propiedades para asociar la FLA con la clase de documento principal.
Si no está familiarizado con el concepto de una clase de documento, consulte este Consejo rápido antes de seguir leyendo..
Luego presione Ctrl + Enter para probar su aplicación.
Agreguemos una instancia de una nueva clase: Canal de sonido. Esta clase se usa para mantener diferentes sonidos en canales de audio separados; cada canal es creado por una instancia de Canal de sonido, Y usamos estas instancias para controlar los sonidos..
paquete import flash.display.Sprite; import flash.media.Sound; importar flash.media.SoundChannel; importar flash.net.URLRequest; import flash.events.MouseEvent; La clase pública Main extiende Sprite private var sound: Sound; canal var privado: SoundChannel; función pública Main () sound = new Sound (new URLRequest ("sound.mp3")); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler); función privada onPlayHandler (evento: MouseEvent): void channel = sound.play (); función privada onStopHandler (evento: MouseEvent): void channel.stop (); Como puede ver, cuando se hace clic en Reproducir, no solo reproducimos el MP3, sino que también lo asignamos a un SoundChannel. Luego podemos controlar la reproducción a través de esta instancia de SoundChannel más adelante, en este caso, haciendo que se detenga..
Ahora vamos a crear una animación simple para este sonido, de nuevo usando la clase SoundChannel.
paquete import flash.display.Sprite; import flash.media.Sound; importar flash.media.SoundChannel; importar flash.net.URLRequest; import flash.events.MouseEvent; import flash.events.Event; La clase pública Main extiende Sprite private var sound: Sound; canal var privado: SoundChannel; función pública Main () sound = new Sound (new URLRequest ("sound.mp3")); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler); función privada onPlayHandler (event: MouseEvent): void channel = sound.play (); // asigna sonido a la clase de canal addEventListener (Event.ENTER_FRAME, animateBars); // representa la animación en cada cuadro función privada onStopHandler (evento: MouseEvent): void channel.stop (); graphics.clear (); removeEventListener (Event.ENTER_FRAME, animateBars); // deja de representar la animación función privada animateBars (event: Event): void graphics.clear (); graphics.beginFill (0xAB300C, 1); // Dibuja un rectángulo cuya altura corresponda a channel.leftPeak graphics.drawRect (190,300,50, -channel.leftPeak * 160); graphics.endFill (); graphics.beginFill (0xAB300C, 1); // Dibuje un rectángulo cuya altura corresponda a channel.rightPeak graphics.drawRect (250,300,50, -channel.rightPeak * 160); graphics.endFill (); los pico izquierdo y pico derecho propiedades de un Canal de sonido La instancia corresponde a la amplitud actual del sonido, a través de los canales izquierdo y derecho. Piénsalo de esta manera: si tienes altavoces estéreo, entonces pico izquierdo es el volumen del sonido que sale del altavoz izquierdo, y pico derecho es el volumen del sonido que sale del altavoz derecho.
Puede presionar Ctrl + Enter para probar su aplicación:
los Mezclador de sonido la clase controla todos los sonidos incorporados y de transmisión en la aplicación, para todos los SoundChannels a la vez.
Tiene tres métodos: SonSonidos Inaccesibles (), que determina si algún sonido es inaccesible debido a razones de seguridad; para todo(), que detiene la reproducción de todos los sonidos; y computeSpectrum (), que es lo que nos interesa para este tutorial. El último método toma una "instantánea" del sonido actual y lo empuja en un objeto ByteArray.
La clase ByteArray proporciona métodos y propiedades para optimizar la lectura, la escritura y el trabajo con datos binarios. Almacena los datos como una matriz de bytes, de ahí su nombre. Obtenga más información con esta Introducción a ByteArray.
Así que ahora vamos a crear una animación más compleja utilizando el SoundMixer.computeSpectrum () método. Nuevamente, lea los comentarios en el código para entender completamente el comportamiento:
paquete import flash.display.Sprite; import flash.media.Sound; import flash.utils.ByteArray; import flash.events.Event; importar flash.media.SoundMixer; importar flash.filters.GlowFilter; importar flash.net.URLRequest; import flash.events.MouseEvent; importar flash.media.SoundChannel; La clase pública Main extiende Sprite private var sound: Sound; canal var privado: SoundChannel; private var byteArr: ByteArray = new ByteArray (); brillo de var privado: GlowFilter = nuevo GlowFilter (); private var filterArr: Array; línea var privada: Sprite = nuevo Sprite (); función pública Main () // crea un efecto de "brillo" para la animación que renderizaremos glow.color = 0x009900; glow.alpha = 1; glow.blurX = 10; resplandor.blurY = 10; // carga tu MP3 en el objeto Sound sound = new Sound (new URLRequest ("sound.mp3")); // aplique el efecto de brillo filterArr = new Array (brillo); line.filters = filterArr; addChild (línea); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler); función privada onPlayHandler (evento: MouseEvent): void channel = sound.play (0,1000); addEventListener (Event.ENTER_FRAME, spectrumHandler); función privada onStopHandler (evento: MouseEvent): void channel.stop (); line.graphics.clear (); removeEventListener (Event.ENTER_FRAME, spectrumHandler); Función privada spectrumHandler (evento: Evento): void line.graphics.clear (); line.graphics.lineStyle (1, Math.random () * 0xFFFFFF); line.graphics.moveTo (-1,150); // inserta los bytes del espectro en el ByteArray SoundMixer.computeSpectrum (byteArr); para (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); Las partes más importantes de este código son las líneas 53 y 57. Aquí, toda la onda de sonido se traduce a un ByteArray, que luego se lee, byte a byte, y se traduce en un conjunto de números..
El ByteArray tendrá 512 flotadores largos; en el para En bucle, solo leemos los primeros 256 flotadores, que corresponden a toda la onda de sonido del canal izquierdo (el sonido que llega a través del altavoz izquierdo).
Presione Ctrl + Enter para probar su aplicación.
Podemos completar el área debajo de la línea para darnos un efecto diferente:
Todo lo que necesitamos hacer es dibujar una caja y rellenarla, usando gráficos metodos El código para esto es el siguiente:
paquete import flash.display.Sprite; import flash.media.Sound; import flash.utils.ByteArray; import flash.events.Event; importar flash.media.SoundMixer; importar flash.filters.GlowFilter; importar flash.net.URLRequest; import flash.events.MouseEvent; importar flash.media.SoundChannel; La clase pública Main extiende Sprite private var sound: Sound; canal var privado: SoundChannel; private var byteArr: ByteArray = new ByteArray (); brillo de var privado: GlowFilter = nuevo GlowFilter (); private var filterArr: Array; línea var privada: Sprite = nuevo Sprite (); función pública Main () glow.color = 0xFF0000; glow.alpha = 1; glow.blurX = 10; resplandor.blurY = 10; sound = new Sound (new URLRequest ("sound.mp3")); filterArr = nueva matriz (resplandor); line.filters = filterArr; addChild (línea); addChild (play_btn); addChild (stop_btn); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler); función privada onPlayHandler (evento: MouseEvent): void channel = sound.play (0,1000); addEventListener (Event.ENTER_FRAME, spectrumHandler); función privada onStopHandler (evento: MouseEvent): void channel.stop (); line.graphics.clear (); removeEventListener (Event.ENTER_FRAME, spectrumHandler); función privada spectrumHandler (evento: Evento): void // dibuje un borde del cuadro, y especifique una línea de relleno.graphics.clear (); line.graphics.beginFill (0xFF0000,1); line.graphics.lineStyle (1,0xFF0000); line.graphics.moveTo (-1,150); SoundMixer.computeSpectrum (byteArr); para (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); Podemos llevar esta idea aún más lejos, para agregar efectos aún más interesantes y complejos:
En este caso, dibujaremos dos espectros uno encima del otro, uno para el canal izquierdo y otro para el derecho. Para lograr esto, usaremos dos para Bucles que cada uno lee en 256 flotadores, uno después del otro..
paquete import flash.display.Sprite; import flash.media.Sound; import flash.utils.ByteArray; import flash.events.Event; importar flash.media.SoundMixer; importar flash.filters.GlowFilter; importar flash.net.URLRequest; import flash.events.MouseEvent; importar flash.media.SoundChannel; La clase pública Main extiende Sprite private var sound: Sound; canal var privado: SoundChannel; private var byteArr: ByteArray = new ByteArray (); brillo de var privado: GlowFilter = nuevo GlowFilter (); private var filterArr: Array; línea var privada: Sprite = nuevo Sprite (); número de var privado: Número; public const GRAFT_HEIGHT: int = 150; // establecer la altura de la animación public const CHANNEL_SIZE: int = 256; // establecer la función pública del tamaño del canal izquierdo / derecho Main () glow.color = 0x009900; glow.alpha = 1; glow.blurX = 10; resplandor.blurY = 10; sound = new Sound (new URLRequest ("sound.mp3")); filterArr = nueva matriz (resplandor); // agregar brillo a la animación line.filters = filterArr; addChild (línea); play_btn.addEventListener (MouseEvent.CLICK, onPlayHandler); stop_btn.addEventListener (MouseEvent.CLICK, onStopHandler); función privada onPlayHandler (evento: MouseEvent): void channel = sound.play (0,1000); // reproducir sonido 1000 veces addEventListener (Event.ENTER_FRAME, spectrumHandler); función privada onStopHandler (evento: MouseEvent): void channel.stop (); line.graphics.clear (); removeEventListener (Event.ENTER_FRAME, spectrumHandler); Función privada spectrumHandler (evento: Evento): void num = 0; line.graphics.clear (); // crear gráficos actuales line.graphics.lineStyle (0, 0x00FF00); line.graphics.beginFill (0x00FF00,0.5); line.graphics.moveTo (0, GRAFT_HEIGHT); SoundMixer.computeSpectrum (byteArr); // agregar bytes al mezclador de sonido para (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 (); Así que hemos aprendido cómo usar las distintas clases de sonido y cómo crear hermosas animaciones de dibujo de sonido usando Mezclador de sonido.
Gracias por tomarse el tiempo de leer este artículo, porque este es mi primer tutorial. Si tiene alguna pregunta, por favor déjelos en un comentario..
