ZEN – Un reproductor de audio para la web con tecnologí­a HTML5 y CSS3

Publicado el

Si deseas que los visitantes de tu blog o página web puedan escuchar podcasts, desde el mismo sitio, una opción a la cual puedes recurrir es a Zen. Ahora bien.. ¿De qué se trata? Pues, de un reproductor de archivos de audio para la web, con algunas caracterí­sticas llamativas como la utilización de HTML5 y de CSS3.
Zen está basado en el reproductor JPlayer, no obstante, incluye algunos cambios que consisten en la aplicación de estilos y en algunas cualidades de HTML5 añadidas.
Zen es un reproductor de sonidos para la web que busca la simplicidad y la usabilidad, y como todos los reproductores, se mostrará en la página web un pequeño cuadrado en donde se encuentran los controles para reproducción. ZEN puede reproducir archivos mp3, oga o m4a.

Instalación

1 – Descargar el código fuente desde el repositorio github.com (Haz clic en “Downloads” y podrás descargar el ZIP con todas las carpetas y archivos).
2 – Descomprime el archivo ZIP en tu disco y sube a tu sitio web.
3 – Coloca dentro de la carpeta “audio” los archivos de audio que quieras que se reproduzcan con ZEN.
4 – Agrega los JS y CSS necesarios en el encabezado html (head) que son los siguientes:


5 – Y por último agrega el siguiente código html en la sección de tu página en donde quieras que se sitúe el reproductor:

A continuación, te mostramos un ejemplo completo del uso del reproductor Zen con un archivo de audio, situado en la carpeta “audio”.

Conclusión

Zen aún se halla en una etapa de desarrollo muy temprana (casi alpha), existiendo fallas y errores que solucionar. Un problema que tiene es que al utilizar el reproductor con Firefox, no se reproducí­an archivos MP3. En realidad, este es un lí­mite propio del navegador y no del reproductor. Es por ello que es conveniente subir las 3 opciones de tipos de archivo (mp3, oga y m4a), y de este modo funcionará en cualquier navegador. Otro problema, quizás el más grave, es que el reproductor no se ve igual en todos los navegadores, por ejemplo con Google Chrome se ve diferente a como se lo visualiza con Firefox.
Por otra parte, cabe destacar en Zen la forma en qué se aplicaron los estilos CSS3, logrando una interfaz muy cómoda y atractiva, como también las animaciones que se observan en la barra de progreso de reproducción.
Mas información: ZEN Player

3 comentarios en “ZEN – Un reproductor de audio para la web con tecnologí­a HTML5 y CSS3