Ayer mismo te comentaba que habia estado trabajando en un reproductor de audio en Flash para poder hacer streaming de un MP3 que le pasáramos como parámetro. Soy un impaciente y la versión que colgué ayer, aunque funcionaba correctamente, tenía algunas limitaciones. "Estuvimos trabajando en ello" y hoy creo que ya podemos hablar de la primera versión del OboPlayer "con fundamento". Vamos a echar un vistazo al 'Making Of'.
En primer lugar, como ya comenté, el apunte sobre videoposts de Gemma en tintachina fue la chispa inspiradora. Ya antes habia colgado en obokaman mensajes con videos o audio, pero el método era bastante tosco. En el caso de los videos, la mayor parte de las veces era un sólo swf con un video incrustado, algunos mínimos controles de "play" y "stop", y un interface siempre diferente. Cada vez que alguien accedía a la página que lo contenía, lo descargaba entero, lo viera o no. En el caso de las canciones ocurría lo mismo, un interfaz mínimo (un sólo botón) y descarga completa de la canción. En ambos casos debía crear cada vez un archivo swf para cada vídeo o canción. Difícil de mantener, de gestionar desde la administración del blog, y complicado para los demás participantes enviar sus propias aportaciones en el mismo formato. Ahi es donde se propone interesante una aplicación flash independiente que actúe como intermediaria: se mantiene un aspecto siempre similar, se le pueden especificar qué archivo reproducir, se le pueden añadir capacidades avanzadas de control de reproducción, es posible reproducir archivos de audio en formato mp3 y por tanto, gestionar todo eso desde el propio CMS del blog.
Decidí empezar a buscar en FlashKit (de momento siempre he encontrado lo que buscaba), y efectivamente, después de repasar algunos ejemplos demasiado complejos para lo que quería, dí con el tutorial definitivo. El reproductor que podemos crear con ese manual nos permite crear un reproductor que lee un mp3 mediante el método loadSound del que recibe la ruta de acceso por la variable url, y dispone de las funciones básicas de reproducción, pausa, avance rápido y retroceso rápido mediante botones. Era un buen comienzo, pero me pareció buena idea intentar extraer información del archivo MP3 como el título y el artista, y mostrar una barrita de progreso, para ver dónde qué parte estábamos escuchando y movernos por el MP3 arrastrándola. Intentaré explicar los pasos de manera esquemática. He comentado extensamente el fichero fla original para hacer más comprensible su seguimiento y facilitar las modificaciones que quieras hacerle.
Crearemos una película de un solo frame, y tendremos una capa para la base (la interface), otra para los botones de control, otra para la barra de progreso, otra para el título del MP3, y otra para las acciones. Seamos ordenados. ;) Podemos usar para la prueba los botones que incorpora ya FLash MX en las bibliotecas comunes. En el frame de las acciones se definirán las funciones principales de control de reproducción, así como los valores iniciales para el título, la posición de la barra de progreso, el volumen si quisiéramos...
boton_pause._visible=false;
clip_marcador._x=25;
clip_marcador._y=53;
_root.pos=0;
if (url==null) {
titulo_cancion.text="No se ha cargado ninguna canción.";
}else{
mysound=new Sound();
mysound.loadSound(url, true);
mysound.stop();
mysound.onID3 = function () {
titulo_cancion.text=_root.mysound.id3["songname"]
+" - "+_root.mysound.id3["artist"];
}
}
Lo que hacemos es:
- Ocultar el botón de pausa
- Posicionar la barra de progreso
- Especificar dónde empezará la reproducción
- Si se ha pasado correctamente la url, cargamos el mp3 y leemos los datos de titulo y artista de las etiquetas ID3. Si os fijais, esto nos obliga a cargar el mp3 antes de empezar su reproducción, lo que nos hace perder parte de su funcionalidad (descargar sólo cuando empiece la reproducción). Una posibilidad sería leer la etiqueta con php (es posible) y pasarle los datos por string, junto con la ruta al MP3. (es lo que y hago)
A continuación, definimos las funciones de Play, Stop y Pause.
function playea() {
if (escuchando!="si"){
mysound.start((_root.pos)/1000,1);
escuchando="si";
}
boton_play._visible=false;
boton_pause._visible=true;
}
function stopea() {
_root.pos=0;
mysound.stop();
escuchando="no";
clip_marcador._x=25;
boton_play._visible=true;
boton_pause._visible=false;
}
function pausea() {
_root.pos=mysound.position;
mysound.stop();
escuchando="no";
boton_pause._visible=false;
boton_play._visible=true;
}
Estas funciones se las aplicaremos luego a los botones correspondientes, de la siguiente manera:
on(release) {
playea();
}
Es importante no usar nombres que ya son usados por Flash para funciones propias (play, stop, pause...). Listo! Ya tendríamos la parte más importante. Sólo con esto, nuestro reproductor ya funcionaría. Ahora vamos a los botones de avance y retroceso rápidos, y a la barra de proceso. Esto ya es para nota.
Creamos un botón con la forma de una barrita que será el objeto que nos indique el progreso durante la reproducción de la canción. Una vez hecho esto, creamos un MovieClip vacío que contedrá las acciones necesarias para gestionar avance, retroceso y movimiento de la barra. Lo llamaremos, en nuestro caso, "control_proceso", y lo colocaremos en la escena principal. Dentro crearemos dos fotogramas clave, vacíos. En el primero colocaremos las acciones y el segundo lo dejaremos vacío, simplemente para que vaya reproduciéndonse en bucle. Este MovieClip "monitorizará" la película principal contínuamente. Este será el contenido del ActionScript en su primer frame:
if (_root.llevar) {
startDrag (_root.clip_marcador,true,25,_root.clip_marcador._y,308,_root.clip_marcador._y);
colocar=1;
}else{
if (colocar) {
stopDrag();
pose = int(((_root.clip_marcador._x-25)/283)*(_root.mysound.duration/1000));
_root.mysound.stop();
_root.mysound.start(pose, 1);
colocar=0;
_root.boton_pause._visible=true;
_root.boton_play._visible=false;
_root.escuchando="si";
}
if (_root.escuchando=="si") {
ir_a_pos=int((_root.mysound.position/_root.mysound.duration)*283)+25;
_root.clip_marcador._x=ir_a_pos;
if (_root.rw) {
pose = int((_root.mysound.position)/1000)-3;
_root.mysound.stop();
_root.mysound.start(pose, 1);
}
if (_root.fw) {
pose = int((_root.mysound.position)/1000)+3;
_root.mysound.stop();
_root.mysound.start(pose, 1);
}
}
}
En primer lugar, miramos si se está pulsando la barra de progreso, para poder arrastrarla, limitando su movimiento horizontal. Después, al soltarla, detenemos el arrastre, y calculamos la posición a la que habrá que ir, en relación a dónde hemos soltado la barra (los valores que hemos usado aqui son en referencia al tamaño de nuestro reproductor, si haceis uno de tamaño diferente, deberiais calcular antes la longitud, la posición...).
En los últimos tres bloques tenemos la parte que controla contínuamente que la posición de la barrita sea la correcta según lo que está sonando, y las dos funciones para avance rápido y retroceso rápido.
Como te decía al principio, el documento original está extensamente comentado. Con esta explicación y los apuntes que irás leyendo entre el código, estoy seguro de que no te costará demasiado "personalizarlo" para adaptarlo al diseño de tu página o añadirle otras funcionalidades. Lo siguiente sería darle soporte para pasar, no uno, si no varios archivos MP3 a modo de Playlist. Eso lo dejo para la próxima versión, posiblemente usando phpObject... ;)
Recuerda que el archivo original está disponible para descarga:
Estaré encantado de que puedas sacar partido al reproductor en Flash. Si finalmente decides usarlo, sería un detalle por tu parte que me avisaras y citaras la fuente original. Si no lo haces, es poco probable que el Coco te visite una noche de estas.
¡¡¡Que pases una feliz Nochebuena!!!
Actualización: Lista de sites que usan una adaptación del OboPlayer