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.

16 diciembre 2008

Reproductor de audio de Jeroen Wijering personalizado




Seguramente muchos de los lectores de este blog conozcan mi Antología Poética Multimedia.
Allí tengo un reproductor múltiple de mp3s obra de Jeroen Wijering.
En un momento determinado, Jeroen puso a disposición de todos los internautas el archivo editable, el .fla
Esto permite hacer personalizaciones a dicho reproductor.
Entre otras, introducir una imagen.
En este ejemplo, he colocado una imagen de Federico García Lorca en concordancia con las poesías musicadas que se han elegido.
La imagen (340 x 200) se importa a la biblioteca.
Después la arrastramos al escenario para convertirla en símbolo gráfico.
Una vez como símbolo la colocamos en la capa que nos vaya bien y reducimos su visibilidad, el alfa, hasta un límite que nos guste.

Gracias a César Poyatos.
Descargar archivos comprimido con el .fla editable (para Windows y MAC).