Flash es una herramienta poderosa que permite acceder y controlar multitud de fuentes de datos, entre ellas acceso a sonido a través de archivos MP3, en esta ocasión veremos como implementar un reproductor de MP3 básico.
[swf]http://blog.unijimpe.net/wp-content/uploads/2008/02/mp3player.swf, 300, 100[/swf]
Reproduciendo Sonido
El primer paso es reproducir un determinado archivo de sonido, para ello utilizamos la clase Sound, la cual incluye los métodos necesarios para la reproducción de sonido. Para cargar el sonido utilizamos el método loadSound.
[as]
var music:Sound = new Sound();
music.loadSound(«sound.mp3», true);
music.start();
[/as]
Hasta este punto estamos cargando un archivo llamado sound.mp3 y lo estamos reproduciendo. Lo siguiente es detectar cuando se ha cargado el archivo y cuando se ha terminado de reproducir, esto para controlar adecuadamente el comportamiento del player.
[as]
var music:Sound = new Sound();
music.loadSound(«sound.mp3», false);
music.onLoad = function() {
// acciones para mostrar el progreso
}
music.onSoundComplete = function() {
// acciones para reiniciar el player
}
[/as]
Agregando Barras de Progreso
El siguiente paso es crear los elementos visuales que nos ayudarán a mostrar el comportamiento de nuestro player. Creamos una barra de progreso para nuestro reproductor, con un movieclip: mcTime para mostrar el progreso de la reproducción. Adicionalmente creamos un campo de texto inTime para mostrar en números el avance de la reproducción. Luego implementamos las funciones necesarias para mostrar nuestras barras de progreso.
[as]
var mcPath:MovieClip = this;
var wTime:Number = mcTime._width;
var music:Sound = new Sound();
music.loadSound(«sound.mp3», false);
music.onLoad = function() {
startProgress();
}
music.onSoundComplete = function() {
stopProgress();
}
function startProgress() {
mcPath.onEnterFrame = function() {
inTime.text = «TIME:»+music.position+»/»+music.duration;
mcTime._width = wTime*(music.position/music.duration);
}
}
function stopProgress() {
delete mcPath.onEnterFrame;
}
[/as]
Agregando controles de reproducción
El último paso para tener nuestro reproductor completo es agregarle los controles: btPlay para iniciar la reproducción, btPause para pausar la reproducción, btMute para poner el mudo el sonido y btUnmute para activar el sonido.
[as]
var timer:Number = 0;
var mcPath:MovieClip = this;
var wTime:Number = mcTime._width;
var music:Sound = new Sound();
music.loadSound(«sound.mp3», false);
music.onLoad = function() {
startProgress();
btPlay.enabled = true;
}
music.onSoundComplete = function() {
timer = 0;
btPlay._visible = true;
stopProgress();
}
function startProgress() {
delete mcPath.onEnterFrame;
mcPath.onEnterFrame = function() {
inTime.text = «TIME:»+music.position+»/»+music.duration;
mcTime._width = wTime*(music.position/music.duration);
}
}
function stopProgress() {
delete mcPath.onEnterFrame;
}
btPlay.enabled = false;
btPlay.onRelease = function() {
music.start(timer/1000);
btPlay._visible = false;
}
btPause.onRelease = function() {
timer = music.position;
music.stop()
stopProgress();
btPlay._visible = true;
}
btMute.onRelease = function() {
music.setVolume(0);
btMute._visible = false;
}
btUnmute.onRelease = function() {
music.setVolume(100);
btMute._visible = true;
}
[/as]
Como pueden observar para controlar el volumen hemos utilizado el método setVolume y para hacer la pausa hemos utilizado un artilugio ya que la clase Sound no tiene una propiedad para hacer pausar el sonido, para ello guardamos la posición en la cual se hace el llamado a detener el sonido y luego reproducimos a partir de ese punto.
Finalmente les dejo los archivos fuente de este ejemplo para que lo descarguen y modifiquen de acuerdo a sus necesidades.
Comentarios Total 31 comentarios
Publicado: 07/02/2008 2:08 pm
Impresionante!
Genial Tuto!
Muy buen blog ademas!, lo eh estado siguiendo hace un par de semanas, tal vez te abras dado, cuenta ya que estas en mi blog roll
Saludos y Muchas Gracias!
Publicado: 07/02/2008 6:52 pm
Ya que estais con el tema podiais hacer algo parecido a Dilandau.com con el tema este del mp3 player para web.
Publicado: 07/02/2008 7:02 pm
Por cierto he visto que teneis en marcha este proyecto :
http://mp3.unijimpe.net/
No es mejor que en lugar de google realice búsquedas en goear.com y last.fm y desde el cual se puedan descargar el mp3.
Un Saludo
Publicado: 13/02/2008 5:52 am
He estado investigando un poco más y viendo el archivo que teneis para realizar un buscador mp3 mediante google.
He encontrado una fórmula de búsqueda que puede ser interesante para el buscador de mp3, es la siguiente :
-inurl:(htm|html|php) intitle:»index of» +»last modified» +»parent directory» +description +size +(wma|mp3) «U2»
Con esto podemos encontrar facilmente cualquier archivo mp3 y wma que google tenga indexado, pudiendo añadir más tipos de archivo s a la búsqueda si lo deseamos.
Publicado: 16/02/2008 3:29 pm
Cuando intento abrir el fla Flash 8 me dice: «Formato de archivo inesperado».
¿Qué podrá ser? Gracias…
Publicado: 16/02/2008 11:07 pm
El archivo estaba en formato Flash CS3, ya lo he guardado en formato Flash 8 y lo he actualizado para que lo puedan utilizar.
La nueva ruta de descarga es:
http://www.box.net/shared/gxlaq6lwgc
Publicado: 21/02/2008 2:57 pm
hola unijimpe
queria saber el mismo reproductor
pero con varios mp3
es lo mismo ?
Publicado: 26/02/2008 11:22 pm
[…] bonito reproductor de mp3s es el que nos muestra unijimpe. Este reproductor tiene sus bases en flash, permitiendonos manejarla bajo un loadsound, implentando […]
Publicado: 01/03/2008 4:10 pm
Hola y seria mucho pedir que lo pusieras en flashmx profesional 2004, ami en ningun caso me abre nada y esta interesante, bueno gracias.
Publicado: 01/03/2008 4:43 pm
Hola Luis, me gustaría ayudarte pero la versión que tengo de Flash solo me permite guardar en Flash CS3 o Flash 8. A ver si alguno de nuestros visitantes lo puede guardar con compatibilidad con Flash MX 2004 para ayudarte.
Publicado: 02/03/2008 1:44 pm
Bueno, gracias por tener este espacio y por compartir tus conocimientos, saludos.
Publicado: 06/03/2008 4:57 am
Hola a todos… gracias unijimpe por dejarnos tus conocimientos y experiencia para que todos podamos aprender de ella… Te queria preguntar una sola cosa… con este reproductor es posible cargar varios mp3?… es decir hacer una pequeña lista para que los pueda ir reproducciendo el visitante uno a uno?… ahh, otra cosa mas… se puede poner a que se reproduzca automaticamente al ingresar en la pagina?… de antemano muchas gracias por tu tiempo y saludos.
Publicado: 06/03/2008 3:21 pm
como se podria hacer para que cuendo termine de reproducirse empieze otra vez en automatico (osea que sea ciclico)
saludos xion
Publicado: 06/03/2008 4:43 pm
bueno ya lo tengo solo puse
music.start(timer/1000);
en la funcion onSoundComplete
sale gracias
Publicado: 24/03/2008 9:27 pm
hummm todos queremos un buscador y reproductor de mp3 tipo callevip
cuando lo vas hacer ?????
cuando
Publicado: 31/05/2008 6:40 am
gardening are all off and began the boys knew height. he got
Publicado: 11/06/2008 4:41 am
still there. a pair It is were called I still a young it’s name
Publicado: 23/09/2008 1:11 am
no hay alguna manera de hacer q este player acepte streaming de icecast? (formato OGG)
please respondan a mi correo ! Gracias!
Publicado: 23/09/2008 1:12 am
mi email : kaposo@gmail.com
Publicado: 28/09/2008 2:44 am
muchas gracias me fue muy util, saludos
Publicado: 20/10/2008 6:07 pm
hola que tal muy interesante lo tuyo. pero nose si me sirve para mi proyecto, nesecito saver si hay alguna forma existente de reproducir mis mp3 sin tener que acudir al windows media player, mi desafio es reproducirlo o mejor dicho controlarlo con mi propio reproductor echo en flash, a su vez los archivos mp3 tendria que estar en una fuente externa. la idea es es controlar todo desde un html unico con su reproductor correspondiente sin tener que recurrir a que se habra otra ventana
Publicado: 05/11/2008 12:36 am
Muchas gracias por el tutorial, haciendo modificaciones al codigo y utilizando botones y demas artimañas (como un control de volumen)se puede lograr mucho, me ha ayudado bastante este tutorial, gracias.
Publicado: 29/01/2009 4:26 pm
Aunque necesite hacer algo más complicado, este tutorial me sirvio mucho para meterme en el tema, es interesante y util. Muchas gracias!
Publicado: 16/02/2010 6:35 pm
Que tal, mi duda es porque no carga los archivos cuando esta publicado, se tarda muchisimo peor no carga, hay algo que deba hacer, lo estoy ocupando para un disco interactivo y es lo único que no me jala, porque desde el flas si carga, gracias por la atención y esta super de onda tu blog felicidades
Publicado: 17/02/2010 4:29 pm
Hola mira una pregunta tengo un player mp3 que se supone que integre a un proyecto ya me lo dieron hecho, aunque veo que es muy muy similar a el que publicas tu por cierto una vez mas eres un chingon unijimpe. Bueno a lo que voy es que si no habra una manera por ejemplo de que jale los nombres o direcciones de los archivos mp3 desde una base de datos?? o como podria hacerlo. Yo de flash no se mucho casi nada pero me estan pidiendo que le haga esa edicion al player.
Publicado: 19/02/2010 8:11 pm
Hola unijimpe, excelente tutorial, pero tengo un pequeño problemita a la hora de utilizarlo acorde a mis necesidades.
El código que tienes funciona a partir del momento en que el sonido se ha cargado completamente, es decir cuando el sonido se ha terminado de descargar del servidor (onLoad), uno puede darle play.
Pero en mi caso necesito que mi sonido se reproduzca aún sin haber terminado de descargar desde el servidor. Hasta este punto, funciona, mi sonido se reproduce aún sin haberse descargado, pero el problema es
que la barra de progreso de la canción se queda quieta hasta que la canción se descarga (aún cuando ésta ya se está reproduciendo), luego (onLoad) si empieza a cumplir la función tal como debe ser.
Este es el código:
var music:Sound = new Sound();
var wTime:Number = this.musicDisplay.progressBar._width
var song = 0
var mc_path:MovieClip = this;
function loadMusic() {
music.loadSound(playlist[song],true);
}
function startProgress() {
delete mc_path.onEnterFrame();
mc_path.onEnterFrame = function() {
_root.ipad.lcd.musicDisplay.progress_bar._width = wTime*(music.position/music.duration);
}
}
music.onSoundComplete = function() {
song++;
loadMusic();
};
loadMusic();
//He tratado de poner el startProgress aquí pero ni si quiera se ejecuta la acción
music.onLoad = function() {
startProgress();
};
gracias
Publicado: 14/02/2011 8:07 am
Hola
Sólo agradecerte que hayas elaborado este tutorial y además hayas agregado el archivo para poder verlo ‘in situ’.
No tengo mucha idea sobre ActionScript y me ha venido bien para conocer un poco más de este mundillo. A partir de tu código he modificado algunas cosillas y añadido otras para realizar un proyecto con ámbito educativo. De momento va bien la cosa, aunque sigo mejorando cosas poco a poco.
Lo dicho, muchas gracias por todo. ;)
Publicado: 10/03/2011 9:59 pm
Me sirvio muchisimo, en verdad muchas muchas gracias, pero una pregunta, tengo un documento de flash con varias escenas, sabes como hacerle para que aunque cambie de escena el sonido no se interrumpa?
Publicado: 10/03/2011 10:25 pm
=0 Cuándo lo publico ya sea en swf o exe no carga el audio, el boton play aparece como si no se pudiera dar click, alguien sabe por qué? :S
Publicado: 02/01/2012 6:55 am
Muchas Gracias por tu Trabajo ! !
Es una excelente forma de mejorar la presentación de nuestra página Web tanto para Nosotros como para los Usuarios que visitan nuestro WebSite.
Un Saludo desde Barcelona ! !
Publicado: 31/03/2013 1:06 pm
Muy buen trabajo.
Sería posible añadirle un fade al pulsar pausa, para que el sonido no se cortase tan rápido??