Creò este post para explicar como hacer un reproductor de mp3 en flash, si bien hay muchos, a veces es dificil encontral el estilo apropiado para nuestro sitio web o para la aplicacion que le queremos dar, y no hay como la satisfaccion de ser los creadores de tus diseños.
Funcionalidad del reproductor:
* Leer los ficheros mp3 alojados en nuestro servidor (por el momento)
* Mediante un archivo xlm tomar los datos necesarios para ordenar la lista de reproduccion y mostar los datos en el display del mismo.
* Controlar el volumen de los archivos
Vamos a empezar diseñando nuestro reproducto, para ello tenemos que tener en cuenta estos componetes del mismo:
* Boton de control (play, pause, vol+, vol-, etc)
* Campos de textos dinamicos, para mostrar el nombre de la cancion, el tiempo de reproduccion y la posicion en la lista
una vez hecho esto quedaria algo asi (según mi diseño):
Bien ahora queda aplicar las funciones para cada boton, para eso, vamos a aplicar un nombre a cada componentes
ahora solo queda hacer el codigo en flash, para que tome los archivos, los cargue, y que cada boton haga la funcion que necesitamos, para eso vamos al panel de acciones y escribimos el siguiente código:
El código no es complicado, solo definimos las variables para simplificar un poco el actionscript.
Una vez hecho esto tenemos que hacer el archivo tracks.xlm, de la siguiente forma:
Muestra terminada:
Funcionalidad del reproductor:
* Leer los ficheros mp3 alojados en nuestro servidor (por el momento)
* Mediante un archivo xlm tomar los datos necesarios para ordenar la lista de reproduccion y mostar los datos en el display del mismo.
* Controlar el volumen de los archivos
Vamos a empezar diseñando nuestro reproducto, para ello tenemos que tener en cuenta estos componetes del mismo:
* Boton de control (play, pause, vol+, vol-, etc)
* Campos de textos dinamicos, para mostrar el nombre de la cancion, el tiempo de reproduccion y la posicion en la lista
una vez hecho esto quedaria algo asi (según mi diseño):
Bien ahora queda aplicar las funciones para cada boton, para eso, vamos a aplicar un nombre a cada componentes
ahora solo queda hacer el codigo en flash, para que tome los archivos, los cargue, y que cada boton haga la funcion que necesitamos, para eso vamos al panel de acciones y escribimos el siguiente código:
Cita:var my_sound:Sound = new Sound();
var cancionesTracks:Array = new Array();
var cancionesFile:Array = new Array();
var cancionesTitulo:Array = new Array();
var cancionesAutor:Array = new Array();
var time:Number = 0;
var idInterval:Number;
var trackActual:Number=0;
var segundos:Number = 0;
var volumen:Number=80;
var reproduciendo:Boolean=false;
var fileTracks:String;
//seleccionamos donde esta la informacion de las canciones
fileTracks = "tracks.xml";
function reproducir(track:Number):Void{
trackTxt.text = cancionesTracks[track];
my_sound.loadSound(cancionesFile[track], true);
time = 0;
reproduciendo = true;
tiempoTxt.text = "0:00";
clearInterval(idInterval);
idInterval = setInterval(updateTime,1000);
animaInfo(cancionesAutor[track] +" - "+cancionesTitulo[track]);
}
function updateTime(){
if(reproduciendo)
time++;
var minutes:Number = Math.floor(time/60);
var seconds = Math.floor(time)%60;
if (seconds<10) {
seconds = "0"+seconds;
}
tiempoTxt.text = minutes+":"+seconds;
}
my_sound.onSoundComplete = function() {
reproduciendo = false;
if(trackActual<cancionesFile.length-1)
reproducir(++trackActual);
else{
trackActual = 0;
reproducir(trackActual);
}
}
my_sound.onLoad = function(success:Boolean):Void {
var totalSeconds:Number = this.duration/1000;
//trace(this.duration+" ms ("+Math.round(totalSeconds)+" seconds)";
var minutes:Number = Math.floor(totalSeconds/60);
var seconds = Math.floor(totalSeconds)%60;
if (seconds<10) {
seconds = "0"+seconds;
}
trace(minutes+":"+seconds);
}
playBtn.onRelease = function() {
reproduciendo = true;
my_sound.start(segundos);
}
pauseBtn.onRelease = function() {
reproduciendo = false;
segundos = my_sound.position/1000;
trace(segundos);
my_sound.stop();
}
lastBtn.onRelease = function():Void{
if(trackActual>0)
reproducir(--trackActual);
}
nextBtn.onRelease = function():Void{
if(trackActual<cancionesFile.length-1)
reproducir(++trackActual);
}
downBtn.onRelease = function():Void{
if(volumen>10)
volumen-=10;
my_sound.setVolume(volumen);
}
upBtn.onRelease = function():Void{
if(volumen<100)
volumen+=10;
my_sound.setVolume(volumen);
}
/////////////////////////
function animaInfo(info:String):Void{
var texto:String = new String(" "+info);
var letras:Number = texto.length;
var i:Number = 0;
delete this.onEnterFrame;
this.onEnterFrame = function():Void{
display.htmlText = texto.substring(i,letras);
i++;
if(i==letras)
i = 0;
}
}
/////////////////////////
var cancionesXML:XML = new XML();
cancionesXML.ignoreWhite = true;
cancionesXML.onLoad = function(success:Boolean) {
if(success){
var cancs:XMLNode = cancionesXML.firstChild;
var total:Number = cancs.childNodes.length;
for(var i:Number=0;i<total;i++){
var cancion:XMLNode = cancs.childNodes[i];
cancionesTracks.push(cancion.childNodes[0].firstChild);
cancionesAutor.push(cancion.childNodes[1].firstChild);
cancionesTitulo.push(cancion.childNodes[3].firstChild);
cancionesFile.push(cancion.childNodes[4].firstChild);
}
my_sound.setVolume(volumen);
reproducir(trackActual);
}else{
trace("Error al cargar las canciones";
}
}
//cargamos el archivo con las canciones
cancionesXML.load(fileTracks);
El código no es complicado, solo definimos las variables para simplificar un poco el actionscript.
Una vez hecho esto tenemos que hacer el archivo tracks.xlm, de la siguiente forma:
Muestra terminada: