Hola, primero que nada un grato saludo a toda la comunidad flashera.
Lo que presento aquí es un pequeño y sencillo tutorial de cómo realizar un reproductor de flash propio, con las siguientes características.
a) Botones de volumen ajustables
b) Botones para retroceder y avanzar
c) Barra de progreso de la canción mp3
d) Precarga de la canción mp3
c) Botón de pausa
A continuación voy a explicar el código que conforma este reproductor con la finalidad de que no quede ninguna duda con respecto a su funcionamiento, y más adelante otras personas ajenas a este trabajo lo puedan incluso mejorar, lo cual sería genial!!!
Aquí dejo el enlace
REPRODUCTOR del trabajo para que lo descarguen y sea más fácil seguir este pequeño tutorial.
Primero vamos a crear 2 arreglos que contendrán la ubicación de los mp3’s y los títulos, La variable rolas contiene todos los mp3´s a incluir y la variable titulos contiene los respectivo títulos de la canción.
Código PHP:
//Arreglo con los mp3's...
rolas = ['cancion1.mp3', 'cancion2.mp3'];
//Arreglo con los títulos de los mp3's...
titulos = ['Rock', 'Blues'];
Ahora tenemos que especificar todas las variables de configuración inicial de nuestro reproductor, como ven, tendremos que crear 2 campos dinámicos con nombres
estado y
volumen_q, aparte de crear 4 movieclips llamadas arriba, abajo, atrás, parar.
Para cualquier duda, el enlace del fla esta arribita.
Código PHP:
//Volumen Inicial...
volumen = 60;
//Desplegar el estado del mp3 en un campo dinámico...
this.estado.text = "Cargando rola...";
//Desplegar el volumen del mp3 en un campo dinámico...
this.volumen_q.text = volumen+" Vol.";
//Deshabilitar botonería...
this.arriba.useHandCursor = false;
this.abajo.useHandCursor = false;
this.atras.enabled = false;
this.parar.enabled = false;
//Variables con el número de canciones...
numeroDeCanciones = rolas.length-1;
//la canción actual...
cancionActual = 0;
Ahora vamos a crear nuestro Objeto sound, lo llamaremos canciones.
Código PHP:
canciones = new Sound();
Agregamos 2 eventos muy importantes de nuestro objeto sound, el evento onLoad que se invocará cuando el mp3 se haya descargado completamente y el evento onSoundComplete que se invocará cuando el sonido haya terminado su reproducción.
Código PHP:
//Evento que se ejecuta al terminar la carga de un mp3...
canciones.onLoad = function(si) {
if (si) {
//Borra el evento que calcula el tamaño descargado del mp3...
delete (this.onEnterFrame);
//Variable que calcula el tamaño del archivo mp3...
total = Math.round(canciones.getBytesTotal()/1024);
_root.bytes.text = total+" kb cargados";
_root.estado.text = titulos[cancionActual];
//Aplicar volumen inicial...
canciones.setVolume(volumen);
//Iniciar reproducción...
canciones.start(0, 1);
//Habilitar boton de parado...
parar.enabled = true;
//Elimina intervalo de la función que calcula la duración
//de la música...
clearInterval(segundero);
//Resetear el tiempo a 0...
tiempoT = 0;
//Empezar de nuevo el intervalo...
segundero = setInterval(empezarTiempo, 1000);
}
};
//Evento que se invoca al final de cada reproducción...
canciones.onSoundComplete = function() {
//Elimina intervalo de la función que calcula la duración
//de la música...
clearInterval(segundero);
//Resetear el tiempo a 0...
tiempoT = 0;
//Deshabilitar botón de stop...
_root.parar.enabled = false;
//Lleva el control del siguiente mp3 a reproducir
//Si la condición no se cumple se regresa al primer Mp3...
if (cancionActual<numeroDeCanciones) {
cancionActual += 1;
_root.estado.text = "Cargando rola...";
} else {
cancionActual = 0;
}
//Habilitar botón de atras...
_root.atras.enabled = true;
//Se llama a la función precarga...
precargar();
};
Ahora vamos a añadir los eventos de nuestros botones de aumentar y reducir volumen.
Código PHP:
//Acción de los botones de volumen...
//Aumentar volumen...
this.arriba.onRollOver = function() {
this.onEnterFrame = function() {
if (volumen>=100) {
delete (this.onEnterFrame);
} else {
volumen++;
canciones.setVolume(volumen);
_root.volumen_q.text = volumen+" Vol.";
}
};
};
//Disminuir Volumen...
this.abajo.onRollOver = function() {
this.onEnterFrame = function() {
if (volumen<=1) {
delete (this.onEnterFrame);
} else {
volumen--;
canciones.setVolume(volumen);
_root.volumen_q.text = volumen+" Vol.";
}
};
};
this.arriba.onRollOut = function() {
delete (this.onEnterFrame);
};
this.abajo.onRollOut = function() {
delete (this.onEnterFrame);
};
Lo siguiente es especificar de nuevo los eventos de nuestros botones pero ahora el de adelante y atrás, para navegar a través de las canciones disponibles.
Código PHP:
//Acción de botones adelante y atras...
this.atras.onPress = function() {
_root.adelante.enabled = true;
if (cancionActual == 0) {
this.enabled = false;
} else {
_root.parar.enabled = false;
cancionActual -= 1;
_root.parar.gotoAndStop(1);
_root.estado.text = "Cargando rola...";
precargar();
}
};
this.adelante.onPress = function() {
_root.atras.enabled = true;
if (cancionActual == numeroDeCanciones) {
this.enabled = false;
} else {
_root.parar.enabled = false;
cancionActual += 1;
_root.parar.gotoAndStop(1);
_root.estado.text = "Cargando rola...";
precargar();
}
};
Falta especificar la acción del botón parar, es muy importante notar que dentro de este movieclip con el nombre de instacia parar, tiene otros 2 frames interiores, el primer frame tiene el siguiente código, que nos indica que la música no esta en pausa.
Código PHP:
stop();
parado = false;
El Segundo frame interno dentro del movieclip parar nos indica que la música esta en pausa.
Código PHP:
stop();
parado = true;
Ahora de Nuevo en nuestro script de la línea de tiempo principal, especificamos el evento del botón parar.
Código PHP:
//Acción de botones stop y start...
this.parar.onPress = function() {
//Si la propiedad parado es falsa...
if (!this.parado) {
//Cancelamos el intervalo del segundero...
clearInterval(segundero);
//Vamos al segundo frame del movieclip parar...
this.gotoAndStop(2);
//Paramos la reproducción del mp3 actual...
canciones.stop();
} else {
//Iniciamos de nuevo el segundero...
segundero = setInterval(empezarTiempo, 1000);
//Iniciamos la reproducción del mp3 actual en el último tiempo registrado
//en la variable tiempoT<-tiempo transcurrido...
_root.canciones.start(tiempoT-1, 1);
//Vamos al primer frame del movieclip parar...
this.gotoAndStop(1);
}
};
Ya casi para terminar, creamos una función que llevará el registro de la duración del mp3 y eso traducirlo al tamaño de una barra de progreso.
Código PHP:
function empezarTiempo() {
//Calculo de la duración del mp3 en segundos...
duracion = Math.round(canciones.duration/1000);
//Tiempo transcurrido del mp3...
tiempoT++;
//Tamaño de la barra de progreso según el tiempo transcurrido...
_root.barra._xscale = tiempoT*100/duracion;
}
Por ultimo creamos nuestra function que precargará nuestros mp3´s y la llamamos.
Código PHP:
//Funcion precargadora de canciones...
function precargar() {
this.onEnterFrame = function() {
//Cálculo del tamaño y los kilobytes descargados...
total = Math.round(canciones.getBytesTotal()/1024);
loadC = Math.round(canciones.getBytesLoaded()/1024);
//Mostrar estado del tamaño y kb descargados en el campo dinámico bytes...
_root.bytes.text = loadC+"kb de "+total+"kb";
};
//Carga mp3...
canciones.loadSound(rolas[cancionActual], false);
}
precargar();
Sale, eso sería todo, ojalá les haya gustado este humilde tutorial.
Un saludo a todos y…
Suerte!!!