JMiur [E]

Somos muchos los que usamos YouTube para escuchar música. También son muchas las páginas que lo utilizan para "simular" que son buscadores de MP3s; incluso hay software que hace lo mismo.

Esto no es casualidad, se debe, por una parte, a que los MP3s son archivos malditos, parias que deben rodar de servidor en servidor hasta encontrar alguno que los acoja aunque sea temporalmente y por otro lado, la fabulosa cantidad de videos alojados en YouTube lo ha transformado (tal vez sin querer) en una biblioteca digna de tener en cuenta. Claro que ellos hacen limpieza cada tanto y borrarn videos o cierran cuentas pero es un método ridículo que se parece a tratar de combatir las hormigas pateando el hormiguero; sólo consiguen que los archivos sean vueltos a subir por decenas de otros usuarios y esa única copia se transforme en cientos.

Sea como sea, ¿por qué no usarlo para reproducir audio en nuestros sitios? Nada lo impide.

Hay muchas páginas que hablan de mostrar el reproductor standard como un reproductor de audio, eso es bastante sencillo, basta darle la menor altura posible:


Pero es una solución bastante limitada; mejor intentar algo diferente que permita reproducir listas de audios sin restricciones y usando alguna clase de reproductor personal que pueda ser diseñado a gusto de cada uno.


Para hacer esto, utilizaremos las funciones públicas que provee el API de YouTube. Ver YouTube y JavaScript 1 y 2

Hay dos modos de aplicarlo, utilizar nuestro mismo blog o bien crear un blog auxiliar, minimizar la plantilla y luego, cargarlo con la etique IFRAME; en este caso, esta es la plantilla del demo.

Lo primero es agregar la librería SWFobject que es la que nos permitirá contolar el reroductor así que lo ponemos antes de </head>:
<script src='http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js' type='text/javascript'/>
Y luego, las funciones que pueden descargarse desde este archivo de texto:
<script type='text/javascript'>
//<![CDATA[
  ... aquí pegamos el contenido del archivo ...
//]]>
</script>
Manejaremos tres datos que guardaremos en una lista:
YTplaylistID[indice] contendrá el ID del video que siempre tiene 11 caracteres
YTplaylistInterprete[indice] es el nombre del intérprete
YTplaylistTema[indice] es el nombre del tema
y para evitar problemas, tanto en el intérprete como en el tema, lo mejor es utilizar caracteres alfanuméricos simples, sin acentos, comillas, etc.

Hasta ahí no pasará nada, vamos a agregar lo que falta, podemos usar un elemento HTML o directamente en la plantilla:
<div id='reprobody'>
  <div id='CONTENEDOREPRO'> </div>
  <table cellpadding='0' cellspacing='0' id='reproductor'><tbody>
  <tr>
    <td><a href='javascript:atras();' id='batras' onmouseover='anteriorTema();' title=''><img src='imagen_boton_atras'/></a></td>
    <td><a href='javascript:play();'><img src='imagen_boton_play'/></a></td>
    <td><a href='javascript:pause();'><img src='imagen_boton_pause'/></a></td>
    <td><a href='javascript:stop();'><img src='imagen_boton_stop'/></a></td>
    <td><a href='javascript:adelante();' id='badelante' onmouseover='siguienteTema();' title=''><img src='imagen_boton_adelante'/></a></td>
  </tr>
  </tbody></table>
  <div id='tema'> </div>
</div>
Colocaremos todo dentro de un DIV llamado reprobody. Adentro de este hay otro DIV vacio llamado CONTENEDOREPRO que es donde la librería SWFobject creará el objeto de Flash; a continuación, nuestros botones que sólo son enlaces con una imagen y que en este caso, los armé en una tabla pero puede tener cualquier otro esquema gráfico y por último, otro DIV llamado tema donde se mostrará el nombre del intérprete y el tema.


Lo que faltaría es ejecutar todo y eso lo hacemos agregando esto al final de la plantilla, antes de </body>:

<script type='text/javascript'>
//<![CDATA[
  // ejecutamos la función para interpretar la lista
  crearplaylistvideos();
  // creamos el objeto de Flash para reprodicr los videos
  YTonplaying = 0;
  var params = {allowScriptAccess: "always"};
  var video = "http://www.youtube.com/v/" + YTplaylistID[0] + "&enablejsapi=1&playerapiid=YTplayer";
  var atts = {id: "reproOBJECT"};
  swfobject.embedSWF(video, "CONTENEDOREPRO", "50", "20", "8", null, null, params, atts);
  // ejecutamos la función para mostrar los textos
  mostrarTema();
//]]>
</script>
Obviamente, necesitamos algo de CSS; lo elemental sería algo así::
<style>
  #reprobody { /* este es el rectángiulo que contendrá todo */
    background-color: #000;
    border: 2px solid #AAA;
    margin: 0 auto;
    padding: 8px 0;
    width: 175px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-box-shadow: 0 0 8px #FFF inset;
    -webkit-box-shadow: 0 0 8px #FFF inset;
    box-shadow: 0 0 8px #FFF inset;
    background-image: -moz-linear-gradient(100% 100% 90deg, #000, #444);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#000), to(#444));
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF000000', EndColorStr='#FF444444');
  }
  #reproductor { /* la tabla */
    height: 24px;
    margin: 0 auto;
    width: 100px;
  }
  #reproductor td { /* las celdas de la tabla */
    text-align: center;
    vertical-align: middle;
  }
  #reproductor td img { /* los botones */
    opacity: .8;
    filter: alpha(opacity=80);
  }
  #reproductor td img:hover { /* efecto hover sobre los botones */
    opacity: 1;
    filter: alpha(opacity=100);
  }
  #tema { /* los textos */
    color: #CCC;
    font-family: Tahoma;
    font-size: 10px;
    text-align: center;
  }
  #reproOBJECT { /* ocultamos el video en si mismo */
    left: -1000px
    position: absolute;
  }
  #milistadereproduccion { /* ocultamos la lista de reproducción */
    display: none;
  }
</style>
¿Como funciona?

Debemos crear la lista; del mismo modo que el resto, la podemos poner en la plantilla, en un elelento HTML nuevo o en el mismo donde esta el reproductor; sólo debemos seguir unas pocas reglas de sintaxis; un ejemplo:
<div id='milistadereproduccion'>
oo9BtKdkdoY,Aretha Franklin,Shoop shoop song,
....... 
....... seguimos agregando videos separándolos con comas .......
ID_video,nombre intérprete,nombre tema,
....... 
....... y verificar que  último no lleve coma .......
-twOjwBORwg,Eric Clapton,Crossroads
</div>
Esa es la lista que leerá e interpretará la función crearplaylistvideos(), creando los arrays necesarios. Obviamente, ese método puede ser cambiado por cualquier otro.

Al iniciarse, el primer video de la lista todo estará listo para ser reproducido mediante el botón Play. De allí en más, al terminar uno comenzará el siguiente y si la lista se acaba, recomenzará otra vez. Con los botones de avance y retrocesos podemos movernos dentro de la lista y seleccionar otros temas. Todo esto, sabiendo que cada cambio implica la carga del video y que esto puede demorar más o menos de acuerdo a nuestra conexión y al estado del servicio. El ejemplo no tienen ninguna otra caracterísitica especial para tratar con errores o problemas, si los encuentra, simplemente sigue adelante y salta al siguiente tema.

Aunque no lo veamos, el video está alli, "en alguna parte" y al usar SWFobject, el proceso es rápido y la memoria es liberada cada vez que cambiamos así que la página no se "sobrecarga".

Si usáramos un blog auxiliar, bastaría colocar un IFRAME alli quisieréramos verlo:
<iframe scrolling="no" style="width: 179px; height: 70px;" frameborder="0" marginheight="0" src="URL_blog_auxiliar" marginwidth="0" align="middle"></iframe>

9 comentarios:

EvilSeyer  

Esto esta genial! Hay alguna forma de que la lista se reproduzca de forma aleatoria?

Responder
JMiur  

Si, habría que mezclar los arrays de datos. En al web puedes encontrar diferentes métodos para hacer eso.

Responder
yonathan  

Muy bueno la parte de la barra de youtube sola asi no la habia visto xd ojala fuera bueno que le saquen algunas opciones como por ejemplo la mas comun: funcion aleatoria y q tenga una lista de reproduccion.. la verdad tengo unas muy buenas ideas de como hacerlo pero como no se mucho de programacion... saludos!

Responder
Lockerooo  

Me gusta el reproductor, pero para que mentir.. ha hacer todo eso no llego xD
Y no se podría tener un reproductor como ese. Me refiero a su aspecto.
En .sfv y hacer que reproduzca mp3 de Url´s externas.
Ya, para rematar.. sería genial que a su vez, en vez de nombre y canción fuese cambiando una imagen de una Url externa.. junto con cada canción. (que fácil es hablar con la imaginación) xP

Responder
JMiur  

Si encuentras uno hecho que haga eso, será fácil ponerlo ... crearlo ya es otra cosa :D

Responder
tucuta  

Excelente tuto, felicidades.

Podrías poner un enlace descargable con uno ya funcional porque trate de hacerlo y no lo pude lograr.

Gracias y felicidades nuevamente...
;-)

JMiur  

Los dos enlaces tienen archivos funcionales.

tucuta  

Hola JMiur, muchas gracias por la pronta respuesta, de verdad te agradezco un montón...

Te cuento, vieras que ya intente realizar paso a paso lo que hicistes y no lo he podido hacer funcionar, lo hice en .html y .xml y ninguna de las dos me funciona, sería genial un enlace con los archivos ya hechos para poder probarlo.

Muchas gracias nuevamente por el tuto y por la pronta respuesta.

;-)

JMiur  

Tendrias que mostrar tu ejemplo para poder ver qué pude estar pasando.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR