LeoBaraldi – Ejemplos Flash, Ejemplos actionscript, Tutoriales Flash, Tutoriales actionscript, actionscript 3, curso de actionscript

Recursos y ejemplos de actionscript, Flash, AIR, Flex, CSS y HTML. Tutoriales de actionscript 2 y actionscript 3

Reproductor mp3, con lista de reprodución mas lector de id3

| 16 Comments

A pedido de un amigo (Pablo Hamada) prepare este reproductor de mp3 que en particular tiene la posibilidad de levantar una lista de reproducción de temas cargados de una carpeta automáticamente, con solo poner nuestros mp3, el flash se encarga de leerlos y presentarlos en un componente tipo list.

Otras de las particularidades que incluyes es que lee las etiquetas ID3 de nuestros mp3s, dichas etiquetas son las que traen los archivos mp3 con información de nombre del álbum, nombre del tema y muchas cosas mas.

Este ejemplo es totalmente orientado a modo de aprendizaje para que ustedes puedan aprender un poquito mas sobre la clase sound y puedan experimentar mas.

Actionscript:
  1. //esta linea lo que hace es evitar que se cachee la lista de temas
  2. #include "skipCache.as"
  3. //para uso de caracteres especiales
  4. System.useCodepage = true;
  5. //la carpeta donde estan los mp3
  6. var filesMp3:String = "http://www.leobaraldi.com.ar/imagenesgenericas/repmp3/temas/";
  7. var temaActual:Number = 0;
  8. //estructura xml
  9. miXML = new XML();
  10. //ignorar espacios en blanco
  11. miXML.ignoreWhite = true;
  12. //detector si se realizo la carga
  13. miXML.onLoad = function(ok) {
  14. //si se realiso la carga bien
  15. if (ok) {
  16. //generamos u array con los elemntos encontrados en la carpeta filesMp3
  17. misTemas_array = this.firstChild.childNodes;
  18. //recorremos nuestro array para rellenar nuestra lista de temas
  19. for (var i = 0; i var nombreFile = misTemas_array[i].attributes.name;
  20. my_list.addItem({data:nombreFile, label:nombreFile});
  21. }
  22. } else {
  23. // error
  24. }
  25. };
  26. miXML.load(filesMp3+"lista.php"+getSkipCacheString());
  27. //declaramos un objeto sonido
  28. var my_sound:Sound = new Sound();
  29. //recuperar nombre del tema para nuestra lista
  30. my_sound.onID3 = function() {
  31. //nombre de artista
  32. artistaID3 = my_sound.id3.artist;
  33. nombArtista_txt.text = artistaID3;
  34. //nombre del tema
  35. temaID3 = my_sound.id3.TIT2;
  36. nombTema_txt.text = temaID3;
  37. //nombre del album
  38. albumID3 = my_sound.id3.album;
  39. nombAlbum_txt.text = albumID3;
  40. //año
  41. anoID3 = my_sound.id3.year;
  42. ano_txt.text = anoID3;
  43. //comentarios
  44. comentID3 = my_sound.id3.COMM;
  45. //si quieren pueden incluir algunos condicionales pero no siempre
  46. //nos devuelve undefined
  47. if (comentID3 == undefined) {
  48. comentarios_txt.text = "Sin datos...";
  49. } else {
  50. comentarios_txt.text = comentID3;
  51. }
  52. };
  53. //creamos un escuchador para nuestra lista
  54. var listListener:Object = new Object();
  55. //detecta si hacemos clic sobre un tema
  56. listListener.change = function(evt_obj:Object) {
  57. //ejecuta el sonido
  58. my_sound.loadSound(filesMp3+evt_obj.target.selectedItem.data, true);
  59. //ejecuta una mascarita :P
  60. maskInfo_mc.gotoAndPlay("go");
  61. cargar();
  62. };
  63. // Añadir detector.
  64. my_list.addEventListener("change", listListener);
  65. //cargador que nos indicara el progreso de la carga del sonido
  66. function cargar() {
  67. carga_mc._visible = true;
  68. carga_mc.onEnterFrame = function() {
  69. //aqui averiguamos el peso total de nuestro sonido
  70. total = my_sound.getBytesTotal();
  71. //aqui detectamos cuanto se ha cargado de nuestro tema
  72. cargado = my_sound.getBytesLoaded();
  73. //por regla de 3 sacamos el porcentaje de carga
  74. porcentaje = Math.round((cargado*100/total));
  75. //le indicamos donde queremos que se dirija la barra
  76. this.gotoAndStop(porcentaje);
  77. //condicional que si llegamos a cargar el 100% lo siguiente:
  78. if (porcentaje == 100) {
  79. //eliminar el EnterFrame asi no nos consume memoria
  80. delete this.onEnterFrame;
  81. carga_mc._visible = false;
  82. }
  83. };
  84. }
  85. //acciones botones simples
  86. stop_btn.onRelease = function() {
  87. my_sound.stop();
  88. };
  89. play_btn.onRelease = function() {
  90. my_sound.start();
  91. };
  92. //
  93. carga_mc._visible = false;

Author: LeoBaraldi

Diseñador gráfico y programador en Web, con experiencia profesional en el rubro desde 1998. Experto en diseño de interfaces Frontend y Backend, sitios, portales y dispositivos móviles. Experto en estándares, CSS y HTML, amplios conocimientos en CEO. Desarrollador de sitios multi plataformas, HTML5, CSS3 y JQuery. Experto programador en Adobe Flex, AIR y ActionScript 3.0. Conocimientos en lenguajes como PHP, Javascript y bases de datos MySQL. Profesor de Diseño y Diseño Web en la Escuela Superior de Diseño Aguas de la Cañada, asesor y colaborador para medios gráficos, editoriales y revistas afines. Actualmente Jefe de Producción en Manifesto solutions.

16 Comments

  1. que groso vieja... ud sí q sabe. muchas gracias!!! ahorita mismo lo pruebo!

  2. enorme!!!
    habría que atacar sobre el "listener" para hacer una función que nada más publicáramos la película hiciera que sonara el primer tema???

  3. bueno, hemos avanzado algo!
    aunque me es imposible hacer que suene el primer tema al publicar, si que he conseguido que quede seleccionado mediante selectedIndex. Aún asi al hacer el getItemAt con la matriz no consigo que llege a la carpeta /temas donde van los mp3 y el php...se queda en la carpeta de raiz y me dice que no lo encuentra!

    te paso mi código a ver si te suena algo!

    [cdg]
    miXML.onLoad = function(ok) {
    //si se realiso la carga bien
    if (ok) {
    //generamos u array con los elemntos encontrados en la carpeta filesMp3
    misTemas_array = this.firstChild.childNodes;
    //recorremos nuestro array para rellenar nuestra lista de temas
    for (var i = 0; i

  4. perdón, era muy largo

    [cdg]
    miXML.onLoad = function(ok) {
    //si se realiso la carga bien
    if (ok) {
    //generamos u array con los elemntos encontrados en la carpeta filesMp3
    misTemas_array = this.firstChild.childNodes;
    //recorremos nuestro array para rellenar nuestra lista de temas
    for (var i = 0; i

  5. he creado unplay list para que escuchen la radio por internet pero solofunciona e mi pc ya que al subirlo a la pagina no funciona he visto que nesecito algo de crossdomain.xml pero no se como integrarlo al play list aver si me ayudas en este caso grascias

  6. te agradezco tu dedicación.... yo se muy poco de flash y estoy intentando realizar un reproductor de mp3. para mi mala suerte no me resultó como lo describiste... más que no me resultó no logré entender lo que estaba haciendo. claramente necesito explicación basica con manzanitas.

    gracias por tu tiempo!

  7. ¿Y si la lista de mp3 está en un banco de datos? Por ejemplo: Tengo dos cantantes y cada uno tiene tres canciones. En la carpeta están las seis pero una vez quiero escoger los temas de uno y otra de otro.
    En sql es fácil pero entre php y flash me lio.
    Saludos.

  8. hey viejo me quito el sombrero exelente trabajo justo lo q necesitaba

  9. hola amigo muy buen trabajo
    pero a la hora de subir mis musicas no puedo vizualizar los mios solo los tuyos, incluso cuando subo las musicas de ejm a mi pag y cambiando la dirección
    algo debe faltar, gracias por la ayuda!

  10. MUCHAS GRACIAS POR ESTE EJEMPLO, ESTA MUY BUENO, CHEVERE ESO DE COMPARTIR PARA QUE OTROS APRENDAN, ESTUDIARE EL CODIGO PARA APLICARLO. MUCHAS GRACIAS.

  11. ESTA COMPLETO

  12. me gustari ver un tutorial para videos, la verdad e buscado en intentado pero son confusos e incompletos.
    espero me puedas ayudar.

  13. muy bueno! es lo que necesitaba para mi sitio, muchisimas gracias!!!!

  14. Excelente aporte!!! Muchas gracias por compartir esto con la gente!!

  15. mmm todo muy lindo... pero como le das un aspecto mas agradable? porque la verdad prefiero un repro en jquery que al menos lo skineas como queres...

  16. el tutorial es para aquellos que quieran saber como leer id3, en ningún momento hace referencia a otra cosa, cada uno lo edita como quiere. Y en lo posible no preguntes idioteces antes de leer.

Deja un comentario

Required fields are marked *.

*