[Tutorial] crear reproductor mp3 basico .::Con xml y flash::.

[figu120]

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.firstChild,
data:cancion.childNodes.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

 

[eZakto]

No es ético el no citar al autor.

 

[figu120]

disculpa, no lo puse por q no estaba era buscando eso y me parecio interesante pero esta en
http://www.cristalab.com/tutoriales/25/reproductor-mp3-en-flash-con-mediaplayback-y-list

para alguan duda

 

[TonnyORG]

Siempre kon tus buenos aportes figu, esta ves me imprecionaste men, justamente nesesitaba uno para mi web y me lo publikaste
Gracias por el tuto se agradece


salu2

 

[iusinsitu]

Gracias por el tutorial, voy a ponerlo en marcha en mi sitio.

 

[INights]

Gracias amigo, en estos momentos estoy en una etapa donde el diseño grafico y de esas cosas que le dan sabor a una web es primordial :=.

Ya habia probado un tuto similiar y me quedo genial, ahora probaré con este

 

[Amadis]

Yo recomiendo el Flash MP3 Player, me parece que ya cambio de nombre, pero si ponen en Google así les saldrá de todas maneras...

 

[Aikas]

Buen aporte, es muy buen tutorial sigue asi^^

 

[figu120]

Ok muchas gracias pro sus apoyos..
peus voy aver k ams encuentro o ke mas aprendoa realizar y les enseño

un saludo...

Pdt: Si hubiera un solo hombre inmortal sería asesinado por los envidiosos.