Como crear un Analizador de Espectro utilizando SwiftMP3

Desde hace algun tiempo quise saber como los chicos de Flashkit hacian que la consola de vista previa llevará el ritmo de la música, investigando en la red encontré muchas simulaciones pero ninguno llevaba el el ritmo real.

Me di a la tarea de investigar como hacerlo revise la mayorí­a de los tutoriales de Flashkit para ver si de casualidad ahi encontraba la clave que me dejará entender esa consola de vista preliminar… hasta que un dí­a, mejor dicho una madrugada mientras disfrutaba del insomnio por causalidad el google me llevo a la pagina que deseaba … que raros son los caminos del google ….

Asi es como di con la pagina de los chicos de CowFly quienes tienen una excelente guí­a en ingles para hacer este Spectrum Analizer.

Así­ que me dí­ a la tarea de entenderlo y este es el resultado…

[FLASH]http://blog.dahousecat.net/clab/analizador/analizadorgrafico.swf,220,210[/FLASH]

Como verán por fin lo logre !!! y a continuación el tutorial en español para que todos puedan tener su consola tipo Flashkit.

Un Flashtrak es un archivo SWF que se obtiene a través de un programa que analiza un archivo Mp3 y obtiene una serie de variables que representan los picos del sonido analizado, entre las variables que obtiene están las etiquetas ID3 Artista, Titulo de la canción, y Nombre del Album, así­ como las variables que representan la amplitud de los picos del sonido.

Para crear nuestro analizador de espectro, utilizaremos el programa SwiftMp3 que pueden descargar de la pagina de Swift Tools la versión de Prueba esta limitada 30 segundos. Este programa nos permitirá obtener el FlashTrack del Mp3 que necesitamos.

Empecemos … lo primero que haremos es iniciar el Programa SwiftMP3 y agregar un archivo MP3 que tengamos, para esto vamos al menú File y seleccionamos la opción Add File.

Después de seleccionar la cancion que deseamos, aparecerá el nombre del Archivo que hayamos escogido en panel derecho del programo, donde podremos editar las tres etiquetas ID3 que serán guardadas en nuestro Flashtrak; haciendo clic con el boton secundario aparecerá el menú contextual y eligiremos la opción Edit Properties lo que lanzará una pequeña ventana en la cual podremos editar las etiquetas.

Ahora que tenemos editadas las etiquetas podemos proceder a publicar nuestro MP3 a SWF.

Antes de publicar nos fijaremos en que las opciones que seleccionamos son las adecuadas…

Debemos marcar el Checkbox Generate Spectrum Data, la opción Refresh Rate nos permite elegir a cuantos frames por segundo se desplazará nuestro archivo SWF publicado; combo box Default Export Format seleccionaremos la opción SWF; como usamos la versión de prueba la opción truncate esta por defecto marcada y puesta a 30 segundos, esta opción nos permite elegir cuanto tiempo del Sonido MP3 deseamos que se exporte.

La opción Publish Folder nos permitirá alojar nuestro SWF publicado en el directorio que mejor nos parezca.

En este punto estamos listos para por fin Publicar en formato SWF nuestro sonido MP3, no queda mas que Presionar el botón Publish y esperar a que termine la codificación.

Al finalizar este proceso tendremos ya nuestro archivo FlashTrak que contendrá las variables adecuadas para crear nuestro Analizador de Espectro =)

Ahora Iniciemos la creación del Analizador de espectro…

Durante el análisis realizado por el SwiftMP3 genera las variables que serán utilizadas para crear el Analizador de Espectro, estas son 18 variables, numeradas desde s0 a s17, cada variable tiene un rango de entre 0 y 31, como el sonido cambia a través de la reproducción del SWF los valores de s0, s1, s2 … s17 también lo harán. Recordemos que las variables s0 a s17 pueden ser iguales a cualquier valor entre 0 y 31, en la mayorí­a de los casos el promedio del rango de amplitud del MP3 rara vez es mayor a 20.

Con el Flash abierto, crearemos un nuevo documento y procederemos a crear un MC vací­o que nos servirá para cargar nuestro FlashTrak (SWF). Para ello iremos al Menu Insertar y escogeremos la opción Nuevo Sí­mbolo o presionamos la combinación de teclas Control + F8, en la ventana ponemos el nombre Cargador y elegimos el tipo Clip de Pelí­cula.

Inmediatamente después se creara la zona de trabajo para ese Clip de Pelí­cula, pero nosotros lo dejaremos en blanco pues lo que necesitamos es un contenedor para nuestro SWF. Así­ que regresaremos a la Escena 1.

El MC Cargador se guardará en la biblioteca de nuestro archivo, y lo que haremos será arrastrarlo al escenario y ponerle como nombre de instancia musicHolder, como detalle extra lo colocaremos en la posición x=0 y y=0 y bloquearemos la capa en la que se encuentra (clic en el punto correspondiente debajo del icono con forma de candado).

Ahora en el primer Fotograma de nuestra pelí­cula colocaremos la instrucción:

[as]_root.musicHolder.loadMovie(“RUTA DEL FLASHTRAK”);[/as]

La instrucción anterior cargará el Flashtrak dentro de nuestra pelí­cula principal.

Probaremos la pelí­cula presionando Control + Enter, la pelí­cula deberá empezar a reproducir nuestro FlashTrak.

Ha llegado el momento de empezar la construcción de las barras que cambiaran su tamaño con respecto a las variables s0 a s17 a través de estas barras podremos observar que dichas barras llevarán el ritmo de la música.

Para crear las barras seleccionaremos la herramienta dibujar rectángulo y haremos uno en el escenario de 5px de ancho por 100 de alto, eliminaremos las lí­neas del borde y lo convertiremos a MC lo llamaremos barra. Algo muy importante es el punto de registro de nuestro MC pues a partir de el crecerá nuestra barra, por eso lo colocaremos en la parte inferior central de nuestro MC.

Y procederemos a copiar nuestra barra hasta tener 18 alineadas en el escenario. Ahora procederemos a colocar sobre cada una de las barras el siguiente código, para ello seleccionaremos la barra que deseamos y presionamos la tecla F9 y se abrirá el panel de acciones, entonces podremos proceder:

[as]onClipEvent(load) {
if (_root.startHeight==nul) {_root.startHeight=10;}
this._yscale=_root.startHeight; //Porcentaje de la altura original de la barra.
}

onClipEvent(enterFrame) {
if (_root.jumpAmount==nul) {_root.jumpAmount=7;}
// Creamos el incremento en el salto de la barra para hacerlo mas visible
// s0 es la primer variable de las 18 que utilizaremos
scaleAmount=_root.musicHolder.s0 * _root.jumpAmount;
// Si el salto de la barra es mayor a 100, fijamos 100 como máxima longitud.
if (scaleAmount>100) {scaleAmount=100;}
this._yscale = scaleAmount;
}
[/as]

La única variación en el código será la variable s0 que ira cambiando a s1, s2, s3 hasta llegar a s17, para su correspondiente barra. No es necesario usar las 18 barras, funciona con menos.

Ahora en el primer Fotograma de la pelí­cula de la pelí­cula justo debajo de donde pusimos la instrucción que cargará el FlashTrak pondremos las siguientes instrucciones:

[as]_root.startHeight=5; // Porcentaje de la altura de la barra
_root.jumpAmount=5; // Incremento del salto de s0 a s17
[/as]

Estas variables nos servirán para controlar la altura inicial de la barra (startHeight) y el incremento del salto de la barra (jumpAmount), ambas están puestas a 5, estas variables son para tomar el control acerca del comportamiento de las barras. Si probamos la pelí­cula ya tendremos el Analizador completo !!!

Pero vamos no nos conformaremos con eso ¿no? … SwiftMP3 no solo nos proporciona el FlashTrak sino que tambien nos proporciona la capacidad de utilizar sus demas atributos para lograr un reproductor Básico, con sus botones de Play, Stop y Pause.

Creando los Botones.
Pues bien procedemos a crear 3 botones simples y los instanciamos con los siguientes nombres playButton, stopButton y pauseButton.

Después tomaremos de la biblioteca el MC vacio que creamos al principio, lo colocamos en el escenario y le ponemos como nombre de instancia buttonsMC.

Presionamos F9 y colocamos el siguiente codigo:

[as]onClipEvent(enterFrame) {
// Play Button
_root.playButton.onPress = function () {
// Inicia la reproducción del FlashTrak
_root.musicHolder.play();
};
// Pause Button
_root.pauseButton.onPress = function () {
// Pausa la Reproducción del FlashTrak
_root.musicHolder.stop();
};
// Stop Button
_root.stopButton.onPress = function () {
// Detiene la Reproducción del FlashTrak
_root.musicHolder.gotoAndStop(1);
};
}
[/as]

Hasta aquí­ ya tenemos un reproductor con las funciones Básicas, pero me van a decir –oye un momento, ¿Y las etiquetas ID3?- precisamente para ahí­ vamos. =D

Desplegando Etiquetas ID3

Esta parte es muy sencilla, todo lo que tenemos que hacer es insertar tres campos de texto dinámicos en el escenario e instanciarlos con los nombres artist, title y album.

Ahora colocaremos en un lugar adecuado los eventos que obtendrán las etiquetas ID3; como se habrán dado cuenta hasta el momento todos los eventos han sido onClipEvent(enterFrame) esto se debe a que el FlashTrak es un SWF en el cual se inserto el sonido, como cuando importamos un sonido al escenario.

Muy bien ahora procederemos a tomar nuevamente nuestro clip vací­o de la biblioteca y colocarlo en el escenario en esta ocasión contendrá el código que traerá las etiquetas ID3, ¿Qué por que otro Clip Vací­o? Pues por comodidad, así­ podemos prescindir de los otros sin que nos afecte no queremos los botones pues los borramos con confianza.

Seleccionamos el Clip Vací­o que acabamos de poner en el escenario presionamos F9 y colocamos el siguiente código:

[as]onClipEvent(enterFrame){
_root.title.text = _root.musicHolder.Title;
_root.artist.text = _root.musicHolder.Artist;
_root.album.text = _root.musicHolder.Album;
}
[/as]

¿Necesita explicación? No lo creo ^^

Y por fin con esto tenemos el reproductor completo… con el analizador que lleva el ritmo de la música, ahora ya sabemos como Flashkit hizo su consola para las vistas previas de los Sonidos.

Ahora que tenemos lo básico piensen un poco, que serí­a se agregamos XML, un bonito diseño y una pizca de ingenio, seguro obtendremos un Reproductor con mejore caracterí­sticas, se le puede agregar aun la barra para controlar el volumen, el XML para crear un reproductor con un mayor numero de canciones, el limite lo pone tu ingenio …

Agradecimientos:

A la gente de cowfly.com por haber creado una excelente guí­a (en Ingles) y en la cual me base para traducirla e interpretarla a Español, y hacer pequeñas adiciones y correcciones que creí­ convenientes.

A mi curiosidad por aprender, desde que vi la consola de Flashkit me propuse hacer una parecida y pues al fin he tenido la oportunidad de saber como funciona.

Anotaciones

Si desean que no arranque la música hasta que le den al botón play, desbloqueen el musicHolder, seleccionenlo y con F9 para sacar la ventana de código apliquen:

[as]//Anotación por AOYAMA
onClipEvent(load)
{
this.stop();
}[/as]

Aoyama – Analizador de Espectro – Haz que lleve el ritmo de la musica (Foro BLUEForte)

DaHouseCat – Actualización de Código, Barras optimas sin importar el tamaño a través de porcentaje.

¿Tienes alguna pregunta? por favor dirigela al los foros de BLUEForte