Tutorial FLASH - Crear un reproductor de MP3 en Flash.

Versión Flash: 8 y superiores   |   Compatible con ActionScript 2.0   |   Nivel: Medio   |   Hits: 349336

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.