Insertar etiquetas de audio con HTML5

Auriculares

Imagen: freepik

Entre las novedades incorporadas por la quinta revisión importante del lenguaje de marcado HTML, destacan las etiquetas para audio y vídeo. Éstas nos facilitan mucho la inserción de estos contenidos multimedia, pues su utilización no tiene demasiada complejidad y con ellas, además, prescindiremos del uso de aplicaciones externas. En este tutorial, voy a hablar de las pautas para reproducir ficheros de audio.

Atributos

La etiqueta <audio> se compone de una serie de atributos, que determinarán su comportamiento. Son los siguientes:

  • SRC: enlaza el archivo a reproducir.
  • TYPE: indica el tipo de audio o códec.
  • WIDTH: establece la anchura en píxeles.
  • HEIGHT: hace lo propio con la altura.
  • CONTROLS: añade los mandos básicos (play, pausa y volumen).
  • AUTOPLAY: acciona el audio en el momento en que se carga la página.
  • PRELOAD: para evitar cortes, efectúa una precarga del fichero antes de comenzar a reproducirlo.
  • LOOP: crea un bucle de repetición.

Por ejemplo, un audio en MP3, con activación automática, quedaría estructurado así:

<audio src="url-fichero.mp3" type="audio/mp3" width="500" height="30" controls autoplay></audio>

Formatos

Hay numerosos formatos de audio y existen incompatibilidades con algunos navegadores, especialmente con los más minoritarios. En este enlace, se ofrece información detallada sobre los medios admitidos: https://developer.mozilla.org/es/docs/Web/HTML/Formatos_admitidos_de_audio_y_video_en_html5.

Para que todos tus visitantes tengan acceso al contenido que estás compartiendo, conviene usar el elemento source para proporcionar distintos tipos de audio.

<audio controls preload>
   <source src="url-fichero.mp3" type="audio/mpeg" />
   <source src="url-fichero.ogg" type="audio/ogg" />
   <source src="url-fichero.wav" type="audio/wav" />
   <!-- Si no es soportado ninguno -->
   Tu navegador no es compatible con el audio HTML5
</audio>

Controles externos

HTML5 incluye otra preferencia, que nos permite agregar botones externos para el control de la reproducción. Se hace del siguiente modo:

<audio src="url-fichero.mp3" controls>
   <button onclick="document.getElementById('demo').play()"> Play </button>
   <button onclick="document.getElementById('demo').pause()"> Pausa </button>
   <button onclick="document.getElementById('demo').volume+=0.1"> Subir volumen </button>
   <button onclick="document.getElementById('demo').volume-=0.1"> Bajar volumen </button>
</audio>

Duración

El tiempo de duración se puede delimitar de diversas maneras, siempre por medio de una almohadilla y la introducción del correspondiente intervalo. Lo vemos con varios ejemplos:

El audio se inicia a los 5 segundos y finaliza a los 40:
<audio src="url-fichero.mp3 #t=5,40" controls></audio>

Comienza desde el principio y acaba transcurrida una hora:
<audio src="url-fichero.mp3 #t=,01:00:00" controls></audio>

Empieza a los 30 segundos y avanza hasta el final:
<audio src="url-fichero.mp3 #t=30" controls></audio>

Subtítulos

Las posibilidades de la etiqueta son realmente completas, ya que también nos da la opción de vincular un archivo de texto, en el que se haya subtitulado el audio. El proceso se lleva a cabo mediante el atributo track:

<audio src="url-fichero.mp3" controls>
   <track src="subtitulos_es.vtt" kind="subtitles" label="Spanish" srclang="es">
   <track src="subtitulos_en.vtt" kind="subtitles" label="English" srclang="en">
</audio>