Insertar audio en nuestras páginas web con HTML5 es más sencillo de lo que parece, y nos ofrece varias opciones para asegurar que el contenido multimedia llegue correctamente a todos los usuarios. Para ello, utilizamos la etiqueta audio, que se abre y se cierra, y dentro de ella especificamos las distintas fuentes de audio que queremos reproducir.
¿Por qué incluir varias fuentes si solo queremos reproducir una canción? Principalmente porque los navegadores no siempre soportan los mismos formatos de audio. Por ejemplo, algunos pueden reproducir archivos MP3, mientras que otros prefieren OGG o formatos más recientes como Opus. Además, si estamos trabajando con contenido multilingüe, podemos incluir varias pistas en diferentes idiomas para que el usuario elija la que prefiera.
En lugar de usar un atributo src directamente en la etiqueta audio, como hacemos con las imágenes, dentro de audio colocamos varias etiquetas source. Cada una de estas etiquetas lleva un atributo src que apunta al archivo de audio y un atributo type que indica el tipo MIME del archivo. Este tipo MIME es un identificador que le dice al navegador qué formato tiene el archivo, por ejemplo, audio/mpeg para MP3, audio/wav para WAV o audio/ogg para OGG.
Un ejemplo básico de cómo se estructura sería así:
<audio controls>
<source src="gocard.mp3" type="audio/mpeg">
<source src="gocard.ogg" type="audio/ogg">
Tu navegador no soporta la reproducción de audio.
</audio>
Con esto, el navegador intentará reproducir el primer formato que soporte. Si no puede con el primero, pasará al siguiente, y así sucesivamente.
Para que el usuario pueda controlar la reproducción, es fundamental añadir el atributo controls a la etiqueta audio. Esto hace que aparezcan los controles típicos de reproducción, pausa, volumen y avance, facilitando la interacción con el audio. Sin este atributo, el audio no mostrará controles visibles y no se podrá manejar manualmente a menos que usemos JavaScript para crear controles personalizados.
Si queremos que el audio se reproduzca automáticamente al cargar la página, podemos añadir el atributo autoplay. Esto hace que el navegador inicie la reproducción sin necesidad de que el usuario pulse el botón de play. Por ejemplo:
<audio controls autoplay>
<source src="gocard.mp3" type="audio/mpeg">
</audio>
Además, si deseamos que el audio se repita en bucle, podemos usar el atributo loop. Así, cuando la pista termine, volverá a empezar automáticamente. Podemos combinar estos atributos según nuestras necesidades, por ejemplo, un audio que se reproduzca automáticamente y en bucle, pero sin mostrar controles:
<audio autoplay loop>
<source src="gocard.mp3" type="audio/mpeg">
</audio>
En este caso, aunque el audio se reproduce, el usuario no tendrá controles visibles para pausarlo o ajustar el volumen, a menos que implementemos controles personalizados con JavaScript.
Es importante tener en cuenta que, aunque hoy en día la mayoría de los navegadores modernos soportan formatos comunes como MP3, OGG y WAV, algunos formatos más especializados, como FLAC para audio sin compresión, pueden no estar soportados en todos los navegadores. Por eso, siempre es recomendable probar la reproducción en los navegadores y plataformas que usen nuestros usuarios para asegurarnos de que el audio funciona correctamente.
En resumen, la etiqueta audio junto con las etiquetas source y los atributos controls, autoplay y loop nos permiten insertar y controlar audio en nuestras páginas web de forma sencilla y efectiva, mejorando la experiencia multimedia para nuestros usuarios.