[Tutorial] MP3 Player version 2.0 - Foro Creativo

Ir a contenido

  • (3 Páginas)
  • +
  • 1
  • 2
  • 3
  • No puedes empezar un nuevo tema
  • No puedes responder a este tema

[Tutorial] MP3 Player version 2.0 Fusion del tuto de Sapinto y el mio; primera prueba.

#1 El usuario está offline   kitsch

  • Ni un pelo de tonto, ni de los otros
  • Icono
  • Grupo: Pro
  • Mensajes: 3688
  • Registrado: 15-julio 04
  • Location:Guadajalajara, México
  • Sexo:Masculino
  • País:Mexico
  • Navegador:FireFox
  • Camara:Canon Mark II

Escrito 24 noviembre 2006 - 08:12

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 multiples 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) ademas 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 pelicula 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 animacion 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.

4.- Creamos cuadro cuadros de texto dinamicos 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).

6.- Abrimos nuestro editor de ActionScript (F9) e insertamos el siguiente codigo:
CÓDIGO
#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)
CÓDIGO

//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 smile.gif

Este tema ha sido editado por elQuique: 02 octubre 2007 - 03:39

0


  • (3 Páginas)
  • +
  • 1
  • 2
  • 3
  • No puedes empezar un nuevo tema
  • No puedes responder a este tema

Otras respuestas a este tema

#2 El usuario está offline   nukero6

  • casi un Semi-Dios...
  • PipPipPipPip
  • Grupo: Miembros
  • Mensajes: 1416
  • Registrado: 05-noviembre 06
  • Gender:Male
  • Location:Xalapa Veracruz
  • Sexo:Masculino
  • País:Mexico
  • Navegador:FireFox

Escrito 25 noviembre 2006 - 06:06

muy buen tutorial!!! :arriba: aplausos.gif
...
0

#3 El usuario está offline   elQuique

  • Dibujante de Codigos
  • PipPipPipPipPipPip
  • Grupo: Admin Team
  • Mensajes: 21239
  • Registrado: 08-febrero 03
  • Location:Florida, Uruguay
  • Sexo:Masculino
  • País:Uruguay
  • Navegador:FireFox
  • Camara:Kodak/v1003

Escrito 25 noviembre 2006 - 05:13

Buenisimo aporte smile.gif

Esto funciona con reproduccion de MP3 en el mismo lugar del SWF o puede reproducir URLs remotas ??

Digo para hacer una lista XML con PHP y MySQL de temas preferidos elegidos por los users y el reproductor los reproduzca en Radio FC tongue.gif
0

#4 El usuario está offline   Pablix

  • FC
  • PipPip
  • Grupo: Miembros
  • Mensajes: 355
  • Registrado: 18-mayo 05
  • Location:Ituzaingo, Buenos Aires, Argentina
  • Sexo:Masculino
  • País:Argentina

Escrito 25 noviembre 2006 - 05:30

Esta muy bueno! justo estaba buscando algo asi para una web que estoy haciendo wink.gif

Gracias!
P481!X
0

#5 El usuario está offline   kitsch

  • Ni un pelo de tonto, ni de los otros
  • Icono
  • Grupo: Pro
  • Mensajes: 3688
  • Registrado: 15-julio 04
  • Location:Guadajalajara, México
  • Sexo:Masculino
  • País:Mexico
  • Navegador:FireFox
  • Camara:Canon Mark II

Escrito 25 noviembre 2006 - 05:45

Pues si se pueden usar ubicaciones remotas, ya el SWF unicamente interpreta lo que dicta la clase; seria cosa de modificar un poco el cargador; en cuanto regrese me pongo en ello, haber si Sapinto no se me adelanta smile.gif
0

#6 El usuario está offline   elQuique

  • Dibujante de Codigos
  • PipPipPipPipPipPip
  • Grupo: Admin Team
  • Mensajes: 21239
  • Registrado: 08-febrero 03
  • Location:Florida, Uruguay
  • Sexo:Masculino
  • País:Uruguay
  • Navegador:FireFox
  • Camara:Kodak/v1003

Escrito 25 noviembre 2006 - 07:34

Ok, yo codigueo lo demas tongue.gif jajaja.

Tambien pensaba que se puede hacer una lista de FMs on line y elegir cual esta sonando de tal a cual hora wink.gif segun demanda de los FC Users
0

#7 El usuario está offline   SAPINTO

  • FC
  • PipPipPip
  • Grupo: Miembros
  • Mensajes: 637
  • Registrado: 13-mayo 06
  • Location:another fucked up place
  • Sexo:Masculino
  • País:Stkitts nevis
  • Navegador:FireFox

Escrito 25 noviembre 2006 - 07:45

fantástico kitsch! casi se me salen las lágrimas...

con respecto a lo de la idea del quique, la encuentro estupenda!

nutrir este reproductor con php y msql seria un gran ejercicio, podriamos hacer un tuto para esto kitsch, delegando tareas, asi no nos sale tan pesado... te mando un mp y vemos como nos cordinamos te parece?
Imagen IPB
0

#8 El usuario está offline   elQuique

  • Dibujante de Codigos
  • PipPipPipPipPipPip
  • Grupo: Admin Team
  • Mensajes: 21239
  • Registrado: 08-febrero 03
  • Location:Florida, Uruguay
  • Sexo:Masculino
  • País:Uruguay
  • Navegador:FireFox
  • Camara:Kodak/v1003

Escrito 25 noviembre 2006 - 07:54

MP = Mucha Plata ?? que sea gratis nomas
0

#9 El usuario está offline   SAPINTO

  • FC
  • PipPipPip
  • Grupo: Miembros
  • Mensajes: 637
  • Registrado: 13-mayo 06
  • Location:another fucked up place
  • Sexo:Masculino
  • País:Stkitts nevis
  • Navegador:FireFox

Escrito 25 noviembre 2006 - 08:08

oye no se me habia ocurrido...

otra fantástica idea del jefe!
Imagen IPB
0

#10 El usuario está offline   Daxcore

  • Reciente
  • Grupo: Baneado
  • Mensajes: 1
  • Registrado: 05-junio 07
  • Sexo:Masculino
  • País:Paraguay

Escrito 05 junio 2007 - 04:14

Holas por aca! soy nuevo por aqui y en el tema desarrollado! encontre el link buscando como hacer un mini player, pense que hera facil pero no che... jeje. Yo quiero un mini player onda Ipod Shuffle, hize pero no me funciona... nose como aplicar el codigo... me ayudan? gracias!
.: Life is music... start to listen :.
http://www.daxcore.deviantart.com
0

#11 El usuario está offline   elQuique

  • Dibujante de Codigos
  • PipPipPipPipPipPip
  • Grupo: Admin Team
  • Mensajes: 21239
  • Registrado: 08-febrero 03
  • Location:Florida, Uruguay
  • Sexo:Masculino
  • País:Uruguay
  • Navegador:FireFox
  • Camara:Kodak/v1003

Escrito 06 junio 2007 - 03:55

Daxcore, bienvenido al foro.

Seria bueno hicieras tu consulta específicamente, o sea que es lo que no te funciona y cual es el código.

Si es de otro tutorial, que no sea este, es mejor que hagas un nuevo post smile.gif
0

#12 El usuario está offline   Facundo73

  • Reciente
  • Grupo: Miembros
  • Mensajes: 4
  • Registrado: 05-junio 07
  • Sexo:Masculino
  • País:Argentina

Escrito 12 junio 2007 - 02:24

Acá esta el mismo tutorial: Tutorial

y al final tiene el reproductor posteado con audio.
Imagen IPB

¿Donde almacena los mp3?

0

#13 El usuario está offline   elQuique

  • Dibujante de Codigos
  • PipPipPipPipPipPip
  • Grupo: Admin Team
  • Mensajes: 21239
  • Registrado: 08-febrero 03
  • Location:Florida, Uruguay
  • Sexo:Masculino
  • País:Uruguay
  • Navegador:FireFox
  • Camara:Kodak/v1003

Escrito 12 junio 2007 - 06:18

Están en el mismo lugar donde esta el swf, lo se como si yo hubiera subido ese tuto jaja, igualmente eso se lo puedes cambiar, mira ahi:

miMp3.loadSound("mp3/"+i+".mp3", true);

el mp3/ <<< es una carpeta dentro del lugar donde esta el SWF.
0

#14 El usuario está offline   el-dan

  • Reciente
  • Grupo: Miembros
  • Mensajes: 2
  • Registrado: 17-septiembre 07
  • Sexo:Masculino
  • País:Mexico

Escrito 17 septiembre 2007 - 02:32

Hola a todos, me gusto el tutorial me ha servido de mucho... solo una pregunta:
he querido meterle un playlist despleglable como el que vemos en este enlace
http://www.foundatio...ashcontent.html
y he tenido algunos problemas.
agrege el siguiente codigo al archivo .as para la cancion numero 1

CITA

_root.lista.b1.onPress = function() {
i = i=1;
miMp3.loadSound("mp3/"+i+".mp3", true);
miMp3.setVolume(v);
};



El boton (b1) para reproducir la cancion esta dentro de un mc llamado lista, pero al darle click no pasa nada
soy nuevo en esto de actionscript a ver si pueden ayudarme.

saludos.

Este tema ha sido editado por el-dan: 17 septiembre 2007 - 02:38

0

#15 El usuario está offline   elQuique

  • Dibujante de Codigos
  • PipPipPipPipPipPip
  • Grupo: Admin Team
  • Mensajes: 21239
  • Registrado: 08-febrero 03
  • Location:Florida, Uruguay
  • Sexo:Masculino
  • País:Uruguay
  • Navegador:FireFox
  • Camara:Kodak/v1003

Escrito 17 septiembre 2007 - 03:45

el-dan, bienvenido al foro


Para hacer lo que dices solo debes llenar una lista desplegable y utilizar el código apropiado, recuerda que en donde dices i ahí debe ir la propiedad que contiene el elemento seleccionado.
0

#16 El usuario está offline   el-dan

  • Reciente
  • Grupo: Miembros
  • Mensajes: 2
  • Registrado: 17-septiembre 07
  • Sexo:Masculino
  • País:Mexico

Escrito 17 septiembre 2007 - 05:18

CITA(elQuique @ Sep 17 2007, 02:45 AM) Ver mensaje

el-dan, bienvenido al foro
Para hacer lo que dices solo debes llenar una lista desplegable y utilizar el código apropiado, recuerda que en donde dices i ahí debe ir la propiedad que contiene el elemento seleccionado.


Hola gracias por la bienvenida... molestandote, lo que no puedo hacer es que el boton funcione, la lista esta hecha con los botones listo y toda la cosa, el problema es que no logro comunicar el AS con el boton, aun probando con el codigo para adelantar la cancion (que digamos es codigo probado) me funciona.
La unica forma de hecerlo es que el boton este en la raiz, asi me ha funcionado a la perfeccion, pero con un boton dentro del mc que haga que despliegue... no sad.gif
que puedo hacer?....
gracias por la pronta respuesta
0

#17 El usuario está offline   HeaT

  • Forero
  • Pip
  • Grupo: Miembros
  • Mensajes: 11
  • Registrado: 01-enero 07
  • Sexo:Masculino
  • País:Mexico
  • Navegador:Opera

Escrito 01 octubre 2007 - 11:49

Hola, tengo una pregunta a la mejor es algo tonto y sencillo pero le intente y le intente y no me funciono jajajajajaja

meti el codigo dentro de un mc llamado "audio" por logica tengo que modificar siertas partes en el as como por ejemplo

_root.play_btn.onPress = function() {
miMp3.start();
miMp3.setVolume(v);
};


ese es nuestro codigo original, ¿como lo debo de modificar para que funcione dentro de mi mc? lo que yo hice fue lo siguente

_root.audio.play_btn.onPress = function() {
miMp3.start();
miMp3.setVolume(v);
};

pero no me funciono sad.gif y no se ni porque

si alguien me puede ayudar con eso y los campos de texto dinamicos se los agradeceria.


0

#18 El usuario está offline   HeaT

  • Forero
  • Pip
  • Grupo: Miembros
  • Mensajes: 11
  • Registrado: 01-enero 07
  • Sexo:Masculino
  • País:Mexico
  • Navegador:Opera

Escrito 02 octubre 2007 - 02:20

CITA(el-dan @ Sep 17 2007, 01:18 PM) Ver mensaje

Hola gracias por la bienvenida... molestandote, lo que no puedo hacer es que el boton funcione, la lista esta hecha con los botones listo y toda la cosa, el problema es que no logro comunicar el AS con el boton, aun probando con el codigo para adelantar la cancion (que digamos es codigo probado) me funciona.
La unica forma de hecerlo es que el boton este en la raiz, asi me ha funcionado a la perfeccion, pero con un boton dentro del mc que haga que despliegue... no sad.gif
que puedo hacer?....
gracias por la pronta respuesta



Hola mi estimado como notaras yo también deje un post sobre meter todo el codigo dentro de un MC pues aquí tienes la respuesta, jajajajajaja no tiene mucho que lo publique a mi me funciono con los botones normales no con la lista que tu quieres crear (no lo intente) pero si el codigo como tu lo quieres dentro de un mc

Lo primero que nada debes de nombrar a tu mc de algun modo (yo lo nombre"control")

lo siguiente es modificar algo el codigo

el codigo normal viene así (en la primera parte)

CÓDIGO
//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)
};



hasta ahi todo normal lo debes de tener en raíz lo que hice fue modificar el codigo donde le digo que la función de miMP3 la debe realizar dentro del mc CONTROL entonces el codigo me queda de la siguiente manera

CÓDIGO
//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.control.miMp3 = new Sound();
//variable principal mi mp3
_root.control.miMp3.loadSound("mp3/"+i+".mp3", true);
//hacemos la carga de mp3 segun el valor de i
_root.control.miMp3.setVolume(v);
//asigna el volumen de reproduccion
_root.control.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)
};



hasta ahí todo perfecto, ahora para que los botones funcionen simplemente debes de editar lo siguiente en cada linea correspondiente en mi caso va a ser el boton de stop

el codigo normal vendria así

CÓDIGO
_root.stop_btn.onPress = function() {



el codigo como nos debe quedar es así

CÓDIGO
_root.control.stop_btn.onPress = function() {



siempre indicandole que debe de realizar esa función dentro del mc control.


Espero te sirva y me haya explicado ^^

nota: Yo use como nombre "control" tu lo puedes nombrar como gustes. Por cierto el include lo debes hacer en el MC de igual forma.

Este tema ha sido editado por HeaT: 02 octubre 2007 - 02:31

0

#19 El usuario está offline   elQuique

  • Dibujante de Codigos
  • PipPipPipPipPipPip
  • Grupo: Admin Team
  • Mensajes: 21239
  • Registrado: 08-febrero 03
  • Location:Florida, Uruguay
  • Sexo:Masculino
  • País:Uruguay
  • Navegador:FireFox
  • Camara:Kodak/v1003

Escrito 02 octubre 2007 - 02:48

HeaT, bienvenido al foro
0

#20 El usuario está offline   stomp

  • El Unico Humano Que Nacio Con Alas...
  • PipPipPipPipPipPip
  • Grupo: Miembros
  • Mensajes: 2448
  • Registrado: 13-diciembre 06
  • Location:El Cielo
  • Sexo:Masculino
  • País:Mexico
  • Navegador:Otro

Escrito 02 octubre 2007 - 02:54

creo que la page de kitsch expiro...
0

  • (3 Páginas)
  • +
  • 1
  • 2
  • 3
  • No puedes empezar un nuevo tema
  • No puedes responder a este tema


Sitios Amigos: Tutoriales gratis | Foro de Webmasters | Foros de ComunidadHosting