Etiqueta HTML <audio>
La etiqueta <audio> es uno de los elementos de HTML5 añadidos para permitir la incrustación de archivos de audio en una página web. Dado que no todos los navegadores admiten todos los formatos de audio, el archivo de audio se codifica utilizando códecs especiales.
La <source> etiqueta o el atributo src se utiliza para indicar las variaciones del mismo archivo de audio. La ruta a un archivo de audio puede contener URLs absolutas o relativas.
Sintaxis
La etiqueta <audio> se escribe en pares. El contenido se escribe entre las etiquetas de apertura (<audio>) y cierre (</audio>).
Etiqueta HTML <audio>
<audio>
<source src="URL">
<source src="URL">
</audio>Ejemplo de la etiqueta HTML <audio>:
Ejemplo de la etiqueta HTML <audio>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls>
<source src="https://es.w3docs.com/build/audios/jingle_bells.ogg" type="audio/ogg" />
<source src="https://es.w3docs.com/build/audios/audio.mp3" type="audio/mpeg" />
</audio>
<p>Click the play button</p>
</body>
</html>El atributo loop
El uso del atributo loop hará que el archivo de audio se reproduzca una y otra vez:
Etiqueta HTML <audio>
<audio src="audio.mp3" autoplay loop></audio>Mostrar controles del navegador
Puedes permitir que el navegador muestre controles al usuario, como el volumen o reproducir/pausar. Esto se hace con la ayuda del atributo controls.
Código para mostrar controles del navegador
<audio src="audio.mp3" controls></audio>Ejemplo de la etiqueta HTML <audio> con el atributo controls:
Ejemplo de la etiqueta HTML <audio> con el atributo controls
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls src="https://es.w3docs.com/build/audios/audio.mp3">
Your browser does not support the audio element.
</audio>
<p>Click the play button</p>
</body>
</html>Varios formatos de archivo
Con la etiqueta <audio> puedes definir múltiples formatos del mismo archivo de audio.
Ejemplo de varios formatos de archivo
<audio controls>
<source src="audio.ogg">
<source src="audio.mp3">
</audio>Atributos
La etiqueta <audio> tiene atributos que indican la ruta al archivo de audio, el comportamiento de reproducción, etc. Los atributos controls, autoplay, loop y muted son booleanos; sus valores pueden omitirse. Si se especifican, la función correspondiente se habilita de forma predeterminada.
| Atributo | Valor | Definición |
|---|---|---|
| autoplay | Reproduce el archivo de audio automáticamente después de cargar la página. | |
| controls | Muestra el panel de control (reproducir/pausar, volumen, etc.). Si falta el atributo controls, el audio no será visible en la página. | |
| loop | Repite el archivo de audio continuamente desde el principio una vez que termina. | |
| muted | Silencia el audio de forma predeterminada. | |
| preload | auto, metadata, none | Define la estrategia de precarga para el archivo de audio. |
| src | URL | Especifica la ruta al archivo de audio. |
La etiqueta <audio> admite los Atributos globales y los Atributos de eventos.
Práctica
¿Cuáles son las propiedades de la etiqueta de audio HTML?