Acabo de publicar Regala Google Chrome por navidad |

Tutorial Flash: Reproductor mp3 desde cero

By Miguel Ángel Jiménez Achinte On 8:19

Seguramente a muchos de nosostros nos gusta poner algo de musica en el blog o no nos hemos animado buscando ese toque de personalidad que describa lo que queremos mostrar. Por eso en esta entrada quise explicar un poco el procedimiendo para hacer un reproductor mp3 en Adobe flash. Los pasos son sencillos y no se necesita ser un experto para lograrlo, asi que tu mismo podrás adaptarlo al skin, background o imagen que te llame la atención.

Lo primero será crear un nuevo documento de action script 2.0 con el tamaño y color de fondo que le queramos dar.
Antes que nada me gustaria explicar de que consta el reproductor para que entienda bien de que se trata y no te pierdas de nada:



Los cajoncitos punteados que se ven son textos dinamicos, es decir que es un texto donde se mostrará información correspondiente a cada archivo mp3 como el nombre, el tiempo que lleva en reproduccion, el porcentaje de carga (es necesario si lo estamos usando en una pagina web) y el control de volumen.
Tambien cuenta con 6 botones, que podemos decorar como queramos, con las funciones de reproducir, detener, avanzar a la siguiente canción o retroceder y por ultimo aumentar o disminuir el volumen.

Pasos:

1- Nombrar a la primera capa de la linea de tiempo como 'entrono'. Es ahi donde estarán los elementos anteriormente nombrados.

2- Usando la herramienta de texto, cramos un cuadrito (el tamaño determina el espacio donde se mostrará el nombre de la canción), lo seleccionamos y en el panel de propiedades lo definimos como texto dinamico y le ponemos 'ide_txt' como nombre de instancia:



3- Repetimos el paso anterior para los otros datos dinamicos, solo cambia el nombre de instancia:

- Texto para el tiempo de reproducción
Nombre de instancia: time_txt

- Porcentaje de carga
Nombre de instancia: porcentaje_txt

- Control de volumen
Nombre de instancia: vol_txt

4- Teniendo los campos de texto hechos debemos continuar con los botones; Para crear uno llevamos el puntero del mouse al menú Insertar > Nuevo simbolo y en la ventanita que aparece le ponemos un nombre y escogemos la opcion botón.




Al presionar click en aceptar el programa nos situa en un gran espacio en blanco, ahi debemos dibujar lo que se verá en el botón. Tratandose de un botón simple, lo unico que vamos a dibujar será un rectangulo y sobre el el nombre del botón.




Cuando estemos comodos con el resultado regresamos a la escena principal presionando click sobre 'Escena 1', luego abrimos el panel 'Biblioteca'(Ventana > Biblioteca o presiona Ctrl+L) e insertamos el botón que acabamos de crear (Llevandolo desde el panel hasta la escena con click presionado).



5- Con las instrucciones del paso número 4 creamos los 6 botones (play, stop, siguiente, previo, vol + y vol -) y a cada uno se le dota de un nombre de instancia:

- Botón 'play'
Nombre de instancia: play_btn

- Botón 'stop'
Nombre de instancia: stop_btn

- Botón 'siguiente'
Nombre de instancia: sigu_btn

- Botón 'previo'
Nombre de instancia: prev_btn

- Botón 'volumen +'
Nombre de instancia: volMas_btn

- Botón 'volumen -'
Nombre de instancia: volMenos_btn

6- El entorno del reproductor está listo pero aún no funciona por que debemos agregar las acciones al reproductor, asi que creamos una nueva capa llamada codigo.
Presionamos click en el primer fotograma de la linea de tiempo y abrimos el panel Acciones (F9).

Debemos pegar el siguiente codigo en ese panel:[+/-]

//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" text =" (">=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
}
/*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;">=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;" text = "volumen a " style="color: rgb(153, 204, 0);">//Fin del reproductor






Cuando lo hayas hecho publica el documento y crea una carpeta (en el mismo directorio que el archivo swf) con nombre mp3 y dentro de ella poner las canciones que deseas escuchar. El nombre de cada una de ellas deberá ser un número empezando desde el 1 y el número de archivos debes configurarlo en el anterior codigo buscando estas lineas y cambiando el 3 por el que necesites:

var mp3s:Number = 3;
//Maximo de mp3 a reproducir

//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;

//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) {

Observación

Seguramente despues de haberlo hecho y probado en tu computador te gustaria subirlo a algun hosting y ponerlo en tu pagina web, para hacerlo te recomiendo cambiar un poco el codigo en la parte que llama la canción; la modificación consiste en que no sea necesaria la carpeta 'mp3' sino que el reproductor busque los archivos mp3 en su mismo directorio.

Codigo [+/-]
//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(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(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" text =" (">=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(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(i+".mp3", true);
//carga un mp3 con el valor de i
miMp3.setVolume(v);
//asigna el volumen global al archivo
}
/*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;">=3) {
i = 1;
miMp3.loadSound(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;" text = "volumen a " style="color: rgb(153, 204, 0);">//Fin del reproductor



Enlaces de interés

Insertar flash en blogger
Hosting para tus archivos
Sites google

Y aqui mi sencillo reproductor personalizado




(Ejemplo con musica) Sites google

(Ejemplo con musica) FileDEN

Animate y muestrame tu resultado :)

Via VideoTutoriales.us





21 comentarios

  1. :$ if (seconds<10) seconds = "0" text =" (">=10) {
    time_txt.text = (minutes+":"+seconds);
    }
    };

    no se q hacer. Ayuda por favor

    Posted on 8/19/2009 10:01 a. m.

     
  2. Hola, no entiendo tu pregunta (si es que lo es) ¿que deseas cambiar en esa parte del codigo? o ¿que resultados esperas?

    Posted on 8/19/2009 7:18 p. m.

     
  3. como podria usar este mp3, para que aparte de cargar los temas de mi lista, que al apretar un boton, me cargue otro tema en mp3 que no este incluido en la lista???

    Posted on 9/23/2009 5:13 p. m.

     
  4. Exactamente a que lista te refieres, los archivos deben estar dentro de un directorio no escritos en una lista. Aunque recuerda que este reproductor es muy sencillo, seguramente podrás encontrar uno que encaje con tus necesidades.

    Posted on 9/23/2009 6:17 p. m.

     
  5. buenas, te comento que logre hacer lo que queria.

    lo hice de la siguiente forma:

    on (release) {
    _root.miMp3.loadSound("mp3/t1.mp3", true);
    }
    esto me sirve, para cargar un tema diferente a los que tiene el reproductor.

    Posted on 9/24/2009 12:58 a. m.

     
  6. te pido, por favor, si puedes ver este link para recomendarme alguna solucion a mi otro problema:

    http://foros.cristalab.com/id3-de-temas-en-mp3-con-as2-en-mp3-player-t79065/

    Posted on 9/24/2009 1:01 a. m.

     
  7. Hola! Utilicé otro reproductor template con un código diferente y funciona de maravillas "offline", en la versión .swf, para 5 temas mp3 que tengo apartados en una carpeta independiente (integré el reproductor a otra página en flash). La versión .fla y .html también funcionan ok. Pero cuando subo todo a internet el resultado es espantoso... es como que se enloquece, ¿qué puedo estar haciendo mal? Gracias! german.seller@gmail.com

    Posted on 12/14/2009 8:47 p. m.

     
  8. Tienes un ejemplo online? algo que pueda mirar, porque supongo que el archivo de flash en si no tiene nada que ver. y a que te refieres con que enloquece?

    Posted on 12/14/2009 9:49 p. m.

     
  9. Hola!
    Acá tenés un ejemplo http://abracadabra.site90.com/
    Los mismos archivos alojados localmente en mi pc funcionan bien!
    Respecto a lo que te dice anónimo en el comentario 1, a mí también me pasó lo mismo, son los errores de código que detecta el AdobeFlash, y entiendo que te consulta cómo resolverlos.
    Gracias!

    Posted on 12/16/2009 8:55 p. m.

     
  10. Hola, la verdad es que si funciona bien en tu equipo no se que pueda estar pasando; pero si quiero recomendarte las canciones porque acabo de bajar algunas y el reproductor de windows media no me los pudo reproducir. Tal vez has usado algún metodo de compresion que haya dañado los archivos.

    Posted on 12/18/2009 5:45 p. m.

     
  11. Y si los mismos archivos están bien localmente... se pueden haber dañado en el proceso de subirlos, de forma de que sólo online estén mal? Puede ser que el hosting sea extremadamente lento o algo de eso? Gracias!

    Posted on 12/20/2009 4:40 p. m.

     
  12. Siendo un hosting gratuito (no dedicado a almacenar archivos de musica) es muy posible que no se acepten archivos mp3 o que no funcionen como deberían.

    Si tienes como, te recomiendo probarlo en el hosting de algún amigo, o en uno propio que no sea gratuito.

    Posted on 12/20/2009 6:07 p. m.

     
  13. A mi también me falla este trozo:
    if (seconds<10) seconds = "0" text =" (">=10) {
    time_txt.text = (minutes+":"+seconds);
    }
    };
    No entiendo bien el condicional. Utilizo adobe flash cs4
    Un saludo

    Posted on 3/25/2011 7:21 a. m.

     
  14. Había mas errores de compilación, ya los he resuelto y el código sería así. Un saludo, Shandra:

    //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"; text =" (";}
    else if (seconds>=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
    }
    /*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;}
    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; text = "volumen a "; style="color: rgb(153, 204, 0);";}//Fin del reproductor

    Posted on 3/25/2011 7:35 a. m.

     
  15. Vaya por Dios, esto si que excede mis capacidad de usuario avanzado. Hace falta tener mucho conocimiento ya. De todas formas como guia avanzada esta bien estructurada y presentada comocasi todo el contenido de esta web. Felicitaciones y gracias

    Posted on 4/30/2011 12:07 p. m.

     
  16. Intentalo y descubriras que no es avanzado, solo parece serlo ;)

    Posted on 4/30/2011 8:58 p. m.

     
  17. HOLA; COMO HAGO PARA QUE REPRODUSCA UNAS 100 CANCIONES, YA INTENTE CAMBIANDO EL TRES POR EL NUMERO 100 PERO NO CAMBIA ALGO SIQUIERA,

    Posted on 9/15/2014 1:00 p. m.

     

Publicar un comentario en la entrada al viejo estilo