Reproductor de Archivos MP3 con Adobe Flash

Bien siguiendo la idea de nuestro amigo Sapinto de fusionar los scripts de ambos tutoriales que pusimos por aquí, me puse en un rato libre que tuve el día de hoy y he aquí el resultado, conforme estaba con este me llegaron mas ideas medio locas, como obtener los archivos de un array de XML para múltiples reproducciones, anexar la clásica barrita de progreso entre otras cosas raras, pero el tiempo se me acabo por hoy y pues solo alcance a hacer este que les dejo ahorita.

El diseño es malo, porque no es lo importante de este ejemplo, si no mas bien la mejora al script, esta un poco tosco; pero quise hacerlo así para que en caso de ser necesario usaran la referencia del lenguaje de los tutoriales de este foro (introducción al lenguaje AS 1, 2 y 3) además de que como es la primera versión, pues vamos por abonitos.

Otra diferencia esta vez, es que todo el código del programa lo cargare directamente en una clase y es con la que trabajaremos, dejando el entorno libre para futuras actualizaciones, solo bastaría modificar el archivo "audio.js" en el bloc de notas y listo, así ya no dependeremos del FLA para la edición.

1. Bien creamos una película en blanco del tamaño que deseemos y creamos un diseño que nos agrade o el que sea para hacer pruebas.
2. Creamos una barra con animación de forma de 100 fotogramas (como las que usamos para los preloaders)
3. Creamos 5 botones, stop_btn, play_btn, prev_btn, sigu_btn, volMenos_btn y volMas_btn. (Ver Imágen)
   
4. Creamos cuadro cuadros de texto dinámicos y les asignamos los siguientes nombres de instancia: ide_txt (El que mostrara la info de nuestro mp3), time_txt(el contador de tiempo), porcentaje_txt(mostrara el avance de la carga del mp3) y vol_txt (mostrara en que porcentaje se encuentra el volumen del archivo reproduciendo). (Ver Imágen arriba)
5. Abrimos nuestro editor de ActionScript (F9) e insertamos el siguiente código:

#include "audio.as"

6. Creamos un nuevo documento de ActionScript directamente en flash o en cualquier editor de texto y le agregamos el siguiente código: (atención al código que en los comentarios explico como funciona)

//Inicio del archivo de audio
stop();
var i:Number = 1;
//contador del mp3
var v:Number = 40;
//variable para medir el volumen del audio
var mp3s:Number = 3;
//Maximo de mp3 a reproducir
_root.miMp3 = new Sound();
//variable principal mi mp3
_root.miMp3.loadSound("mp3/"+i+".mp3", true);
//hacemos la carga de mp3 segun el valor de i
_root.miMp3.setVolume(v);
//asigna el volumen de reproduccion
_root.miMp3.onSoundComplete = function() {
//cuando termine el mp3, cargamos el siguiente
i++;
if (i>mp3s) {
i = 1;
}
miMp3.loadSound("mp3/"+i+".mp3", true);
_root.vol.gotoAndStop(v)
};
miMp3.onLoad = function(success:Boolean) {
var totalSeconds:Number = this.position/1000;
//vemos el tiempo transcurrido y sacamos los segundos
var minutes:Number = Math.floor(totalSeconds/60);
//lo mismo y sacamos los minutos
var seconds = Math.floor(totalSeconds)%60;
if (seconds<10) {
seconds = "0"+seconds;
}
if (minutes < 10) {
time_txt.text = ("0"+minutes+":"+seconds);
} else if (minutes >=10) {
time_txt.text = (minutes+":"+seconds);
}
};
setInterval(miMp3, "onLoad", 1000);
// lo que viene es para el porcentaje cargado
onEnterFrame = function () {
porcentaje_txt.text = (Math.round((miMp3.getBytesLoaded()/miMp3.getBytesTotal())*100)+"%");
if (Math.round((miMp3.getBytesLoaded()/miMp3.getBytesTotal())*100) == 100) {
porcentaje_txt.text = "streaming completo";
}
};
miMp3.onID3 = function():Void {
ide_txt.text = miMp3.id3.artist+" - "+miMp3.id3.songname;
};
//---------------------------------------
_root.vol_txt.text = "volumen a "+v+"%";
//Volumen inicial -----------------------
//funciones para el boton stop
_root.stop_btn.onPress = function() {
miMp3.stop();
miMp3.setVolume(v);
};
//funciones para el boton play
_root.play_btn.onPress = function() {
miMp3.start();
miMp3.setVolume(v);
};
//funciones para el el boton anterior
_root.prev_btn.onPress = function() {
if (i>1) {
//Condicion que asigna que si es mayor a 1
i = i-1;
//entonces sera igual a i restando 1
miMp3.loadSound("mp3/"+i+".mp3", true);
//cargara el valor de i
miMp3.setVolume(v);
//asigna el valor global del volumen
} else if (i <=3) {
//segunda condional que dice que si i es menor o igual a 3
i = 3;
//borre el valor anterior y asigne 3
miMp3.loadSound("mp3/"+i+".mp3", true);
//carga un mp3 con el valor de i
miMp3.setVolume(v);
//asigna el volumen global al archivo
}
/*En el anterior bloque de condiciones, creamos un bucle de forma manual, donde si i llega
a un valor menor a 1, si presionamos el boton seguira restando en 1, entonces creamos una
segunda condicion en la misma estructura donde si i no es menor o igual a 3, borre el valor
previo y re asigne a 3; con lo que obliga al programa a cumplir la primer condicion, creando
un bucle infinito en esta ecuacion.*/
};
//funciones para el boton siguiente
_root.sigu_btn.onPress = function() {
if (i<3) {
i = i+1;
miMp3.loadSound("mp3/"+i+".mp3", true);
miMp3.setVolume(v);
} else if (i >=3) {
i = 1;
miMp3.loadSound("mp3/"+i+".mp3", true);
miMp3.setVolume(v);
}
/*Hacemos lo mismo que en el boton anterior solo que a la inversa, aqui agregando valores en 1
en lugar de restarlos */
};
//funcion para el boton bajar volumen
_root.volMenos_btn.onPress = function() {
if (v>0) {
//creamos una condicion que dicte que si v es mayor a 0
v = v-5;
//el valor de v, sera v menos 5
miMp3.setVolume(v);
//asigna el volumen de la variable miMp3
_root.vol.gotoAndStop(v);
//lleva la barra de volumen al fotograma que dicte v
//en este caso se correra hasta 40; pues el valor original acertado
_root.vol_txt.text = "volumen a "+v+"%";
}
};
//funciones para el boton subir volumen
_root.volMas_btn.onPress = function() {
if (v<100) {
v = v+5;
miMp3.setVolume(v);
_root.vol.gotoAndStop(v);
_root.vol_txt.text = "volumen a "+v+"%";
}
};
//Fin del reproductor
/*MP3 Player by:
Sapinto: http://www.gallonegro.cl & Kitsch: http://javiernavarro.be | http://kitschmultimedia.info
*/

Usuarios que han visto este tema también han visto...

- Tutorial para crear un reloj de agujas en Flash
- Importacion wav mp3 en Flash
- Dibujo 3D en Flash con ActionScript
- Ejemplo de uso de la clase arguments de ActionScript con Flash
- Cómo centrar Flash

- Versión imprimible de este documento

- Enviar por e-mail este documento