La etiqueta audio, como su nombre lo indica, nos permite insertar un audio en HTML. Los formatos que permite insertar son los siguientes:

• mp3
• ogg
• wav

Uso de la etiqueta audio

<audio controls src="electronica.mp3"></audio>

Ten en cuenta el uso de la etiqueta controls, la misma que muestra en la página web los botones de play, pausa, tiempo transcurrido y control de volumen; de ahi su importancia de siempre ponerla.

Dentro del atributo src pondrás la dirección del archivo de audio.

Cómo poner un audio de respaldo

Se puede poner un audio de respaldo en caso de que el primer audio no se reproduzca, inclusive se puede poner un mensaje en texto en caso de que el segundo audio tampoco se logre reproducir. Todo esto se hace de la siguiente manera:

<audio controls autoplay loop muted>
    <source src="electronica.mp3">
    <source src="jazz.ogg">
    El navegador no puede reproducir el audio.
</audio>

Se hace el uso de la etiqueta <source> para especificar cada una de las rutas de cada archivo. En caso de que no se logre reproducir ningún archivo se mostrará el siguiente mensaje: «El navegador no puede reproducir el audio.»

Atributos de la etiqueta <audio>

También notese todos los atributos que puede tener la etiqueta audio:

• controls muestra los controles de audio en el navegador (play, pausa, tiempo transcurrido y silencio).
• autoplay ejecuta el audio apenas se cargue la página.
• loop hace que el audio se ejecute infinitamente.
• muted por defecto el audio se carga en silencio.

Todos son opcionales, sin embargo es muy recomendable tener por lo menos puesto el atributo controls.

¿Te gustaría ver esta explicación en video? mira aquí:

👇‍‍👇‍‍👇‍‍

Acerca de esta serie…

Esta es una serie de artículos donde iré explicando cada una de las etiquetas que contiene HTML. Si quieres ver la siguiente etiqueta te recomiendo hacer click aquí. Y si no tienes claro que es HTML aún te recomiendo ver este blog aquí.

Sígueme en mis redes sociales:

👉‍‍ YouTube
👉‍‍ Twitter
👉‍‍ GitHub
👉‍‍TikTok