Lista de reproducción de MP3s

Vamos a ver, paso a paso, cómo crear un reproductor de mp3s, similar a éste con el programa Flash.

01.- Creamos en nuestro servidor una carpeta para colocar los archivos. Con el nombre que queramos. En mi caso, la he llamado lista_mp3_flash.

02.- Creamos dentro de esa carpeta, una subcarpeta con el nombre mp3.

03.- Alojamos dentro de esa subcarpeta todos los archivos mp3 que queramos que se oigan en nuestro reproductor. En mi caso, he colocado cinco romances.

04.- Abrimos nuestro Flash Professional, en mi caso Adobe Flash Professional CS4 y creamos un nuevo documento compatible con AS2 (Action Script 2).

05.- Arrastramos al escenario un componente MediaPlayback y le ponemos como nombre de la instancia reproductor.

Y, teniendo seleccionado el componente, configuramos sus parámetros (Ventana > Inspector de componentes) según la imagen:

06.- Arrastramos un componente de tipo lista ( User Interface > List). Lo colocamos encima del reproductor y le ponemos como nombre de instancia temas_list.

07.- Arrastramos dos componentes de tipo etiqueta (User Interface > Label) y les ponemos como nombre de instancia total_lb (pondrá dinámicamente el número de temas musicales) y titulo_lb (pondrá dinámicamente el nombre del tema, el autor...). Los colocamos en el sitio que deseemos.

08.- En el fotograma primero de la línea de tiempo, escribimos este código:

stop();

System.useCodepage = true;

XML.prototype.ignoreWhite = true;

_global.style.setStyle("fontSize",10);

temas_list.vScrollPolicy = "off";

var array_temp:Array = new Array();

var lista_xml:XML = new XML();

lista_xml.onLoad = cargarLista;

function cargarLista():Void {

array_temp = this.firstChild.childNodes;

if (!isNaN(array_temp.length)) {

total_lb.text = array_temp.length+" temas";

for (var k:Number = 0; array_temp[k]; k++) {

temas_list.addItem(array_temp[k].attributes.tema);

}

cargarMP3(0);

}

}

function cargarMP3(indice:Number):Void {

_root.tema_actual = indice;

titulo_lb.text = array_temp[indice].attributes.title;

reproductor.setMedia("mp3/"+array_temp[indice].attributes.tema,"MP3");

reproductor.play(0);

}

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);

};

reproductor.addEventListener("complete",listenerObject);

lista_xml.load("lista.xml");

09.- Seleccionamos el componente lista (el temas_list) y le colocamos este código:

on (change) {

_root.cargarMP3(this.selectedIndex);

}

10.- Hacemos los ajustes de tamaño correspondientes entre el escenario y el componente.

Yo también he creado un botón para impedir la reproducción automática. La forma de hacer esto ya se ha explicado en este blog...

Guardamos y exportamos como película swf. Le ponemos como nombre, por ejemplo, reproductor.swf.

11.- Por otro lado, tenemos que crear un documento xml con la lista de reproducción y los parámetros de tema y title que queremos que se muestren.

En mi caso, éste es el contenido del documento xml que hay que guardar con el nombre lista.xml

12.- Subimos a nuestra carpeta del servidor, a la lista_mp3_flash, el reproductor.swf y la lista.xml.

13.- Publicamos en nuestro blog por medio de un iframe.
Averiguamos primero la URL del archivo reproductor.swf e insertamos el iframe:

<iframe src="http://_loquesea_reproductor.swf" width="300" height="250" frameborder="0"></iframe>

Este artículo se lo debo a tutoriales-flash.com donde podrás encontrar muchos otros tutoriales.