Elemento audio

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento audio incrusta recursos de audio en un documento. Aunque es muy fácil de utilizar, este elemento puede ser muy adaptable, poderoso y compatible con la mayoría de los navegadores.

Los autores tienen dos formas para indicarle a los navegadores qué recurso se debe cargar. El primero, y más directo, es especificando el URI del recurso en el atributo src. El segundo método incrementa la compatibilidad entre navegadores, al trabajar junto al elemento source. Con el elemento source puedes proveer diferentes alternativas del mismo recurso, y dejar que el navegador elija la que se adapta mejor a sus características.

Cualquier forma que elijas de incluir la fuente del audio, siempre podrás llenar al elemento con contenido alternativo, de modo que los navegadores que no lo soporten tengan algo que mostrar. Esto resulta muy útil para autores que necesiten desarrollen sitios compatibles con navegadores antiguos, ya que pueden proveer alternativas en reproductores de audio Flash o un mensaje que informe al usuario acerca del problema de soporte (y posibles formas de resolverlo). Si el navegador soporta al elemento audio, el contenido alternativo será simplemente desestimado.

Uno o más elementos track pueden incluirse dentro de cualquier elemento de medios para proveer información extra, como subtítulos, títulos o descripciones, que mejorarán la experiencia del usuario.

Los autores deben elegir una de las dos formas de especificar un recurso de audio pero nunca ambas. Si declaras el atributo src no te será posible proveer alternativas con el elemento source.

Ejemplos

En el siguiente ejemplo insertaremos un audio usando el atributo src, mientras indicamos al navegador que provea controles para que el usuario maneje su reproducción. Para hacer que los controles estén disponibles, estableceremos el atributo booleano controls.

También proveeremos contenido alternativo para que los usuarios con navegadores que no soportan al elemento audio sean informados acerca del problema y tengan una pequeña guía acerca de cómo proceder.

<audio src="../../../audio/Jahzzar_The_Flowers_Are_Still_Standing.mp3" controls>
  <p>Tu navegador no soporta la reproducción nativa de audio. Tal vez quieras pasarte a un navegador moderno con más características, con el fin de poder escuchar el archivo de audio.</p>
</audio>

El audio corresponde a la canción "The Flowers Are Still Standing" (Jahzzar) / CC BY-SA 4.0.

Eso pudo haber funcionado correctamente, pero el problema con el código anterior es que solo provee una fuente, y dado que su formato es MP3, no será reproducido en todos los navegadores. Entonces, quitemos el atributo src y pongamos algunos elementos source, cada uno con un versión del audio en un formato particular, para permitirle a los navegadores elegir la versión que son capaces de reproducir.

Para los navegadores que soportan al elemento audio, no hace falta proveer más que dos formatos (MP3 y Ogg) para hacer que el audio sea reproducido correctamente en todos los navegadores.

<audio controls>
  <source src="../../../audio/Jahzzar_The_Flowers_Are_Still_Standing.ogg" type="audio/ogg">
  <source src="../../../audio/Jahzzar_The_Flowers_Are_Still_Standing.mp3" type="audio/mpeg">
</audio>

El audio corresponde a la canción "The Flowers Are Still Standing" (Jahzzar) / CC BY-SA 4.0.

Finalmente, intentaremos agregar títulos y subtítulos a un audio con la ayuda de track. El elemento track ha sido diseñado para proveer subtítulos, títulos, descripciones, capítulos o metadatos para video and audio, pero al ser relativamente nuevo, no es completamente soportado por los navegadores.

Nota que los títulos y subtítulos vienen en un formato especial de archivo, que en este caso es WebVTT, aunque existen otros.

Hasta el 21-11-2014, ningún navegador provee soporte para pistas para el elemento audio. Los autores pueden tener que recurrir a programas del lado cliente para proveer esta funcionalidad consistentemente hasta que el soporte crezca.

<audio controls>
  <source src="../../../audio/Frankenstein_Chapter_5.ogg" type="audio/ogg">
  <source src="../../../audio/Frankenstein_Chapter_5.mp3" type="audio/mpeg">
  <track kind="captions" label="Captions" src="../../../audio/Frankenstein_Chapter_5_EN.vtt" srclang="en"></track>
</audio>

El elemento audio tiene algunos atributos interesantes. Tal vez quieras revisar la siguiente sección.

Atributos

Atributos específicos

src

El URI (ubicación) del recurso de medios que será reproducido.

Los autores no deberían incluir a source dentro del elemento si el atributo src está presente. Ambos métodos para declarar fuentes no están pensados para trabajar en conjunto.

Este atributo es obligatorio si el atributo itemprop está presente en el elemento audio, ya que se utiliza para determinar el valor de la propiedad.

Ten en cuenta que usar el atributo src permite la declaración de un solo recurso de medios. Si la compatibilidad con los distintos navegadores es requerida, los autores deberían usar el elemento source en su lugar, y definir al menos los dos formatos más soportados (MP3 y Ogg).

Ejemplo

<audio controls src="../../../audio/Jahzzar_Ice_Cream.ogg"></audio>

El audio corresponde a la canción "Ice cream" (Jahzzar) / CC BY-SA 3.0.

crossorigin

Un valor enumerado que indica si la petición hecha a un servidor externo debe presentar credenciales CORS o no. Este atributo resulta útil al incrustar audios ubicadas en otros servidores que soportan acceso cross-origin, para permitir su reutilización en un canvas. Los dos valores posibles son (insensibles a mayúsculas/minúsculas):

  • anonymous: las peticiones CORS para el elemento tendrán la etiqueta "omit credentials" establecida.
  • use-credentials: las peticiones CORS para el elemento no tendrán la etiqueta "omit credentials" establecida.

Ejemplo

<audio src="bgmusic.ogg" crossorigin="anonymous"></audio>

preload

Una pista para el navegador que lo ayudará a decidir si el recurso de medios debería ser cargado ni bien sea posible (cuando se cargue el documento). El atributo puede definir tres estados que aconsejan al navegador llevar a cabo las siguientes tareas:

  • none: no se requiere la precarga de ninguna información ya que al usuario y/o servidor les gustaría minimizar el tráfico innecesario.
  • metadata: sólo los metadatos del recurso (duración, dimensiones, pistas, etc.) y probablemente los primeros pocos segmentos de audio, pueden considerarse necesarios para el usuario.
  • auto: el recurso de medios completo puede ser precargado a discresión del navegador.

Cuando el atributo toma la cadena vacía ("") por valor, o cuando está simplemente presente, el navegador se comporta como si el valor "auto" fuese pasado.

El valor en este atributo da solamente una pista al navegador acerca de cómo manejar la precarga del recurso de medios. La conducta elegida por éste no se encuentra regida por el estándar, y por lo tanto, puede ser impredecible.

Ejemplo

<audio controls preload>
  <source src="../../../audio/Jahzzar_Change.ogg" type="audio/ogg">
  <source src="../../../audio/Jahzzar_Change.mp3" type="audio/mpeg">
</audio>

El audio corresponde a la canción "Change" (Jahzzar) / CC BY-SA 3.0.

autoplay

Un valor booleano que indica si la reproducción del medio debería comenzar tan pronto como al navegador le sea posible sin tener que detenerse para cargar. Si el atributo toma el valor "autoplay" o la cadena vacía (""), o si simplemente está presente (sin valor) la reproducción comienza automáticamente.

Ejemplo

<audio src="music.mp3" autoplay></audio>

loop

Un valor booleano que indica si el navegador debería recomenzar automáticamente la reproducción del archivo de medios una vez que ésta llega a su fin. Si el atributo toma el valor "loop" o la cadena vacía (""), o si simplemente está presente (sin valor) la reproducción se repetirá indefinidamente.

Ejemplo

<audio controls loop>
  <source src="../../../audio/laser.ogg" type="audio/ogg">
  <source src="../../../audio/laser.mp3" type="audio/mpeg">
</audio>

El audio corresponde a bubaproducer / CC BY 3.0.

muted

Un valor booleano que indica si el elemento de medios debería ser silenciado (un estado equivalente a no tener volumen). Si el atributo toma el valor "muted" o la cadena vacía (""), o si simplemente está presente (sin valor) la salida de sonido del elemento será silenciada.

Si los controles están presentes, los navegadores proveerán usualmente un botón para silenciar/permitir el sonido del elemento. Este botón debería estar presente aún cuando este atributo no se encuentre establecido.

Ejemplo

<audio controls muted>
  <source src="../../../audio/Jahzzar_Sketch_Rum_Portrait.ogg" type="audio/ogg">
  <source src="../../../audio/Jahzzar_Sketch_Rum_Portrait.mp3" type="audio/mpeg">
</audio>

El audio corresponde a la canción "Sketch (rum-portrait)" (Jahzzar) / CC BY-SA 3.0.

controls

Un valor booleano que indica al navegador que debería proveer una interfaz para permitir al usuario controlar la reproducción, típicamente cuando el autor no provee un programa controlador de la reproducción. Si el atributo toma el valor "controls" o la cadena vacía (""), o si simplemente está presente (sin valor) se proveerán controles de reproducción.

Ejemplo

<audio controls>
  <source src="../../../audio/Jahzzar_Please_Listen_Carefully.ogg" type="audio/ogg">
  <source src="../../../audio/Jahzzar_Please_Listen_Carefully.mp3" type="audio/mpeg">
</audio>

El audio corresponde a la canción "Please Listen Carefully" (Jahzzar) / CC BY-SA 4.0.

mediagroup

Una cadena que enlazará a este elemento de medios con todos los elementos de medios que tengan el mismo valor en sus atributos mediagroup. Todos los elementos de medios agrupados compartirán la misma posición y propiedades de reproducción y, por lo tanto, serán reproducidos juntos como si fueran uno.

Los autores pueden tomar ventaja de este atributo para, por ejemplo, proveer un video con un audio separado que contenga múltiples fuentes, una para cada lenguaje soportado. Esta técnica es utilizada en el siguiente ejemplo,donde una música de fondo es tocada junto con el reporte de una noticia, permitiendo que traducciones a otros idiomas sean provistas sin la necesidad de cambiar la música de fondo.

Aunque es posible, no hace falta proveer controles para más de un elemento de medios en un grupo. Los comandos ejecutados en un control afectarán a todos los elementos en el grupo indistintamente.

Este atributo ha sido recientemente introducido al estándar y, debido a la falta de implementación por parte de los navegadores, eliminado. Su uso es actualmente inválido.

Ejemplo

<audio mediagroup="radio_report" controls>
  <source src="../../../audio/Radio_report_background_music.ogg" type="audio/ogg">
  <source src="../../../audio/Radio_report_background_music.mp3" type="audio/mpeg">
</audio>
<audio mediagroup="radio_report">
  <source src="../../../audio/Radio_report_voice_english.ogg" type="audio/ogg">
  <source src="../../../audio/Radio_report_voice_english.mp3" type="audio/mpeg">
</audio>

El audio corresponde a Kevin MacLeod (incompetech.com) / CC BY 3.0 and the voice file to Timbre / CC BY-NC 3.0.

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.