Elemento audio en HTML

El elemento html audio se utiliza para incrustar contenido de audio en documentos, y este puede contener uno o más archivos de origen que se representan mediante la propiedad src o mediante el elemento <source>. El navegador elegirá el archivo de audio más apropiado para reproducir.

El siguiente ejemplo usa el elemento <audio> con la propiedad autoplay para reproducir el audio automáticamente, especificando la URL del archivo fuente a través de la propiedad src:

< audio  src = "pista1.mp3"  autoplay > 
  Su navegador no es compatible con el elemento 
  < code > audio </ code > .
</ audio >

El siguiente ejemplo contiene el elemento <audio> con el uso de una propiedad controls para agregar botones para controlar el clip, y la URL del clip se especificará a través del elemento <source>:

< audio  controls = "controls" > 
  < source  src = "pista1.ogg"  type = "audio / ogg" > 
  < source  src = "pista1.mp3"  type = "audio / mpeg" > < code > el 
  elemento de audio no es compatible por su navegador </ code > .
</ audio >

Etiqueta html audio

Clasificaciones de contenido	Un elemento organizativo, un elemento normal, un elemento que contiene medios incrustados o un elemento interactivo.
Contenido permitido	Si un elemento `src` tiene la propiedad, puede tener `<track>` uno o más elementos seguidos de contenido regular que no incluye los dos elementos `<audio>` y `<video>`. Si no tiene la propiedad `src`, puede contener `<source>` uno o más elementos, seguidos de `<track>` uno o más elementos, y un contenido regular que no incluya el elemento `<audio>` y `<video>`.
Acrónimo	Las etiquetas de inicio o finalización no se pueden omitir.
Elementos del padre	Cualquier elemento que acepte elementos incrustados.
Interfaz DOMO	`HTMLAudioElement`

Características

Algunas funciones HTML5 recién agregadas no funcionan en todos los navegadores. En este elemento html audio se pueden utilizar propiedades globales.

`autoplay`

Esta función es booleana y si se usa (¡incluso si es un valor "false"!) comenzará a reproducir la pista de audio lo más rápido posible, sin esperar a que se descargue todo el archivo de audio. Tenga en cuenta que los sitios que reproducen audio automáticamente (o reproducen videos con audio) pueden molestar a los usuarios.

Por lo que esta función debe evitarse a menos que sea necesario y, si es absolutamente necesario, haga que esta función sea opcional y solicite al usuario que la habilite. Sin embargo, puede beneficiarse de esta función si el propósito principal de la página es reproducir un clip de audio específico.

`buffered`

Una propiedad elegible para especificar qué campos del clip de audio se descargaron, ya que esta propiedad contiene un objeto TimeRanges.

`controls`

Si esta función está presente, el navegador proporcionará controles para permitir al usuario controlar la reproducción de audio, incluido el volumen, moverse a diferentes posiciones en el clip de audio, pausar, reproducir y otras.

`loop`

Esta propiedad es booleana y, si está presente, el clip se reproducirá desde el principio después de llegar al final. El siguiente ejemplo usa el elemento <audio> con la propiedad loop para reproducir el clip una vez terminado:

< audio  src = "pista.mp3"  controls = "controls"  loop = "loop" > 
  Su navegador no es compatible con el elemento 
  < code > audio </ code > .
</ audio >

`muted`

Booleano Esta propiedad indica si el clip se amortiguó inicialmente. El valor predeterminado es false. El siguiente ejemplo usa el elemento <audio> con la propiedad mute para silenciar automáticamente el sonido:

< audio  src = "pista.mp3"  controls = "controls"  muted = "muted" > 
  Su navegador no es compatible con el elemento 
  < code > audio </ code > .
</ audio >

`played`

Esta propiedad es legible y contiene un objeto TimeRanges que indica los dominios que el usuario ha reproducido desde el clip de audio.

`preload`

El propósito de esta función es darle al navegador una idea de lo que el desarrollador de la página piensa que es mejor para la experiencia del usuario y toma uno de los siguientes valores:

none: El clip de audio no debe estar precargado.
metadata: Solo se deben cargar metadatos (por ejemplo, duración del clip).
auto: Indica que el clip de audio se puede cargar incluso si no se espera que el usuario lo reproduzca.
Si el valor es una cadena vacía, es equivalente a la propiedad auto.

Si no se establece el valor de esta propiedad, el valor predeterminado se tomará del navegador (cada navegador tiene su propio valor predeterminado), pero la especificación recomienda que los navegadores tengan el valor predeterminado de metadata.

Tenga en cuenta que la propiedad autoplay tiene prioridad sobre la propiedad preload, por lo que si autoplay se especifica la propiedad, tiene sentido que el navegador comience a descargar el clip de audio directamente.

Cabe señalar que la especificación no obliga al navegador a seguir el valor de esta propiedad, es solo una pista de lo que quiere el desarrollador de la página. El siguiente ejemplo usa el elemento <audio> con la propiedad preload para decirle al navegador que no cargue el clip de audio cuando se carga la página:

< audio  src = "pista.ogg"  preload = "none" > 
  Su navegador no es compatible con el elemento 
  < code > audio </ code > .
</ audio >

`src`

Esta propiedad contiene la URL del archivo de audio que se cargará. Esta propiedad es opcional y puede usar el elemento <source> dentro del elemento <audio> para especificar la URL de los clips de audio que desea incluir.

`volume`

El volumen al que se reproducirá el clip, que va de 0.0(silencioso) a 1.0(más alto).

Descripción de uso

Puede agregar contenido alternativo para navegadores que no admiten el elemento <audio> entre marcar el inicio <audio> y la etiqueta de cierre </audio>.

La forma más sencilla de agregar controles es usando una propiedad controls. Para agregar controles avanzados, esto se puede hacer a través de la API de Medial.

También puede utilizar la API de Web Audio para generar o modificar audio a través de JavaScript.

Es cierto que un elemento <video> puede mostrar la sección de subtítulos (subtítulos) a través del elemento <track>, pero los elementos <audio> no pueden hacerlo, e ignorarán cualquier elemento <track> dentro de marcar el inicio <audio> y la etiqueta de cierre </audio>‎.

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
Soportado	Soportado	Soportado	Soportado	Soportado