3.1 Fundamentos de la etiqueta <audio>
La etiqueta <audio> en HTML5 se utiliza para insertar archivos de audio en una página web. Este elemento soporta varios formatos de audio y proporciona al usuario controles integrados para reproducir, pausar y ajustar el volumen.
Ejemplo más simple
La etiqueta <audio> se usa con el atributo src, que indica la ruta al archivo de audio. También puedes agregar los atributos controls para mostrar controles estándar como botones de reproducción, pausa y ajuste de volumen.
<audio src="audiofile.mp3" controls></audio>
Ejemplo con múltiples fuentes
Para asegurar soporte en diferentes navegadores, puedes indicar múltiples fuentes de audio usando la etiqueta <source>. Esto permite al navegador elegir el formato de audio soportado.
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
<source src="audiofile.ogg" type="audio/ogg">
Tu navegador no soporta el elemento de audio.
</audio>
Atributos de la etiqueta <audio>
src: indica la ruta al archivo de audio.controls: muestra los controles de reproducciónautoplay: reproduce automáticamente el audio al cargar la páginaloop: repite la reproducción de audio al finalizarmuted: silencia el audio al cargarpreload: indica cómo el navegador debe cargar el audio. Valores posibles: none, metadata, auto
3.2 Ejemplos de uso de atributos
Atributo controls
El atributo controls añade controles estándar de reproducción de audio como los botones "Play", "Pause" y control de volumen. Este atributo hace el elemento de audio más interactivo y fácil de usar.
Ejemplo:
<audio src="audiofile.mp3" controls></audio>
Atributo autoplay
El atributo autoplay hace que el archivo de audio comience a reproducirse automáticamente después de cargar la página. Usa este atributo con precaución, ya que la reproducción inesperada de audio puede molestar a los usuarios.
Ejemplo:
<audio src="audiofile.mp3" autoplay></audio>
Atributo loop
El atributo loop indica que el archivo de audio debe reproducirse en un bucle infinito. Esto es útil para música de fondo o efectos de sonido que deben repetirse.
Ejemplo:
<audio src="audiofile.mp3" autoplay loop></audio>
Atributo muted
El atributo muted silencia el archivo de audio al cargar. Esto puede ser útil si deseas que el audio se reproduzca sin sonido por defecto, y el usuario pueda activar el sonido si lo desea.
<audio src="audiofile.mp3" muted></audio>
Atributo preload
El atributo preload indica al navegador cómo debe cargar el archivo de audio al cargar la página. Puede tener uno de tres valores:
none: el navegador no debe precargar el audiometadata: el navegador debe cargar solo los metadatos (duración, tamaño, etc.)auto: el navegador debe cargar completamente el audio cuando se carga la página
<audio src="audiofile.mp3" preload="auto"></audio>
3.3 Formatos de audio soportados
Para asegurar la compatibilidad entre navegadores, se recomienda usar varios formatos de audio. Los formatos más comunes incluyen MP3, OGG y WAV. Veámoslos con más detalle.
Formato MP3
MP3 (MPEG-1 Audio Layer III) es uno de los formatos de audio más populares. Es soportado por la mayoría de los navegadores y dispositivos. MP3 utiliza compresión con pérdida, lo que permite reducir el tamaño del archivo manteniendo una calidad de sonido bastante alta.
Ejemplo:
<audio src="audiofile.mp3" type="audio/mpeg"></audio>
Formato OGG
OGG (Ogg Vorbis) es un formato de compresión de audio con pérdidas, abierto, que es soportado por la mayoría de los navegadores modernos. Este formato ofrece buena calidad de sonido y se utiliza a menudo como alternativa al MP3.
Ejemplo:
<audio src="audiofile.ogg" type="audio/ogg"></audio>
Formato WAV
WAV (Waveform Audio File Format) es un formato de audio sin compresión que proporciona alta calidad de sonido. Sin embargo, los archivos WAV son más grandes en comparación con MP3 y OGG, por lo que son menos comunes para usar en la web.
Ejemplo:
<audio src="audiofile.wav" type="audio/wav"></audio>
3.4 Compatibilidad de formatos
No todos los navegadores soportan los mismos formatos de audio. Para asegurar la compatibilidad entre navegadores, se recomienda usar varios formatos de audio, como MP3, OGG y WAV.
Ejemplo con compatibilidad de múltiples formatos:
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
<source src="audiofile.ogg" type="audio/ogg">
<source src="audiofile.wav" type="audio/wav">
Tu navegador no soporta el elemento de audio.
</audio>
Accesibilidad
Para asegurar la accesibilidad, se debe proporcionar una alternativa en texto para los casos en que el navegador no soporte el elemento <audio> o los archivos de audio. Esto se puede hacer mediante texto entre las etiquetas de apertura y cierre de <audio>.
Ejemplo de accesibilidad:
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
<source src="audiofile.ogg" type="audio/ogg">
<source src="audiofile.wav" type="audio/wav">
Tu navegador no soporta el elemento de audio.
Puedes descargar el archivo de audio <a href="audiofile.mp3">aquí</a>.
</audio>
Entender las capacidades de la etiqueta <audio> y su API ayuda a crear páginas web más interactivas y accesibles.
GO TO FULL VERSION