Deprecated: Assigning the return value of new by reference is deprecated in /home/summarg/domains/summarg.com/public_html/wp-content/plugins/post-series/post-series.php on line 841 Notice: is_feed was called incorrectly. Conditional query tags do not work before the query is run. Before then, they always return false. Please see Debugging in WordPress for more information. (This message was added in version 3.1.) in /home/summarg/domains/summarg.com/public_html/wp-includes/functions.php on line 3245 Introducción a la etiqueta HTML5 < audio > | SummArg

SummArg | Cursos y recursos para webmasters

13/08/2011

Introducción a la etiqueta HTML5 < audio >

Colocar sonidos en websites ahora es mucho mas sencillo con HTML5, aunque sigue siendo un recurso que utilizar con cuidado (sigue siendo considerada mala práctica el colocar música de fondo que se reproduzca automáticamente).

Estos tips que comparte catswhocode nos da una buena idea de cómo comenzar a utilizar el tag <audio>.

 

¿Cómo usar la etiqueta <audio> para insertar un archivo de sonido en un website?

Veamos un uso básico de la etiqueta para cargar un archivo MP3 y que se reproduzca automáticamente.
<audio src="sound.mp3" autoplay></audio>

Reproducir indefinidamente

Cargar un sonido y hacer que se reproduzca indefinidamente (loop) es tan simple como esto:
<audio src="sound.mp3" autoplay loop></audio>

Mostrar controles de navegación

Agregar controles para la reproducción del sonido es muy simple. Agregando el atributo controls al código podemos agregar control de volumen, play y pausa.
<audio src="sound.mp3" controls></audio>

Múltiples formatos de archivo

La etiqueta audio está soportada por la mayoría de los navegadores modernos, aunque no todos los navegadores soportan los mismos formatos de archivo. Afortunadamente pueden cargarse dos o mas archivos en formatos diferentes de esta manera:
<audio controls>
<source src="sound.ogg">
<source src="sound.mp3">
</audio>

Especificar MIME types

Al utilizar formatos diferentes, se hace necesario especificar el tipo de archivo (MIME type) de cada uno para ayudar al navegador a identificar el mismo. El valor debe ir dentro del atributo type.
<audio controls>
<source src="sound.ogg" type="audio/ogg" >
<source src="sound.mp3" type="audio/mp3" >
</audio>

Compatibilidad con navegadores antiguos

Los visitantes que todavía utilizan IE6 o algún otro navegador prehistórico que no soporte la etiqueta <audio>, tendrán problemas para escuchar nuestro archivo. La alternativa es colocar un mensaje indicando al usuario la situación y solicitándole que actualice su navegador.
<audio controls>
<source src="sound.ogg" type="audio/ogg" >
<source src="sound.mp3" type="audio/mp3" >
Su navegador no soporta el método de reproducción de audio de este sitio, por favor actualice su navegador!
</audio>

Archivo en modo buffer

Cuando se quiere reproducir un archivo muy pesado, es buena idea utilizar el sistema de buffer. El atributo a utilizar es preload y acepta tres valores:

  • none, desactiva el sistema de buffer
  • auto, el navegador maneja el buffer del archivo
  • metadata, carga la metadata solamente

<audio controls>
<source src="sound.mp3" preload="auto" >
</audio>

Controles HTML5 < audio > con JavaScript

Controlar un reproductor de audio HTML5 con JavaScript es muy simple. En el siguiente ejemplo (tomado del libro HTML5 for WebDesigners) se muestra como añadir los controles básicos (Reproducir, Pausa, Aumentar Volumen, Disminuir Volumen) usando HTML y JavaScript.
<audio id="player" src="sound.mp3"></audio>
<div>
<button onclick="document.getElementById('player').play()">Play</button>
<button onclick="document.getElementById('player').pause()">Pause</button>
<button onclick="document.getElementById('player').volume+=0.1">Volume Up</button>
<button onclick="document.getElementById('player').volume-=0.1">Volume Down</button>
</div>

Con esto dimos un pantallazo preliminar a la etiqueta < audio >.

Dejar un comentario

  1. Hola

    que propiedades o eventos mas avanzados se tienen para la etiqueta audio, en el caso de querer hacer una lista de reproducción, gracias

    Saludos

Dejar un comentario