Skip to Content »

MP3 Player en AS2

  • 07/02/2008
  • 1:47 am
  • unijimpe

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.

Cargando Flash

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.

  1. var music:Sound = new Sound();
  2. music.loadSound("sound.mp3", true);
  3. music.start();

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.

  1. var music:Sound = new Sound();
  2. music.loadSound("sound.mp3", false);
  3. music.onLoad = function() {
  4.     // acciones para mostrar el progreso
  5. }
  6. music.onSoundComplete = function() {
  7.     // acciones para reiniciar el player
  8. }

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.

  1. var mcPath:MovieClip = this;
  2. var wTime:Number = mcTime._width;
  3.  
  4. var music:Sound = new Sound();
  5. music.loadSound("sound.mp3", false);
  6. music.onLoad = function() {
  7.     startProgress();
  8. }
  9. music.onSoundComplete = function() {
  10.     stopProgress();
  11. }
  12. function startProgress() {
  13.     mcPath.onEnterFrame = function() {
  14.         inTime.text = "TIME:"+music.position+"/"+music.duration;
  15.         mcTime._width = wTime*(music.position/music.duration);
  16.     }
  17. }
  18. function stopProgress() {
  19.     delete mcPath.onEnterFrame;
  20. }

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.

  1. var timer:Number = 0;
  2. var mcPath:MovieClip = this;
  3. var wTime:Number = mcTime._width;
  4.  
  5. var music:Sound = new Sound();
  6. music.loadSound("sound.mp3", false);
  7. music.onLoad = function() {
  8.     startProgress();
  9.     btPlay.enabled = true;
  10. }
  11. music.onSoundComplete = function() {
  12.     timer = 0;
  13.     btPlay._visible = true;
  14.     stopProgress();
  15. }
  16. function startProgress() {
  17.     delete mcPath.onEnterFrame;
  18.     mcPath.onEnterFrame = function() {
  19.         inTime.text = "TIME:"+music.position+"/"+music.duration;
  20.         mcTime._width = wTime*(music.position/music.duration);
  21.     }
  22. }
  23. function stopProgress() {
  24.     delete mcPath.onEnterFrame;
  25. }
  26. btPlay.enabled = false;
  27. btPlay.onRelease = function() {
  28.     music.start(timer/1000);
  29.     btPlay._visible = false;
  30. }
  31. btPause.onRelease = function() {
  32.     timer = music.position;
  33.     music.stop()
  34.     stopProgress();
  35.     btPlay._visible = true;
  36. }
  37. btMute.onRelease = function() {
  38.     music.setVolume(0);
  39.     btMute._visible = false;
  40. }
  41. btUnmute.onRelease = function() {
  42.     music.setVolume(100);
  43.     btMute._visible = true;
  44. }

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.

Posts Relacionados

Total de Comentarios: 17

Publicidad
Chicoblog
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!

DUQUE
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.

DUQUE
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

DUQUE
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.

Emb
16/02/2008
3:29 pm

Cuando intento abrir el fla Flash 8 me dice: “Formato de archivo inesperado”.
¿Qué podrá ser? Gracias…

unijimpe
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

lz
21/02/2008
2:57 pm

hola unijimpe
queria saber el mismo reproductor
pero con varios mp3
es lo mismo ?

Mp3 Player en AS2 | power.org.mx
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 [...]

Luis
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.

unijimpe
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.

Luis
02/03/2008
1:44 pm

Bueno, gracias por tener este espacio y por compartir tus conocimientos, saludos.

Rayes
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.

xion
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

xion
06/03/2008
4:43 pm

bueno ya lo tengo solo puse

music.start(timer/1000);

en la funcion onSoundComplete

sale gracias

carmen
24/03/2008
9:27 pm

hummm todos queremos un buscador y reproductor de mp3 tipo callevip
cuando lo vas hacer ?????
cuando

carcarglobal
31/05/2008
6:40 am

gardening are all off and began the boys knew height. he got

staywoodwhit
11/06/2008
4:41 am

still there. a pair It is were called I still a young it’s name

Enviar Comentario

(*)

(*)