Taller Webmaster

Tutoriales para Webmasters

Bienvenido a Taller Webmaster, donde encontrarás la mejor información sobre tutoriales y recursos para webmasters!

Ingreso de Usuario

Recuperar contraseña

Registro de Usuario

Publicidad

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.

  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)
    Reproductor MP3 en Adobe Flash
  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:
  6. #include "audio.as"
  7. 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
*/

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


Descargar Source del tutorial

Saludos :)

Comentarios de Reproductor de Archivos MP3 con Adobe Flash

↑ Tutorial

  • machinne

    machinne

    2007-03-30 15:54

    podrias subir el ejemplo porfa gracias :p
  • machinne

    machinne

    2007-03-30 15:54

    pucha no explicaste donde pongo el mp3
  • pp2710

    pp2710

    2007-04-11 12:19

    si..!!!! donde esta el ejemplo.??? no se puede descargar..!!
  • jjaure

    jjaure

    2007-04-19 08:58

    No puedo descargar el source del turorial. Please ayuda
  • josedelaranda

    josedelaranda

    2007-05-01 10:12

    El link no funciona, sin embargo se pueden bajar el swf de la pagina, luego lo convierten a fla, despues crean una carpeta llamada mp3 y alli meten una cancion mp3 la pueden renombrar a 1.mp3 para que este igual al còdigo o cambian el nombre de la canción en el código. Suerte
  • shemayet

    shemayet

    2007-08-07 08:56

    Excelente!!! muy claro y práctico, me solucionó muchos problemas. Gracias!
  • shemayet

    shemayet

    2007-08-07 09:16

    Otra cosa: si se sigue el tutorial ni hace falta el fla, esta mas que claro!
  • SINOPSIS2004

    SINOPSIS2004

    2007-12-07 16:29

    Hola!
    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

    bultaco

    2008-06-04 16:07

    Muy bueno el reproductor.
    Estoy intentando hacer un botón a modo de PAUSE pero no logro hacerlo. Alguien que se anime? Un saludo
  • jumacaca

    jumacaca

    2008-10-06 14:19

    Hola soy nuevo en este foro y he descubierto este exelente script y lo estoy usando y me ha servido mucho. Mi pregunta es como hacer para que cuando llega al final del tema mp3 vuelva a reproducir nuevamente
  • perrogeek

    perrogeek

    2008-12-14 23:37

    disculpa no me funciona me marca error en el url espero una respuesta porfas o q estoy aciendo mal
  • animalit0

    animalit0

    2009-05-05 15:18

    Bueno, a mi me funciona perfectamente el Reprodcutor, pero me gustaria que me explicaran como le puedo hacer para que me lea mas de 3 canciones como esta predeterminado.

    Gracias por la ayuda que me puedan brindar, espero pronta respuesta ;)
  • sonytsukino

    sonytsukino

    2009-05-06 14:29

    hola buenas tardes estube checando el tutorial y funciona mas o menos bien me manda error me dice q la declaracion debe de ir dentro del controlador on
    _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

    gabibarnet

    2009-08-20 07:03

    Hola: renombre las canciones como 1,2 y 3 pero no me salen los nombres de las canciones ni el porcentaje de carga; cual puede ser el problema.Gracias
  • hgimagen

    hgimagen

    2010-03-09 15:13

    Disculpá no explicaste donde pongo el mp3