Contenido

jai, jugando con audio desde Javascript

13 ene

+ 1

La llegada de HTML5 nos mostró el elemento <audio /> que nos permite hacer que el navegador se convierta en un reproductor de audio con Javascript como controlador. Aprovechando esta nueva característica del lenguaje aparece jai que nos permite generar listados gráficos de las canciones encontradas en nuestra página.

<!-- HTML -->
<div id="jai">
  <canvas id="jai-transport" width="320" height="20"></canvas>
  <ul>
   <li><a href="@F1LT3R - Cryogenic Unrest.ogg" title="Play">F1LT3R - Cryogenic Unrest<span title="Download"></span></a><audio src="@F1LT3R - Cryogenic Unrest.ogg">Your browser does not support the <code>audio</code> element. Get <a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 3.5</a>.</audio></li>
   <li><a href="@F1LT3R - Ghosts in HyperSpace.ogg">F1LT3R - Ghosts in HyperSpace</a><audio src="@F1LT3R - Ghosts in HyperSpace.ogg">Your browser does not support the <code>audio</code> element. Get <a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 3.5</a></audio></li>
   <li><a href="@F1LT3R - SOS Distress.ogg">F1LT3R - SOS Distress</a><audio src="@F1LT3R - SOS Distress.ogg">Your browser does not support the <code>audio</code> element. Get <a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 3.5</a></audio></li>
   <li><a href="@F1LT3R - Disturbed Orbit.ogg">F1LT3R - Disturbed Orbit</a><audio src="@F1LT3R - Disturbed Orbit.ogg">Your browser does not support the <code>audio</code> element. Get <a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 3.5</a></audio></li>
   <li><a href="@F1LT3R - Binary Lovers.ogg">F1LT3R - Binary Lovers</a><audio src="@F1LT3R - Binary Lovers.ogg">Your browser does not support the <code>audio</code> element. Get <a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 3.5</a></audio></li>
  </ul>
</div>

El script es muy limitado en cuanto a configuración se refiere, ya que nos obliga a usar una estructura similar a la mostrada arriba, pero se encarga de renderizar mediante un elemento <canvas /> el listado de elementos <audio /> detectados en la página permitiendo disponer de un reproductor avazando en nuestra aplicación.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.