JMiur [E]

Buzz es una pequeña librería de Javascript que fue pensada para poder controlar fácilmente las posibilidades que da la etiqueta AUDIO en los navegadores que las soportan.

Pese a su tamaño es muy poderosa porque permite ejecutar los archivos en distintos formatos de modo automático e incorpora una enorme variedad de funciones para controlar su ejecución; la documentación no es abundante pero se puede entender.

Como todas estas nuevas etiquetas, por ahora, nos vemos inmiscuidos en esa lucha de formatos soportados y no soportados, lo que hace que como usuarios, estemos limitados u obligados a, como mínimo, duplicar la información.

En este caso, el script soporta formatos AAC, MP3, OGG y WAV pero, no todos los navegadores soportan los cuatro y por lo tanto, no hay forma de tener un solo archivo de audio y que este se reproduzca siempre:


ACC
MP3
OGG
WAV


Igualmente, veamos cómo funciona.

Una vez alojado el script en un servidor y agregado antes de </head>:
<script type="text/javascript" src="URL_buzz.js"></script>
o copiado directamente en la plantilla:
<script type'text/javascript'>
//<![CDATA[
  ....... aquí colocamos el contenido del archivo buzz.js
//]]> 
</script>
Ya lo tenemos funcionando y listo para usar. Para eso, creamos objetos con JavaScript de varios modos:
var unaudio = new buzz.sound( "URL_archivo.ext");
donde unaudio es cualquier nombre que querramos usar y que identificará a ese archivo que es único, por ejemplo: musica.mp3.
var otroaudio = new buzz.sound( "URL_archivo", { formats: [ "ogg", "mp3" ] });
donde le agregamos los formatos disponibles y en ese caso, no ponemos la extensión del archivo ya que hay dos que tienen el mismo nombre con diferente extensión.

Los formatos aceptados son cuatro así que si dispusiéramos de cuatro archivos, pondríamos: { formats: [ "ogg", "mp3", "aac", "wav" ] }

Por defecto, los audios son pre-cargados y no se ejecutan de modo automático. Llegado el caso, esto puede cambiarse, modificando los parámetros correspondientes, tanto globalmente como para cada archivo en particular.

Todo se maneja con JavaScript así que es simple de usar; siempre, usamos el nombre definido al crear el objeto; esta son algunas de las funciones:
  • nombre.play(); comienza a ejecutar el audio
  • nombre.pause() pausa la ejecución
  • nombre.stop() detiene la ejecución
  • nombre.togglePlay() permuta entre play y pause
  • nombre.isPaused() devuelve TRUE si se ha pausado
  • nombre.isEnded() devuelve TRUE si ha terminado
  • nombre.loop() lo ejecuta repetidamente
  • nombre.unloop() detiee el loop
  • nombre.mute() silencia el audio
  • nombre.unmute() vuelve a escucharse
  • nombre.toggleMute() permuta entre esos dos estados
  • nombre.isMuted() devuelve TRUE si se ha silenciado
  • nombre.setVolume(valor) establece el volumen (0 a 100, 80 por defecto)
  • nombre.getVolume() devuelve el valor del volumen actual
Por ejemplo, si tenemos definido un audio:
<script>
  var ejemplo = new buzz.sound( "URL_archivo", { formats: [ "ogg", "mp3" ] });
</script>
Podemos usar enlaces de cualquier tipo para ejecutar algunas de esas funciones, sean estos texos o imágenes:
<a href="javascript:void(0);" onclick="ejemplo.play();"> PLAY </a>
<a href="javascript:void(0);" onclick="ejemplo.pause();"> PAUSE </a>
<a href="javascript:void(0);" onclick="ejemplo.stop();"> STOP </a>

<a href="javascript:void(0);" onclick="ejemplo.togglePlay();"> TOGGLE AUDIO </a>

nombre.play()nombre.pause()nombre.stop()


O bien podemos crear funciones de alguna clase, mezcándolas:
<script>
function togglesonido(obj) {
  obj.togglePlay();
  if (obj.isPaused()) {
    document.getElementById("mostrar").innerHTML = "pausado";
  } else {
    document.getElementById("mostrar").innerHTML = "playing";
  }
}
</script>

<a href="javascript:void(0);" onclick="togglesonido(ejemplo);"> FUNCION </a> <span id="mostrar"></span>

togglePlay


Obviamente, hay que tner en cuenta que si se utiliza la precarga de archivos, la demora podría lleagr a ser importante si es que agregamos demasiados o si estos son voluminosos.

2 comentarios:

XvenezuelaX  

bueno solo faltaria next y previous y la opción de colocar las lista de canciones y tendriamos un bonito reproductor sin necesidad de flash gracias por el articulo saludos desde venezuela

Responder
JMiur  

La librería posee funciones para eso, así como para agrupar audios de tal modo que, perfectamente, podría crearse una lista de reproducción. Todas esas funciones pueden verse en la documentación del script.

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