Crear un reproductor de MP3 en Flash

  • Flash
Cómo crear un reproductor de mp3 en flash y asp.
En este tutorial vamos a aprender a realizar un reproductor MP3 con Flash, con su lista de reproducción. Como vamos a emplear componentes, veréis lo fácil que es la programación del ejemplo.



COMO HACERLO.

Vamos a depositar los archivos MP3 en un directorio en la raiz del servidor web llamado mp3. Si disponemos de la capacidad para ejecutar alguna tecnología de servidor como ASP o PHP, crearemos dinámicamente un archivo XML con los nombres de los archivos MP3. Si no tenemos ninguna de estas tecnologías a nuestro alcance lo mejor es crear el archivo XML manualmente y depositarlo en el servidor. En cualquier caso, el XML que suministra los datos deberá tener esta estructura.

<?xml version='1.0' ?>
<exploracion carpeta='mp3'>
<archivo nombre='2_pi_r.mp3' />
<archivo nombre='Brain_Stew.mp3' />
<archivo nombre='Carrera_Rapida.mp3' />
<archivo nombre='Feel_The_Pain.mp3' />
<archivo </exploracion>


En nuestro ejemplo empleamos ASP, para ello nos basamos en el tutorial Como leer los archivos que hay en una carpeta del servidor con ASP y pasarlo a Flash.

El archivo que usamos genera esta salida.


Ya en Flash, arrastramos cuatro componentes al stage desde el panel de componentes. Primero arrastramos un componente MediaPlayback que se va a encargar de la reproducción de los archivos MP3, le ponemos como nombre de instancia controlador. Con el componente seleccionado, pinchamos en la pestaña parámetros de la barra de propiedades para abrir el Inspector de componentes. Una vez abierto, asignamos los parámetros como se muestra en la figura.

Después posicionamos en el stage un componente del tipo lista y le ponemos como nombre de instancia temas_list.

Este componente va a contener la lista de canciones de nuestro reproductor MP3 y nos va a permitir cambiar de tema al pulsar sobre sus elementos.

Los otros dos componentes que nos quedan son dos del tipo Label, que nos van a indicar el título de la canción que se está reproduciendo y el número de temas en la lista. Sus respectivos nombres de instancia son titulo_lb y cantidad_lb.

A continuación teneís el código comentado que va en la línea de tiempo principal, que además es el único de toda la película, exceptuando unas pequeñas líneas asociadas al componente lista.

// código en línea de tiempo principal
// ajustes iniciales
System.useCodepage = true;
// evitamos problemas con los nodos en blanco
XML.prototype.ignoreWhite = true;
// defino un estilo global para los componentes
_global.style.setStyle("fontSize", 10);
// en este array almacenaré las canciones
var array_temp:Array = new Array();
// objeto XML que carga la lista de archivos
var lista_xml:XML = new XML();
lista_xml.onLoad = cargarLista;
// vuelco el contenido del XML
// en el componente lista
function cargarLista():Void {
array_temp = this.firstChild.childNodes;
if (!isNaN(array_temp.length)) {
// numero de temas
titulo_lb.text = array_temp.length+" temas";
// relleno la lista
for (var k:Number = 0; array_temp[k]; k++) {
temas_list.addItem(array_temp[k].attributes.nombre);
}
// carga la primera canción
cargarMP3(0);
}
}
// con esta función cargo el mp3 dentro del
// componente mediaplayback
function cargarMP3(indice:Number):Void {
controlador.setMedia("/mp3/"+array_temp[indice].attributes.nombre, "MP3");
controlador.play(0);
}
// rutinas para pasar a la siguiente canción
// cuando termine la actual
var listenerObject:Object = new Object();
listenerObject.complete = function(eventObj:Object) {
_root.tema_actual++;
if (_root.tema_actual>=array_temp.length) {
_root.tema_actual = 0;
}
cargarMP3(_root.tema_actual);
};
controlador.addEventListener("complete", listenerObject);
// cargo la lista de reproducción
lista_xml.load("/asp/verLista.asp");
// esta línea sería del tipo
// lista_xml.load("miLista.xml");
// si empleo un archivo de texto
// plano con formato XML


Ahora sólo queda el código asociado al componente lista.

on (change) {
_root.cargarMP3(this.selectedIndex);
}

Podéis descargaros este mismo ejemplo y ver cómo funciona: mp3player.zip, contiene todos los archivos necesarios para ejecutarlo en un servidor ASP excepto los propios MP3, que ocupan varios megas.

Autor

Tutoriales-flash.com

La web de los tutoriales flash en castellano

Compartir

Comentarios

Jhonnathan

22/6/2007
Hola muchas gracias por el artículo muy bueno

Oscar Castro

01/8/2007
hey en mi server no esta jalando, lo raro que ne mi pc si jala pero en mi server web no esta funcionnado no lee los mp3

Martin

16/12/2007
En si, creo que el reproductor funciona, soy nuevo en el mundo de la programacion en flash + xml asi que aporto lo siguiente desde el punto de vista de "usuario": No se entiende la explicacion en su totalidad.

A que me refiero con esto, pues a lo siguiente:

Segui los pasos tal indican las instrucciones, pero hay cosas que no entienco como por ejemplo, en el archivo ASP dice "sustituir "/files/" por la que os interese", donde esta ese "files" que nombren??? revice todo el asp y no lo encuentro, y si esta en ese archivo me gustaria saber donde lo remarca.

2do caso, baje el ejemplo que dejaron para descargar, e intente cargar mp3 q tengo en mi pc, resultado: errores,,

no se explica bien como cambiar el destino de la carga de los mp3, no se si eso esta hecho para cargarlos desde una url o desde la pc, no se porque el tutorial dice "XML" si la lista dice "ASP", dicen que haga un archivo "XML" pero no se con que nombre porque tampoco lo detallan, en si, hace mas de 24 Hs que estoy mirando y retocando el .fla, el .asp y el .xml pero sigo con los mismos resultados, desde ya agradesco el aporte del tutorial pero me encantaria que hagan uno para usuarios no tan experimentados, con una explicacion mas detallada, asi nosotros, los que no sabemos tanto, entendemos un poco mas.

Reitero, agradesco totalmente el aporte, es el unico lugar donde encontre tutoriales que funcionan de verdad, lastima que apunto hacia la creacion de un reproductor mp3 pero no logro encontrar el tutorial para novatos... Me quedare con las ganas, como siempre.

Atte: Martin

Patricia

08/3/2009
Queria saber en q version de Flash es posible hacer este reproductor de MP3???