Un reproductor de audio muy personal

JMiur

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>

<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>