Comunidad de diseño web y desarrollo en internet online

Reproductor mp3 en Flash con MediaPlayBack y List

Después de ver algunos componentes y trabajar con ellos, se me ha quitado el miedo y me han dado ganas de probar cosas con estos, y aprovechando que tenia que hacer un menu con musica en mi trabajo, pues he montado con un componente List y otro MediaPlayback, un sencillo reproductor MP3.

Se recomienda que antes de leer este tutorial hayas leido el Tutorial de XML, o sepas como funciona XML en Flash, asi como el Tutorial del Componente List.

Para hacer este reproductor usaremos un archivo XML (Asi es mas practico) donde colocaremos nuestra lista de canciones que abrira nuestro reproductor; lo llamaremos, como no, Lista.xml y le pondremos el siguiente contenido; en este caso usare dos canciones, pero puedes usar cuantas quieras y funcionara igual; la idea es que cada entrada sea el nombre de un archivo mp3 que este en la misma carpeta que el SWF y HTML del reproductor.

<lista>
<cancion>KillBill_IronSide.mp3</cancion>
<cancion>ReadOrDie.mp3</cancion>
</lista>

Ahora vamos a añadir a vuestra escena el componente List y llamarlo 'lista', y el componente MediaPlayback y llamarlo 'player'. Luego en el fotograma 1, añadís el siguiente código:

import mx.controls.List;
import mx.controls.MediaPlayback;
//Cargamos el XML
canciones = new XML();
canciones.ignoreWhite = true;
canciones.onLoad = function(success) {
if (success) {
//Shortcuts
cancion = canciones.firstChild;
num_total = canciones.firstChild.childNodes.length;
//Creamos y llenamos la lista
crearLista();
//Creamos el reproductor
crearPlayer();
} else {
trace("No se pudo cargar la lista de canciones");
}
};
canciones.load("lista.xml");
///////////////////////////////////////////////////////////////////
/////////////////////////// LISTENERS ///////////////////////////
///////////////////////////////////////////////////////////////////

lista.addEventListener("change", alCambiar);
///////////////////////////////////////////////////////////////////
/////////////////////////// FUNCIONES ///////////////////////////
///////////////////////////////////////////////////////////////////

function crearLista() {
//Posicionamos la lista de las canciones
lista.setSize(180, 200);
lista._x = 220;
lista._y = 0;
//Llenamos la lista con las canciones
misDatos = new Array();
lista.dataProvider = misDatos;
for (var i = 0; i<num_total; i++) {
misDatos.addItem({label:cancion.childNodes[i].firstChild, data:cancion.childNodes[i].firstChild});
}
}
function crearPlayer() {
//Posicionamos el reproductor
player.setSize(200, 200);
player._x = 0;
player._y = 0;
//Propiedades del reproductor
player.controllerPolicy = "on";
player.mediaType = "MP3";
}
//Cuando cambiamos la canción seleccionada en la lista... cargamos la nueva canción, y ejecutamos
function alCambiar(evento) {
if (evento.type == "change") {
player.setMedia("musica/"+lista.selectedItem.data, "MP3");
player.play();
}
}
De esta manera has creado rapidamente un reproductor mp3, en pocos pasos, usando los componentes de Flash MX 2004; quizas lo unico complicado es entender la parte de XML; pero en realidad es muy facil despues que practicas ;)

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate