Reproductor de MP3 con Flash
Autor & Creditos: Maverick
Construiremos un Reproductor de MP3, he visto algunos tutoriales donde se ve complicado realizarlo. Pero vamos a ver que no es asi, en 10 minutos tendremos un mp3 player muy vistozo, en el video que veremos trate de hacerlo en el menor tiempo posible.
Si ustedes desean le pueden agregar un SKIN simplemente lo diseñan en Fireworks o Photoshop y le agregan como fondo del reproductor, asi como se muestra en nuestro ejemplo.
Ya casi al final no se ve bien, pero tenemos que crear una carpeta con el nombre de mp3, dentro de ella estará nuestros archivos de mp3 y los tendremos que nombrar en forma numerica, es decir, 1.mp3, 2.mp3, 3.mp3 y así sucesivamente. Esperemos que le guste.
Ejemplo:
Clic en la Imagen para ver el Video Tutorial
Codigo ActionScript
//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
}
/*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




del.icio.us
Digg
Comentarios (122 Publicado):
me mark errores en el codigo
mail: jorge_ma99@hotmail.com
ayudame q no c q es lo q salio mal
Mi pregunta es la siguiente:
Como puedo modificarlo para poder reproducir una emisora de radio de internet como esta:
http://www.powerhitz.com/channels/stationasx/pwrpower.asx
gracias
tengo 1 problema no puedo descargar el tuto del mp3 me da 1 msj "servidor no encontrado" por fa ayudame gracias y exitos.
puedes responder a mi mail
Mi pregunta es: si o si la musica comienza cuando se abre la pagina que contiene al reproductor? ¿No se puede colocar algun tipo de acción que haga stop a la música? Gracias por tu respuesta!
//funciones para el boton siguiente
_root.sigu_btn.onPress = function() {
if (i<3) {
i = i+1;
Primero de nada, agradecer este fantástico tutorial y esta web, tan útil donde se pueden aprender muchas cosas. Gracias por vuestro buen trabajo.
A mi me ha salido el reproductor a la perfección, lo único que tuve que cambiar el nombre de las canciones a 1, 2 y 3 para que se escucharan.
En mi ordenador lo escucho muy bien, pero cuando he ido a subirlo a mi web, me he encontrado que no puedo subir a mis archivos mp3. ¿Habría alguna manera de subir los mp3 a otro hostind donde te dieran una url para cada tema y vincularlo a este reproductor?
Muchísimas gracias por la consulta.
Saludillos
eso ayudaria mucho gracias.
saludos cordiales
j_zarto, importar un fla?, quizas queres importar el reproductor a otra animacion, y lo cargas mediante loadMovie, es muy sencillo.
Gracias por todo! los tutoriales son de gran ayuda y estan buenisimos! saludos desde argentina!!!
Scene=Scene 1, Layer=codigo, Frame=1: Line 47: '{' expected
miMp3.onID3 = function():Void {
Scene=Scene 1, Layer=codigo, Frame=1: Line 49: Unexpected '}' encountered
};
Esto se deberá a que tengo el mx y no el flash 8 ?
Tambien leí un comentario de otra persona que pregunta lo mismo. Ojalá puedas ayudarme! Desde argentina! gracias!
Josh, busca en los comentarios de abajo, alguien hizo tu misma pregunta.
Johan, si no te gusta el tutorial, simplemente buscate otro, estos videos son gratis, si quieres algo personalizado, paga a un tutor por ello.
"El que da recibe el doble y mas...
el que quita le sera quitado el doble y mas."
La web la hare ahora :) es de mi banda. Bye.
La dama, se tendria que modificar por completo el script, estamos preparando una serie de videos nuevos en flash, de seguro haremos un reproductor mas avanzado.
Sant, casi nunca nos sale las cosas a la primera vez, te recomiendo que veas el video varias veces hasa que asimiles como se realiza, esto no es un tutorial escrito como para adivinar como se hara el reproductor, es solo seguir los pasos tal y como se ven en el video.
no es importante la version del programa flash, solo serciorate de que estes usando actionscript
tengo todo listo con el reproductor, solo que me sale un error q es este:
Escena=Escena 1, Capa=Capa 2, Fotograma=1: Línea 47: Se espera '{'
miMp3.onID3 = function(): void (
Escena=Escena 1, Capa=Capa 2, Fotograma=1: Línea 49: Se ha detectado un '}' inesperado
};
nose que hacer, capaz q sea la version q ocupo q es: Macromedia Flash MX
e tratado de bajar el Macromedia Flash 8 ...
pero no lo encuentro, me podrias decir donde lo puedo encontrar porfa?
no me sale en adobe.com.. y en las paginas comunes de descargas me viene con 30 dias de prueba, y eso no me sirve
te lo agradeceria mucho
gracias
chao
es posible hacerlo
GRACIAS
gracias
( No seas palta ps .. me huevie en escribir adentro de la web xD ! )
Porfavor ayudame .. !!!
http://conquistaxtrema.no-ip.info:8000
(es una redirección pa no poner la ip que no es fija)
Quiero poner ese reproductor en mi Página para que los usuarios la escuchen dentro de la página sin dar clic ni nada de eso.
aparte, si es posible, poner como siguiente (en lugar de otra canción) que toque otra estación diferente a mi radio como mmm, el radio por internet también pero de un amigo.
cualquier comentarios porfavor háganmezlo saber a mi correo (conquistaxtrema@hotmail.com)
Saludos, por cierto, estan chidas las canciones.
Joel N. Vázquez Padilla
http://conquistaxtrema.no-ip.info:8000
(es una redirección pa no poner la ip que no es fija)
cualquier comentarios porfavor háganmezlo saber a mi correo (conquistaxtrema@hotmail.com)
Mi pregunta anterior se puede completar ¿Donde puedo colocar el reproductor para que no reinicie o el script para que no pare o que si pare al cargar la siguiente htm y sea el visitante el que pulse play si quiere seguir oyendo música. Lo que sea menos complicado?.
Gracias.
Otra duda que tengo, Maverick, es si hay algun script para que mantenga la música aunque cambie de seccion y no comience al cargarse constantemente.
Gracias.
Not Found
The requested URL /vt/flash/mp3_controller.swf was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Apache/1.3.41 Server at www.ecommerceperu.com Port 80
crash, las canciones leen la info del archivo no el tipo de archivo, cuando reproduces por winamp por ejemplo no sale la cancion 1.mp3 si no la info que esa posee hace lo mismo el reproductor mp3 flash que tenemos aqui ahora
Gracias.
Una consulta, cuando cambio de canción el tiempo se detiene y continúa de donde está con la otra canción.
¿Hay manera de que el tiempo vuelva a comenzar cada vez que cambie de canción?
Saludos y nuevamente gracias y felicidades por el trabajo...
pero alguien me podria pasar algun codigo para ponerlo en mi paguina web???
help me please
Para Kelly, bueno ya estamos trabajando en un "Flash Week" es un nuevo evento para agregar nuevos video tutoriales.
El reproductor lo cree en un archivo "audios.swf" y anda perfecto.
Pero este archivo lo abro mediante la seccion"discografia" de mi página web haciendo clic en la sección audios que se encuentra alli adentro, lo abro mediante loadMovie creando un MC vacío, el problema esta en que cuando lo abro atravez de esta sección el reproductor tiene algunos errores solo me reproduce una canción, alguien sabe por qué puede ser?
nos vemos noseas culo
Para webster; tienes la carpeta creada en temporales?, yo te recomiendo que trabajes dentro de un carpeta por ejemplo; archivos/ aqui se econtrara tu archivo SWF el reproductor y dentro de esa misma carpeta creas una nueva llamada mp3 donde estaras tus archivos mp3's, asi se encuentran en una sola carpeta ambas cosas, es raro que te hayas hido hasta temporales.
Para Juan Capitolio; claro que si... solo cambia la ruta del archivo:
miMp3.loadSound("mp3/"+i+".mp3", true);
entonces sería así:
miMp3.loadSound("http://www.dominio.com/mp3/"+i+".mp3", true);
si en vez de reproducir mp3 almacenados en mi sitio quiero reproducir un direccion url se puede... esto es como para reproducir radio...
muchas gracias
latin.lover.md@hotmail.com
Error al abrir la URL 'file:///C|/Windows/Temp/mp3/1.mp3'
esa carpeta no estaaba ya la cree y aun asi no jala
PD: Ale, a la red tenes que subir los archivos con la extensión .SWF
detodas formas aca esta mi fla para que me echen una manita. gracias
http://www.4shared.com/file/65915915/8ebcd25e/MP3FLASH.html
pero no se que pasa bueno dime si estoy mal.
pdt: e intentado de muchas maneras y nada alludame
de nuevo gracias
Pude apreciar que el contador de tiempo no funciona correctamente, sobretodo cuando se pasa de tema en tema. ¿se puede solucionar?
Sdos.
Escena=Escena 1, Capa=codigo, Fotograma=1: Línea 47: Se espera '{'
miMp3.onID3 = function():Void {
Escena=Escena 1, Capa=codigo, Fotograma=1: Línea 49: Se ha detectado un '}' inesperado
};
no se por que yo solo copie y pege el codigo como lo dice el video, si puedes dime que hice mal o si es el codigo, gracias por tu atención
gracias por el tutorial, gracias a el hice este streaming.
codigo:
el codigo lo puse después del scrit del boton de "stop"
_root.pause_btn.onPress = function() {
if ((not _root.parado) and (not _root.pausado)) {
_root.paradoen = _root.miMp3.position;
_root.miMp3.stop();
_root.pausado = true;
} else if (_root.pausado) {
_root.pausado = false;
_root.miMp3.start(_root.paradoen/1000);
}
miMp3.setVolume(v);
};
//hice un boton de pausa y el mismo sirve para dar play donde se quedo la cancion visiten mi pagina y alli veran lo que hice.
gracias
alguien sabe? please dejenme saber
mil gracias
Bueno nuevamente gracias.
Hola Neysi, en el código ActionScrit solo cambia los valores, donde veas 3 por el numero de tus archivos "mp3". Busca estas lineas.
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) {
Y cambia el valor 3 por numero de archivos mp3's que quieres reproducir.
var mp3s:Number = 3;
//Maximo de mp3 a reproducir
Modificarle ese 3 por la cantidad de canciones a reproducir?
Porque de ser así hice eso y no funciona.
Aca te dejo un link donde esta publicado mi .fla
http://www.poetasdenadie.com.ar/1024x768/reproductor.fla
y el swf esta en la misma ruta pero ocn el nombre de mp3.swf
Gracias y Saludos
El script que tenemos esta desarollado solo para reproducir las canciones, de forma correlativa.
Hay alguna forma que en vez de llamarse Pista 1, se lo llame con su verdadera nombre,como el nombre del tema, ya que me parece que queda feo que diga que se esta reproduciendo Pista 1.
Y Hay alguna forma que cada vez que se termine dicha canción el tiempo se reinicie?
ESpero su respuesta
GRacias y Saludos
mira en la escena donde esta el reproductor me anda lo mas bien se ve el volumen el artista el tema el tiempo y el streming
pero en la pelicula principal me muestra el reproductor pero no andan los botones se escucha el primer tema pero no se ve ni el volumen artista el tema y en donde dice streaming complete me pone NaN%
la verdad esto me esta cansando quiero subir mi pagina de una vez pero no puedo por esa cosa ja
buee un saludos che nos vemoss
buen la verdad es q me salvaste la vida con esto jaja
soy un novato y estoy aprendiendo a usar flash.. pero la verdad q me salvaste con tus videos ja tan re buenos y muy bien explicados
buen pero como todos tengo una duda
estoy haciendo una pagina para mi banda(full flash site) en el cual hice el reproductor pero solamente me anda sii pongo probrar escena.. si pongo probar pelicula con toda la pagina no me funciona..
buee espero q me contestes asi puedo seguir haciendo la pagina
jaja
saludos che un abrazoo yy cuidese ja
Acciones del portapapeles: Línea 49: Se ha detectado un '}' inesperado
};
lo copie tal y como lo publicaste
e que tengo 4 fotogramas en la escena y puse las actions en el fotograma y en el 4 puse insertar fotograma(no clave)
y asi los botones funcionan en el uno nomas ...poniendo los actions como fotograma clave en cada uno me funciona pero cada vez q cambio de fotograma me reinicia la musica..yo quiero que la musica funcione independemente de q fotograma estemos :S
gracias saludos muy buen tutorial opr cierto
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) {
Y cambia el valor 3 por numero de archivos mp3's que quieres reproducir.
ahh me podrias explicar como hago para subir una web flash a la red...
porque ya intente de miles de maneras...:S
Plis es muy necesario
desde ya gracias
Envie sus comentarios