Avisar de contenido inadecuado

Audio en tus Posts II

{
}

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

 

{
}
{
}

Comentarios Audio en tus Posts II

hola tengo una consulta, tengo una web en php, un foro y quiero incluir mi radio online que un showcast server entonces  es un streaming de audio.quisiera colocarlo como un banner swf en la web y incluir un reproductor que automatico active la radio.sera posible con tu reproductor?gracias por tu respuesta y felicitaciones por tu buen trabajo.sandro
sandro sandro 21/03/2006 a las 22:04
Hola sandroPues tengo que decirte que ni había pensado en ello, pero buscando por ahí veo que sí. Los mismos métodos que usa el OboPlayer para llamar a los mp3 pueden usarse para llamar a la URL De un servidor de ShoutCast. Al parecer, así tal cual, puede dar problemas en IE. Adicionalmente, para evitar estos problemas, habría que usar System.security.allowdomain("http://www.tudominio.com"); al principio del script.Puedes encontrar más información en este thread de FlashSupport: http://www.flashsupport.com/forum/topic.asp?TOPIC_ID=1230 Ya nos contarás si lo consigues! Un saludo,Albert. 
nombre de la cancion de joaquin sabina en alma pirata?
aldo aldo 10/05/2006 a las 01:27
hola obokaman.... Excelente reproductor.. eh estado buscando uno por la red, y me eh topado con unos muy complejos... y dificil de entender... este tiene todo... bueno le falta unas cosa que pueda cargar mas de una cancion pero de ahi en mas esta excelente.... no soy muy bueno para Flash... estoy intentando hacer mi pagina we.. y neto quiero poner tu reproductor en mi pagina.. pero solo hay un detalla.. cuando lo hago mas chiquito.. la barra de progreso.. se sale del margenn... porfavor me podrias ayudar a decime como solucione este erro..!!!Sin mas por el momento me despidto de ti.. Bye y Gracias por el reproductor de ante mano Riendo
Godi Godi 11/05/2006 a las 04:45
Buenas Godi, busca en el código actionscript del reproductor: verás que en algunos puntos se define en píxeles el área que ocupará la barra de progreso del reproductor, así que deberías modificar esos valores principalmente si vas a modificar el tamaño del mismo.  
Gracias Obokaman por la respuesta tan rapida..  le eh intendado hacer modificar lo de los pixeles.. y pues la verdad no se mucho de flash pues tampoco de ActionScript osea que no se que linea modificar.. ehh modificado las de X, Y pero aun asi ... me sigue saliendo mal... No se en donde esta mi error...Espero me puedas ayudar... Gracias nos vemos...De ante mano Gracias!!!!
Godi Godi 11/05/2006 a las 20:30
Tengo un problema al reproducir el video en flash, yo me baje el punto fla, y no se como direccionar el url que dice al comienzo del actionscript.Gracias con toda la ayuda que me puedas brindar
Galo Galo 23/05/2006 a las 06:04
Tengo un problema parecido. Es asi, tenia unos en *.fla y los edite con Flash MX 2004 Profesional y hasta ahi todo bien, cada vez que los abria andaban pero el unico problema que tenia es que me faltaban algunas fuentes pero eso no me importaba. Por una y otra cosa tuve que borrar y rearmar el windows y el mismo Flash que usaba anteriormente, asi poder seguir con mi proyecto lo cual me resulta imposible. Osea abro el *.fla que previamente modifique en mi anterior instalacion y me dice FORMATO DE ARCHIVO INESPERADO y ahi no me queda otra que poner aceptar. Eso me destrozo por que perdi mil horas de trabajo. Buscando en google encontre que aca se trataba este tema y por lo que lei "FLASH MX 2004 no insertan 12 bytes(3 DWORDs) en el FLA cosa que suena coherente" . Si le agrego 12 bytes(3 DWORDs) se arreglara? Como agrego eso? Gracias.
alekula alekula 31/05/2006 a las 06:44
quiero saber si alguin le pudo adaptar al increible oboplayer una lista de canciones, yo le adapte un componente list y xml con la ruta delas canciones,pero tengo una duda  como hago para que cuando termine una cancion vaya a la siguiente si alguien me puede ayudar les estare agradecido cualquier cosa envienme un e-mail a mi casilla phavlo@gmail.com
pablo pablo 07/06/2006 a las 00:36
perdon mi casilla phavlo21@gmail.com
pablo pablo 07/06/2006 a las 00:42
Obokaman te felicito por el reproductor, esta muy bueno!! Quería preguntarte como puedo hacer para reproducir archivos mp3 subidos mediante un sistema de upload con mysql, osea, la idea es hacer click en una lista de archivos y que se reproduzca. Se puede hacer eso? como lo puedo hacer? desde ya muchas gracias amigo
Fernando Fernando 02/07/2006 a las 20:57
Hola Obokaman! ante nada felicitaciones por el reproductor que creaste y sobre todo por la repercusion que el mismo logro!Queria preguntarte dos cosas:
1) Es posible agregar un control del volumen? Como?
2) Tengo problemas cuando cargo la página en el IE, con firefox anda perfecto, epro el explorer me bloquea en swf y no deja que me tome la direccion de la cancion. Desde ya, muchisimas gracas!Y felicitaciones! 
Ignacio 02/08/2006 a las 07:19
Obokaman! ya pude solucionar las dos preguntas que te habia hecho en elcomentario anterior. Ahora tengo otra...jajaj, seria posible hacer que cuando una cancion este reproduciendose, el texto que muestra el nombre de la cancion y artista se desplaze?Suerte!! 
Ignacio 04/08/2006 a las 02:08
que buen reproductor no podia echarlo a jalar y solo era que me faltaban las "" pero ya esta jalando solo que yo lo quisiera poner en una radio pero no reproduce archivos .asx espero que encuentres una forma porfavor de como reproducir archivos asx porfa gracias www.ksradio.net en remodelacion
Santiago Santiago 16/08/2006 a las 23:33
Tu reproductor esta una chimba, bacano que la gente construya poroyectos como estos y ademas que los liberen, yo tengo una web que deja reproducir todo tipo de musica online y este reproductor es perfecto. Lo de hacer una lista de rep con php se puede claro, miren estas son las bases del proyecto:Existe un archivo encargado de subir la musica al servidor, al subirlo se especifica nombre ruta y duracion, estos datos quedan en la base de datos.Cuando se va al reproductor, se lee la base de datos con las canciones ordenadas hasta por generos o como quieran y al hacer clic en una cancion se manda la variable que se agrega a la lista de reproduccion, cuando se reproduce la lista se manda la variable y ademas se genera un Js que redirecciona a la pagina con la variable de la siguiente cancion y que se ejecuta al pasar el tiempo que se especifico de duracion de la cancion.Asi se pueden crear listas de reproduccion, pueden ingeniarselas para hacer una funcion de aleatorio
Academo Academo 24/08/2006 a las 16:35
Hola man, soy de Perú, me gustó mucho tu reproductor mp3 y me parece bastante simpl, y sencillo y explicado. pero dime como podria hacer para pasarle como parámetro la direccion de un archivo de Playlist como Lista.m3u que es un formato bastante sencillo y en donde puedo poner sin problemas la direccion de las músicas como si fuera una base de datos. Gracias.
joelito joelito 06/09/2006 a las 20:39
Ante todo agradecerte que facilites tu codigo y ademas nos ayudes ante las dudas. Y como no, te muestro la mia:Seria  posible que nos explicases los calculos que utilizas en el control_proceso?Tengo un escenario de 500x30, clip_marcador:30x10 X:105 Y:25, carga:310x2 X:90 Y:25Estos datos afectan a: pose, tam_carga e ir_a_pos, pero no soy capaz de verlo para que funcione. Cuando te vaya bien nos lo cuentas, si te parece.Ya ves, has despertado inquietudes, felicidades.
staedler staedler 12/09/2006 a las 22:25
Q tal quisiera ver si me puedeb ayudar lo que pasa es que quiero hacer una URL de un mp3 y no se como hacerlo y quisiera ver si me pueden hechar la mano, soy nuevo en esto pero me interesa un buen, apenas estoy haciendo mi blog pero le quiero hechar ganas; espero y se pueda gracias.
Pato Pato 14/09/2006 a las 21:51
Hay cientos de programas conversores
Visitame en www.compuarc.es
Javier Javier 28/03/2007 a las 18:15
Muy bueno tu reproductor, voy a ver si lo puedo utilizar en la web que edito todos los dí

as.
Daniel Daniel 14/11/2007 a las 23:08
Enhorabuena por el reproductor!!
Querría saber si es posible mostrar la imagen del archivo mp3 que se esté escuchando cada momento. Tengo entendido que en la estiqueta WXXX de ID3 está el fotograma del vínculo URL del archivo, pero lo he probado y me muestra "undefined".
¿Sabes como se podría hacer?
Gracias 
Pilar Pilar 07/02/2008 a las 14:16
Bien, hace bastante tiempo que fuiste muy amable en compartir este Oboplayer para mp3, y en agradecimiento a ese código fuente te doy crédito por tu aportación para nuestra progamación radial (sin fines de lucro) que tenemos en nuestra congregación. Espero sea satisfactorio encontrarte con una versión de tu player en un siit más de la web.
Gracias!
http://www.creyendoloimposible.org/radioaudio.html
Miguel Rodríguez Miguel Rodríguez 30/06/2008 a las 06:48
Antes que anda felicitarte por este reproductor y no te preocupes que posteare hacia este link cada vez que lo use.

Una pregunta, como puedo hacer para poner mas de una cancíon, ya que quiero poner minimo 5 o 6 canciones para que se reproduscan.

muchas gracias...

Saludos y felicidades
Luis Luis 01/10/2008 a las 12:27
Hola q tal. descargue el fla.
pero a la hora de abrirlo . me sale un mensaje
formato de archivo inesperado.
uso adobe flash cs4
salu2
debe de ser un creacion unica. no he tenido la oportunidad de verlo
CircuitoX CircuitoX 14/11/2008 a las 17:05
Trabaja como streaming ???
Luis Angel Luis Angel 01/03/2010 a las 18:42

Deja tu comentario Audio en tus Posts II

Identifícate en OboLog, o crea tu blog gratis si aún no estás registrado.

Avatar Tu nombre