PITUSPlayer

PITUSPlayer

! Uy PITUS going wild !

En el anterior post ya habia puesto un adelanto de lo que estaba haciendo y ahora lo presento formalmente, se trata del más reciente desarrollo del famoso y mundialmente premiado PITUS Lab (como los laboratorios Bell, pero más chingón), se trata de un reproductor de audio en linea, muy básico y nada novedoso, pero sin embargo algo que quiero destacar es que a diferencia de la mayoría de los reproductores actuales, este no requiere complementos de terceros tales como JAVA, FLASH o Silverlight, todos ellos propietarios, así que esta aplicación es un acercamiento más a la tecnología que dominará la WEB en los próximos años, el HTML5.

¿Para Qué Sirve?, bueno en primera instancia parece inutil si consideras que es online y no lo puedes instalar en tu PC, pero insisto, EL SOFTWARE ES UN SERVICIO, NO UN PRODUCTO, entonces podemos pensar en utilizarlo como base para un Podcast, como un player empotrado en tu pagina, o sencillamente para oir tu música desde cualquier otra computadora sin que lleves tu cel o una memoria usb. De hecho podrias quitar la etiqueta AUDIO y poner VIDEO, así tendriamos una eficiente plataforma de educación a distancia, no me refiero a esas pendejadas de los polilibros, si no a clases grabadas en video e impartidas por gente que domina el tema.

Evidentemente no soy el mejor programador y HTML5 aún no es un estándar, así que practicamente cada navegador lo implementa como le sale de los cojones, por ejemplo Firefox solo soporta OGG, Google Chrome soporta OGG y MP4, Apple solo MP4 e Internet Explorer de plano no lo soporta en sus versiones anteriores a la 9. Así que me he decantado por el formato OGG que es libre y además lo soportan 2 navegadores que están en expansión, si tu usas Internet Explorer y no puedes oir las canciones, ¿como decirlo de la mejor manera? mmm... no me importa ja.

Esta aplicación es sencilla y dado que todos los que usamos HTML5 queremos que más gente lo empiece a usar pues voy a liberar el código, no es una versión completa pues por cuestiones de peso solo he incluido un par de carpetas y un par de canciones, seguiré desarrollandolo para que se puedan crear listas de reproducción e incluso pienso crear la opción de subir nuevas canciones y carpetas, pero todo esto es trabajo futuro y no voy a liberar una actualización.

Te explico brevemente como lo he diseñado, el esqueleto es una tabla, dentro de ella hay capas o DIVs, en ellos cargo la información dinamicamente, pues bien al igual que en muchos celulares, la música esta ordenada en carpetas y cada carpeta tiene una imagen que es la carátula de la misma, bajo este modelo he diseñado el reproductor, en concreto las carátulas se llaman cover.jpg y el formato de las canciones como ya mencioné es OGG.

Las lineas azules corresponden al esqueleto de la aplicación y está definido

por una tabla, los recuadros rojos son las 6 diferentes capas o DIVs

para que las capas no crezcan tal como hacen las celdas al contener

más información, solo hay que poner su propiedad OVERFLOW en 

AUTO, así se muestra la barra de dezplazamiento cuando es necesaria y

nuestras capas conservan su tamaño y proporción dentro de la página.

La aplicación inicia en la carpeta de Bunbury, a su vez se cargan en otro DIV los archivos de audio de esa carpeta, esto último es un script muy difundido para listar los archivos de un directorio, pero tengo cuidado de no mostrar lo que no tenga una extensión ogg, cada canción tiene asociada la ruta completa y al hacer clic en ella se carga en otro DIV el reproductor, que está en la opción Autoplay, puede tardar un par de segundos en comenzar tal como sucede en los videos de Youtube o en las canciones de GOEAR. Entonces la lógica es, 1- elijo carpeta y se cargan las canciones, 2- hago clic en una canción y se carga en el reproductor, separar todo en capas permite al reproductor seguir reproduciendo mientras el usuario navega por las carpetas.

La gran magia de la aplicación reside en un par de lineas de código que corresponden a la etiqueta AUDIO de HTML5, aqui abajito un ejemplo de como se usa:

<audio src="horse.ogg" controls="controls">
Your browser does not support the audio element.
</audio>

Y para efectos de mi aplicación recupero la canción y así regreso por AJAX el reproductor con la respectiva canción lista para reproducirse:

<?php 
 if ($_REQUEST[cancion]!="")
 {
  echo '
  <audio controls autoplay="autoplay" loop="true" style="width:348px;" >
    <source src="'.utf8_encode($_REQUEST[cancion]).'" type="audio/ogg">
    Tu navegador no soporta HTML 5 
  </audio>';
 }
 else
 {
  echo '
  <audio controls autoplay="autoplay" loop="true" style="width:348px;" >
    Tu navegador no soporta HTML 5 
  </audio>';
 }
?>

Como puedes ver la aplicación es realmente sencilla, y con los scripts ejemplo de AJAX que en otro post anterior publiqué podrias hacer tu propio reproductor desde cero, así que si has entendido los ejemplos que puse esta aplicación te va a ser muy familiar.

Te puedes descargar las canciones haciendo clic en el icono rojo que acompaña a cada canción, para lograr  la descarga del archivo he utilizado un script que encontré por ahi, pues si pones la ruta directamente en el navegador reproduce la canción, entonces con el script se fuerza a descargar cualquier archivo, incluso imágenes o páginas html, esto puede resultar peligroso justo como lo mencionan en el sitio donde encontré el script, pues algún malintencionado podría redirigir la descarga apuntando a nuestros scripts de PHP, logrando obtener el código fuente, sin embargo esto se puede controlar fácilmente modificando el mismo script, indicándole que solo permita la descarga de archivos con cierta extensión, o por el contrario prohibiéndole que  apunte a cierta extensión de archivo, que es lo que yo he hecho.

Esta aplicación viene acompañada del "esperado lanzamiento" de mi nuevo portafolio web, el anterior lo tenia en 00webhost, pero como ya publiqué anteriormente he montado un servidor propio entonces en vez de mudarlo lo he diseñado en serio esta vez. A mi en lo personal me ha gustado como ha quedado, y porsupuesto que solo utiliza PHP, HTML y JavaScript.

Ok es un poco más que solo un portafolio web, la idea es adjuntar un poco
de información sobre mi, y algunos videos incluyendo los del trabajo que
no están en youtube y finalmente he pensado también en incluir una lista
de mis publicaciones, no solo en congreso si no notas en revistas
y recortes del periódico, es como un vistazo rápido a lo que he hecho
sin que tengan que leer todo el blog.

Originalmente iba a mencionar otro asunto sin embargo me di cuenta que es algo extenso lo que tengo que decir así que he preferido esperar un poco, quiero tener más kilometraje y poder dar mi opinión fundamentada en la experiencia acerca de un tema escabroso ¿son buenas las motos italika?, ahora mismo con 5,558 km y 8 meses de haberla comprado no me arrepiento y puedo decir que vale cada centavo que pagué, pero voy a dedicarle un post completo pues tengo mucho q decir al respecto.