En este tip vamos a ver cómo hacer un reproductor de mp3 bastante completo para poder utilizarlo en nuestra página web, cd interactivo, etc...
El reproductor funciona con una lista de canciones XML, muestra información sobre el artista y la canción, y además de los botones típicos (pausa, adelantar, retroceder, detener, reproducir) tiene una línea de tiempo, en la que se puede hacer click y reproducir desde ese punto.
Parte 1
http://www.youtube.com/watch?v=9V9SL1aD-gI
Parte 2
http://www.youtube.com/watch?v=6J2aZwpCl30
Parte 3
http://www.youtube.com/watch?v=pFN_v1rjBzA
Descargar archivos del tip
De todas formas, es estupendo como base para un proyecto AS2
<p>En <a href="http://uruguaypais.com/musica/player.html" target="_blank">esta</a></p> pagina hay uno que hice hace mucho tiempo como prueba...en fin ,creo que esto no es un tip ...solo hay que buscar en archivos y ver que esto ya existe....
Por Sam el 09 de Abril de 2010
tengo un conflicto con la primera parte
si coloco true, funcionan los botones y parte el sonido de inmediato...
si coloco false, no anda nada, no hay sonido ni funcionan los botones
Uso Flash CS4
alguna solucion??
Por Oriol el 09 de Abril de 2010
Seguí paso por paso...
he estado 2 horas siguiendo tus tutoriales...
y nada, alguna coma o algo me debe fallar, porque ni puedo hacer click en la barra para que adelante ni puedo avanzar/retroceder las canciones...
Sería mucho pedir que copies y pegues en un archivo para nosotros las acciones del fotograma? Como he puesto los MISMOS nombres a cada instancia y objeto que tú, se me deberían corregir los errores que haya cometido! Espero ansioso la respuesta, espero que estas horas no hayan sido para nada!
(Ví que supuestamente subiste los archivos del tip, pero el fla. que debería contener toda la información no funciona)
Por zinux el 09 de Abril de 2010
pero al colocarle true le estas autorizando para que pueda zonar la musica.
Sonido.loadSound(ruta_musica, true);
(TOCAR MUSICA)
Sonido.loadSound(ruta_musica, false);
(NO TOCAR MUSICA)
Por zinux el 09 de Abril de 2010
Por Sam el 09 de Abril de 2010
parte de un principio sonando y es MUY MOLESTO, si no le coloco play, sonará eternamente...
he seguido paso a paso esto y nada, sigue sonando fatal...
solucion please!
Por Lucas Moyano el 09 de Abril de 2010
Por oriol el 09 de Abril de 2010
Hice un apaño y de momento lo estoy utilizando como un reproductor de una sola canción, play pause y stop, jajaja.
Pero si cuando puedas publicas el códico será genial!
MUY buen tutorial, he aprendido mucho!
Por Sam el 09 de Abril de 2010
listo, solucionado, estaba malo mi Flash CS4
y lo actualizé y anda todo muy bien...
AHORA!
como le hago para que pase a la siguiente cancion sin necesidad de apretar el boton "siguiente"
y como le hago para hacer lo del volumen??
ESOOO
Gracias
mp3.setVolume(50); // volumen es 50%
puedes hacer un botón de aumentar volumen y otro de reducir, y que lo vaya aumentando. O puedes hacer un boton de StartDrag y según su posición regular el volumen.
Agregando la siguiente funcion se ejecuta cuando el sonido se complete:
mp3.onSoundComplete = function() {
Por Oriol el 10 de Abril de 2010
Código :
var pos:Number = 0; var posFinal:Number = 0; var indice:Number = 0; var mp3:Sound = new Sound(); var xml:XML = new XML(); xml.ignoreWhite = true; xml.load("lista.xml"); xml.onLoad = function(exito) { if (exito) { mp3.loadSound("musica/"+xml.firstChild.childNodes[0].attributes.dir, true); } else { trace("Error"); } } //mp3.loadSound("musica/Paparazzi.mp3", true); btnAtras.onRelease = function() { indice--; if (indice < 0) indice = xml.firstChild.childNodes.length-1; mp3.loadSound("musica/"+xml.firstChild.childNodes[indice].attributes.dir, true); } btnPausar.onRelease = function() { pos = mp3.position; mp3.stop(); } btnPlay.onRelease = function() { mp3.start(pos/1000); } btnDetener.onRelease = function() { mp3.stop(); pos = 0; } btnAdelante.onRelease = function() { indice++; if (indice >= xml.firstChild.childNodes.length) indice = 0; mp3.loadSound("musica/"+xml.firstChild.childNodes[indice].attributes.dir, true); } barra.rep.stop(); barra.zona.stop(); onEnterFrame = function() { posFinal = Math.round(mp3.getBytesLoaded()*100/mp3.getBytesTotal()); barra.zona.gotoAndStop(posFinal); var posFinal2:Number = Math.round(mp3.position*posFinal/mp3.duration); barra.rep.gotoAndStop(posFinal2); autor.text = mp3.id3.artist+" - "+mp3.id3.songname; } barra.onRelease = function() { if (barra._xmouse/2 < posFinal) mp3.start(barra._xmouse/2*mp3.duration/posFinal/1000); } /*var mp3:Sound = new Sound(); mp3.loadSound("musica.mp3", false); mp3.stop(); // detener mp3.start(5); // comienza en el segundo 5 mp3.position; // posición en milisegs mp3.duration; // duración total mp3.id3.artist // artista mp3.id3.songname; // cancion*/Por ORIOL el 15 de Abril de 2010
¡¡¡MUCHAS GRÁCIAS!!!
Por Alejandro Cervantes el 30 de Abril de 2010
Por lucianoak el 07 de Mayo de 2010
Tengo un problemita con la barra, me hace cualquiera, no respeta la ubicación del click... alguna ayuda?
creo que tiene el problema de que si adelantas de canción, la barra no vuelve al primer lugar. Abría que agregar que cambie la posición, ante cualquier cambio de canción.
Por Jose Garces el 14 de Mayo de 2010
Por gabyludu el 27 de Mayo de 2010
simil a http://www.bajamusica.com/Discos/CHARLY-GARCIA-423195-El-Concierto-Subacuatico?utm_source=promo_charly+garcia&utm_medium=newsletter_10musica&utm_campaign=news_charly+promo#
colocar una lista de temas en el html con un boton por cada una, y que me reproduzca sin que se solape el audio el mp3 en buena calidad de sonido. Saben donde puedo encontrar alguna explicación sobre como realizarlo?
Muchas Gracias
Por principe_antes el 26 de Junio de 2010
Por ouuuu el 26 de Junio de 2010
Muchas gracias!!
Super bien explicado y funciona a las mil maravillas!!!
saludos!!
Por apolo el 14 de Octubre de 2010
primero quiro felicitarte muy buen post
por segundo lugar te tenia una consulta necesito que se vea la lista de reproduccion como puedo hacer no le allo y ya casi me quedo calvo de tanto que me jalo el cabello jajajaja gracias
Por 813 el 30 de Noviembre de 2010
Tengo un problema, lo hago y funciona con el material en mi compu, pero cuando subo al servidor no carga el audio y la barra se completó en un instante. Pero no se escucha nada
que dirección reviso?
Lo que hice es poner en el cógido el nombre del archivo mp3 entre comillas "archivo.mp3" y después subí ese archivo al servidor.
Tengo que hacer algo más?
Gracias
Te hago una pregunta, puedo tener dos de estos reproductores en un mismo frame?
Porque uno solo me funciona perfecto, pero despues dupliqué todo, repitiendo el código pero cambiando los botones, nombres de variables y el archivo mp3, y no funciona.
Sabes que puede estar pasando?
GRACIAS
Por cayetano lara el 22 de Febrero de 2011
gente como tu es la que hace falta en este planeta,
y en los otros.
un abrazo.
Por stefani el 23 de Febrero de 2011
Por stefani moyano el 23 de Febrero de 2011
Por MACniac77 el 04 de Marzo de 2011
Lo que no entiendo es porque me puede estar dando el fallo. Baje tu codigo despues y lo veo igual. Podes ayudarme? Gracias.
Por track el 21 de Marzo de 2011
lo hice y me funciono a la perfeccion, de primera tube algunos problemillas pero ahora todo bien! gracias
ahora como puedo por ejemplo exportar el reproductor a otro flv???
intento copiarlo a el de mi web pero no me copia algunas cosas como algunas cosillas que van dentro de los simbolos
es posible añadir este reproductor a mi diseño sin tener que hacer todo denuevo en el flv de mi web?
como ? sin q se desarme al copiar y pegar
se agradeceria una respues gracias
Por Ama el 10 de Abril de 2011
Armé este código para adaptar a mi página, pero la barra que avanza con la reproducción no se mueve del inicio...
Podrías darme una mano para ver qué estoy haciendo mal?
Gracias
var mp31:Sound = new Sound();
var apos:Number = 0;
var posfinal1: Number = 0;
mp31.loadSound ("http://www.amaliafischbein.com.ar/audio/tokyo.mp3", true);
mp31.stop();
btn2Pausa.onRelease = function ()
{
apos = mp31.position;
mp31.stop ();
}
btn2Play.onRelease = function ()
{
mp31.start(apos/1000);
}
btn2Stop.onRelease = function ()
{
mp31.stop ();
apos = 0;
}
barra1.rep1.stop();
barra1.zona1.stop();
onEnterFrame = function ()
{
var posfinal1:Number = Math.round(mp31.getBytesLoaded()*100/mp31.getBytesTotal());
this.barra1.zona1.gotoAndStop (posfinal1);
var posfinal12:Number = Math.round(mp31.position*posfinal1/mp31.duration);
this.barra1.rep1.gotoAndStop(posfinal12);
}
barra1.onRelease = function ()
{
if (barra1._xmouse/2 < posfinal1)
mp31.start(barra1._xmouse/2*mp31.duration/posfinal1/1000);
}
Por Amalia el 11 de Abril de 2011
Aún no puedo hacer andar la función de ir con click a ese punto de la canción.
Y otro problema que tengo es que no puedo poner más de uno de estos reproductores en un frame, cuando pongo más de uno deja de funcionar la barra de alguno.
Alguien sabe como puedo resolverlo?
Gracias
Por Ama el 11 de Abril de 2011
Tenía que poner todo en el mismo onEnterFrame!!!
GRACIAS
Por Farra el 12 de Abril de 2011
alguna ayudita si quieren algo pidanlo!
Por mich el 28 de Abril de 2011
Por lfpr91 el 04 de Mayo de 2011
Por yaki el 06 de Junio de 2011
Que funcion tendria que agregar y en que parte del codigo???
espero respuesta urgente!!!
Código :
mp3.onSoundComplete=function() { indice++; if (indice >= xml.firstChild.childNodes.length) indice = 0; mp3.loadSound("musica/"+xml.firstChild.childNodes[indice].attributes.dir, true); }con eso al terminar de reproducir, hace lo mismo que hace con el bton adelante (busca la siguiente cancion) pruebenlo con la simulacion de descarga y creo que va al pelo.
<b>lfpr91</b> calculo que si al evento OnSoundComplete le pones mp3.Start va avolvar a empezar cada vez que termine
saludos
Por Javier Vargas el 20 de Junio de 2011
Queria preguntar solo un par de cositas. ¿como se podría crear un tracklist?
y la segunda, respecto a lo que preguntaron mas arriba, sobre la barra de desplazamiento, ¿como seria el código para decirle que ante cualquier cambio retornara a cero?
Muchas gracias.
Por Javier Vargas el 22 de Junio de 2011
Ahora solo tengo un inconveniente, y es que estoy haciendo un portafolio para un grupo musical, entonces tengo todo el proyecto por fotogramas (no por escenas) entonces cuando uno da click en música, comienza a reproducirse la canción, pero si quiero volver por ejemplo a inicio la canción sigue sonando. ¿No existirá una manera para que cuando cambie así, deje de sonar la canción?
Por yaki el 28 de Junio de 2011
Por Salamanca el 29 de Junio de 2011
Por Kokran el 03 de Octubre de 2011
¿Cómo puedo hacer para que no se reproduzca automáticamente? Me gustaría que hubiese que dar al play para que empezara a reproducir.
Tengo los archivos de audio subidos a fileden. Uno de ellos me identifica artista y canción en el otro no. ¿Alguien sabe el motivo de ésto?
Gracias
Por Luis el 04 de Octubre de 2011
Gracias
Por JMRuiz el 17 de Enero de 2012
He realizado un reproductor en flash AS2 que carga los temas de una lista XML, pero no consigo que se reproduzcan las canciones de forma seguida. Cuando acaba la primera, no continúa la segunda, que es lo que desearía. ¿Qúe código debería añadir?
Les pego el código que he usado.
Muchas gracias por su ayuda.
import mx.controls.List;
import mx.controls.MediaPlayback;
//Cargamos el XML
canciones = new XML();
canciones.ignoreWhite = true;
canciones.onLoad = function(success) {
if (success) {
//Shortcuts
cancion = canciones.firstChild;
num_total = canciones.firstChild.childNodes.length;
//Creamos y llenamos la lista
crearLista();
//Creamos el reproductor
crearPlayer();
} else {
trace("No se pudo cargar la lista de canciones");
}
};
canciones.load("lista.xml");
///////////////////////////////////////////////////////////////////
/////////////////////////// LISTENERS ///////////////////////////
///////////////////////////////////////////////////////////////////
lista.addEventListener("change", alCambiar);
///////////////////////////////////////////////////////////////////
/////////////////////////// FUNCIONES ///////////////////////////
///////////////////////////////////////////////////////////////////
function crearLista() {
//Posicionamos la lista de las canciones
lista.setSize(180, 80);
lista._x = 640;
lista._y = 463;
//Llenamos la lista con las canciones
misDatos = new Array();
lista.dataProvider = misDatos;
for (var i = 0; i<num_total; i++) {
misDatos.addItem({label:cancion.childNodes[i].firstChild,
data:cancion.childNodes[i].firstChild});
}
}
function crearPlayer() {
//Posicionamos el reproductor
player.setSize(240, 80);
player._x = 400;
player._y = 463;
//Propiedades del reproductor
player.controllerPolicy = "on";
player.mediaType = "MP3";
}
//Cuando cambiamos la canción seleccionada en la lista... cargamos la nueva canción, y ejecutamos
function alCambiar(evento) {
if (evento.type == "change") {
player.setMedia("musica/"+lista.selectedItem.data, "MP3");
player.play();
}
}
Por JMRuiz el 18 de Enero de 2012
¿Podrías aconsejarme otro foro donde me puedan ayudar?
¿Podría otra persona echarme un cable?
Por eruviel el 22 de Mayo de 2012
gracias