Crear Ecualizador Grafico con ActionScript 3

Por: shogoki + 24.10.2006

Bueno, con la llegada del ActionScript 3 llegaron cosas nuevas, y una de ellas fue la clase Flash.media.SoundMixer; que nos permite realizar un ecualizador grafico, hoy veremos como hacerlo , para ello utilizaremos una clase que llamaremos "PlaySound" que se encargara de reproducir el sonido, y pasarnos la información del ecualizador, bien empecemos creando la clase, abre tu editor de texto preferido, crea un archivo y nombralo como "PlaySound.as", luego coloca el siguiente código:

Código :

package {
     //Importamos las clases a utilizar
    import flash.display.Sprite;
    import flash.events.*;
    import flash.media.Sound;
    import flash.media.SoundChannel;  
    import flash.media.SoundTransform;
    import flash.media.SoundMixer;
    import flash.net.URLRequest;
    import flash.utils.Timer;
    import flash.utils.ByteArray;  
}

bueno en primer instancia, importamos las clases a utilizar, de las cuales las mas importantes son
flash.media.Sound; // Que nos permite cargar y reproducir un sonido
flash.media.SoundChannel; //Para controlar el sonido cargado
flash.media.SoundTransform; //que nos permite, asignar las propiedades de volumen y pannig al sonido
flash.media.SoundMixer;//Nos devuelve los valores de la Onda de sonido o el spectro de frecuencia que usaremos para el ecualizador
flash.utils.ByteArray; //Para crear un ByteArray, que es donde almacenaremos los valores del ecualizador

luego, creamos la clase en si que llamaremos PlaySound, y le asignaremos algunas variables a utilizar, y al final crearemos el constructor de la clase

Código :

  
public class PlaySound extends Sprite {
        private var url:String = "MySound.mp3";//Variable para almacenar el archivo a reproducir
        private var song:SoundChannel;//Instancia de SoundChannell
   private var soundFactory:Sound;//Instancia de Sound
   private var FourierTransform:Boolean = false;//Clase que usaremos para la transformación fourier, que ya explicaremos más adelante
   private var arrayMixer:ByteArray = new ByteArray();//ByteArray, para almacenar los valores del ecualizador
   private var pan:int = 0; //Para el ajuste de la salida del audio
   private var porcentLoad:Number = 0; 

        public function PlaySound() {
      CargarSong();
        }
}

Ok, vemos que desde el constructor llamamos a una función llamada "CargarSong", ok, vamos a crearla;

Código :

public function CargarSong():void{
       SoundMixer.stopAll();//Metodo de la clase SoundMixer, que nos permite detener todos los Sonidos que se esten reproduciendo
       soundFactory = new Sound();//Creamos una nueva instancia de la clase Sound
            var request:URLRequest = new URLRequest(url);//Hacemos la petición del mp3   
           //Luego asiganmos los Listener de la clase Sound();
       soundFactory.addEventListener(Event.COMPLETE, completeHandler);         
            soundFactory.addEventListener(ProgressEvent.PROGRESS, progressHandler);
            soundFactory.load(request);//Cargamos la canción
}

Luego procedamos a realizar los manejadores de eventos para la clase Sound;

Código :

        private function completeHandler(event:Event):void {
          //Una Vez que la canción se halla cargado por completo la reproducimos
      ReproducirSong();
        }
     

        private function progressHandler(event:ProgressEvent):void {
      //Mientras se carga, acutalizamos el valor de la variable porcentLoad   
      porcentLoad = Math.round((event.bytesLoaded*100)/event.bytesTotal);
        }

Vemos que cuando la canción se carga por completo, ejecutamos una función llamada ReproducirSong, que realmente no tiene mucha ciencia, como vemos a continuación

Código :

private function ReproducirSong():void{         
        song = soundFactory.play();//La ejecutamos
}

Listo, ya tenemos el codigo, que se encarga de cargar una canción, ahora bien, se preguntaran "Ok, pero, ¿Como creo el Ecualizador?", ok, vamos a ello

Código :

public function get Mixer():ByteArray{         
   //Llamamos al metodo estatico computeSpectrum de la clase SounMixer, y le pasamos los valores
   //del ByteArray donde se almacenaran, o el raw_wave o el spectro de frecuencia
   //y un valor Boolean que indica si se debe realizar la transforación Fourier o no
   //Al final retornamos el ByteArray
   SoundMixer.computeSpectrum(arrayMixer, FourierTransform);
      return arrayMixer;
   }

Listo, eso es todo lo que necesitamos para el ecualizador, solo una simple linea de condigo , vamos a explicar, el metodo "computeSpectrum" de la clase SoundMixer, posee la siguiente forma:

computeSpectrum(outputArray:ByteArray, FFTMode:Boolean = false, stretchFactor:int = 0):void

vemos que Recibe un ByteArray, que es el unico valor Obligatorio, luego un Booleno y un valor entero, ok!, pero que hace?, Simple, guarda en el ByteArray que le pasamos, 512 elementos, del tipo float(), que vienen a ser los valores de la onda de sonido (Sound Wave), de la reproducción acual, son 512, ya que los primeros 256 son para el parlante izquierdo, y los demas son para el parlante derecho, los valores estan comprendido desde -1.0 hasta 1.0, luego tenemos el valor booleno, si especificamos "true", ya no nos devolvera una onda de sonido, sino antes de guadar la información el ByteArray, aplicara la transformacion Fourier a la onda, y almacenara entonces un espectro de frecuencia, donde los valores del lado derecho vienen a ser ondas de alta Frecuencia, y los de la izquierda de baja Frecuencia.

Vamos a añadir una propiedad mas a la clase, que nos permitira especificar si queremos aplicar la transformación fourier o no veamos:

Código :

public function set Fourier(valor:Boolean):void{
   this.FourierTransform = valor;         
}
      
public function get Fourier():Boolean{
   return FourierTransform;
}

Ya con esto tenemos creada la clase, ahora solo tienes que utilizarla, que es lo mas sencillo, y como representar el Ecualizador ya queda de parte de tu imaginación, solo tienes que saber que el ByteArray que te devuelve la propiedad Mixer de la clase que creamos, almacena 512 elementos como valores del tipo Float, y si tienes por ejemplo, 512 barras en una pelicula y quieres moverlas al ritmo de la canción solo tendrias que modificar la propiedad scaleY de cada una, con los valores del array.

aqui puedes ver como queda, y ademas descargarte el código

http://www.aai.com.ve/tools/soundMixer/

espero que les sirva

actionscript_3

Deja un comentario

IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.

Nombre

Comentario