Reproductor de Archivos MP3 con Adobe Flash
MP3 Player ActionScript de Adobe Flash
Tutorial por Sapinto y Kitsch
Realización de un Reproductor de Archivos MP3 utilizando Adobe Flash y ActionScript.
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.
- 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.
- Creamos una barra con animación de forma de 100 fotogramas (como las que usamos para los preloaders)
- Creamos 5 botones, stop_btn, play_btn, prev_btn, sigu_btn, volMenos_btn y volMas_btn. (Ver Imágen)
- 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)
- Abrimos nuestro editor de ActionScript (F9) e insertamos el siguiente código:
- 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)
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
*/
Bien espero que alguien le sea útil y mas aun, haber si alguien sale con algun aporte al tema y un dia de estos hacemos nuestro propio reproductor del foro.
Ver ejemplo del tutorial
Saludos :)
Comentarios de Reproductor de Archivos MP3 con Adobe Flash
↑ Tutorial
machinne
2007-03-30 15:54
machinne
2007-03-30 15:54
pp2710
2007-04-11 12:19
jjaure
2007-04-19 08:58
josedelaranda
2007-05-01 10:12
shemayet
2007-08-07 08:56
shemayet
2007-08-07 09:16
SINOPSIS2004
2007-12-07 16:29
Soy nuevo aqui y queria preguntarles tengo el ejemplo creo la carpeta mp3 dentro de esta pongo un tema formato mp3 lo renonbro con el nombre 1.mp3 pero no me funciona
desde ya muchas gracias
bultaco
2008-06-04 16:07
Estoy intentando hacer un botón a modo de PAUSE pero no logro hacerlo. Alguien que se anime? Un saludo
jumacaca
2008-10-06 14:19
perrogeek
2008-12-14 23:37
animalit0
2009-05-05 15:18
Gracias por la ayuda que me puedan brindar, espero pronta respuesta ;)
sonytsukino
2009-05-06 14:29
_root.stop_bnt.onPress=funtion(){
_root.play_bnt.onPress=funtion(){
_root.prev_bnt.onPress=funtion(){
_root.volMenos_bnt.onPress=funtion(){
_root.volMas_bnt.onPress=funtion(){
_root.sigu_bnt.onPress=funtion(){
y no se como corregir eso ademas soy nueva en estoy y no se como crear un actionScript directamente en flash o en cualquier editor de texto si alguien pudiera ayudarme se los agradeceria infinitamente muchas gracias y espero su ayuda hasta luego y muchas gracias por el tutorial me ayudo mucho
gabibarnet
2009-08-20 07:03
hgimagen
2010-03-09 15:13