27 diciembre 2008

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.

6 comentarios:

Anónimo dijo...

Holas io ya tengo un reproductor y tb mi lista pero no se con que cpdigo lo puedo subir a mi pagina a ver si me das un mano mi correo es g.r.robles@hotmail.com

Anónimo dijo...

Perdon por molestar, espero que lea este mensaje pronto, ya que tengo una duda.

Es que no aparece el contenido del documento de xml, entonces no se como colocarlo, ya que la estructura debe ser especial creo he intentado varias estructuras entonces agradeceria si ud. pudiera publicar la estructura o mandarmela por correo, mi mail es: obrian_hc@hotmail.com, obrian.hc@gmail.com.

Gracias:

Anónimo dijo...

asi es no se encuentra el xml, podria subirlo porfavor

Ángel Puente dijo...

Hola a las dos últimas intervenciones.
Sí.
El archivo xml sí que se encuentra.
En lugar de abrirlo directamente podemos descargarlo en el disco duro de nuestro equipo.
Nos situamos encima del enlace y hacemos clic derecho para elegir "Guardar el archivo como..." y se guarda. Luego se abre con el Bloc de notas para ver la estructura y cambiar los valores.
Está dando un error de visualización debido a los problemas con los caracteres especiales: los acentos, eñes...
Pero el xml funciona correctamente.
Y su descarga es posible tal como lo he comentado...
Espero haber ayudado.

Anónimo dijo...

disculpa tu publicacion me fue de gran ayuda pero haun no puedo hacer mi lista de reproduccion devido a que no puedo hacer el doc xml me lo podrias enviar como hacerlo y terminar la lista porfavor mi coreo es
eskheralien@hotmail.com

Anónimo dijo...

disculpa pero mi reproductor no quiero que sea de reproduccion automatica, ¿como le hago para que no sea de reproduccion automatica?, esque se reproduce automaticamente.
favor de responder al correo yo.esau@gmail.com