Añadir audio a una página web con HTML es bastante fácil. Cualquiera con conocimientos básicos de HTML puede hacerlo. La clave está en comprender cómo funciona la etiqueta

Dicho esto, la calidad del audio es tan importante como la funcionalidad. Si va a añadir grabaciones de voz, usar un micrófono de calidad puede marcar una gran diferencia. Algo como el Hollyland LARK A1 funciona de maravilla. Ofrece un gran rendimiento, con funciones como la protección de clip con limitación automática, un alcance inalámbrico de 200 metros y 3 niveles de cancelación inteligente de ruido.

Hollyland LARK A1 - Affordable Wireless Microphone

A perfect starter mic for creators on a budget. It’s simple to use and features effective noise cancellation.

Key Features: 48kHz/24-bit | 3-Level Noise Cancellation | 54-Hour Battery

Check on Amazon

Cómo funciona la etiqueta de audio HTML

Puede reproducir sonido en una página web utilizando la etiqueta

Coloque la etiqueta source dentro de la etiqueta audio para enlazar su archivo. Esto le indica al navegador qué audio debe cargar y qué formato debe esperar. Si un navegador no es compatible con la etiqueta de audio, puede mostrar un mensaje corto. De esta forma, los usuarios sabrán que la función de sonido no funciona para ellos.

También hay algunos atributos adicionales:

• autoplay: Inicia el audio cuando se carga la página.
• muted: Silencia el audio de forma predeterminada.
• loop: Repite el audio una y otra vez.

HTML admite estos tres formatos de audio:

• MP3 (mejor compatibilidad entre navegadores)
• WAV
• OGG

MP3 es la opción más segura, ya que funciona en casi todas partes.

Cómo añadir audio en HTML: instrucciones paso a paso

Siga estos pasos para añadir audio a su página HTML:

1. Prepare su archivo de audio

• Utilice MP3 para obtener los mejores resultados en todos los navegadores.
• Coloque el archivo de audio en la misma carpeta que su archivo HTML.

• Puede obtener música gratis de la biblioteca de audio de YouTube.

También puede descargar pistas de cualquier sitio web libre de derechos.

2. Cree la estructura HTML

• Abra su archivo HTML.
• Dentro de , añada una etiqueta de apertura y cierre

<audio></audio>

• Guarde el archivo HTML y actualice el navegador.

3. Añada controles al reproductor de audio

• Dentro de la etiqueta de apertura

<audio controls></audio>

• Guarde y actualice la página.
• Debería ver un reproductor de audio en la página del navegador.

Sin embargo, en este momento, la barra debería aparecer atenuada, lo que indica que necesitamos añadir más atributos y etiquetas.

4. Enlace el archivo de audio

• Entre las etiquetas de audio de apertura y cierre, inserte una etiqueta .
• Utilice el atributo ‘src’ para apuntar al nombre del archivo de audio.

<audio controls>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

• Guarde y actualice. Los controles de audio ahora deberían estar activos.

5. Añada un mensaje de reserva

• En caso de que el navegador no sea compatible con el audio, escriba un mensaje sencillo.

<audio controls>

  <source src="bro_time.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

6. Utilice una ruta de archivo (si el audio está en una carpeta diferente)

• Si el archivo de audio no está en la misma carpeta, incluya la ruta completa.

<source src="C:/Users/YourName/Desktop/bro_time.mp3" type="audio/mpeg">

7. Reproduzca el audio en bucle

• Para repetir el audio continuamente, añada ‘loop’ a la etiqueta de audio.

<audio controls loop>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

8. Inicie el audio silenciado

• Para reproducir el audio en silencio de forma predeterminada, utilice muted.

<audio controls muted>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

9. Reproduzca el audio automáticamente

• Añada autoplay para iniciar el audio automáticamente.

<audio controls autoplay>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

Importante: La reproducción automática no funciona bien en los navegadores modernos, especialmente en Chrome y en dispositivos móviles. Además, muchos expertos no recomiendan la etiqueta de audio de reproducción automática, ya que puede vulnerar la privacidad de los usuarios.

10. Oculte los controles para el audio de fondo

• Elimine el atributo controls para reproducir música de fondo sin que se vea el reproductor.

<audio autoplay>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

• Utilice esto con prudencia. La reproducción automática de audio oculto puede molestar a los usuarios.

Caso práctico: creación de una página web con varios archivos de audio

¿Quiere probar un ejemplo real? Vamos a crear una página de música básica. Este puede ser un proyecto divertido. Todo lo que necesita son unos cuantos archivos de audio y un archivo HTML básico.

Siga estos pasos para construirlo:

Prepare sus archivos de audio

• Elija al menos cuatro canciones o clips de sonido en MP3
• Nómbrelos claramente como bro_time.mp3, block_party.mp3
• Coloque todos los archivos de audio en la misma carpeta que su archivo HTML

Inicie un nuevo documento HTML

• Abra cualquier editor de texto como el Bloc de notas o VS Code
• Cree un archivo .html en blanco
• Guárdelo en la misma carpeta que sus archivos de audio

Configure el título de la página

• Dentro de la sección , añada un encabezado principal

MeTunes

Añada la primera pista de audio

• Escriba el nombre de la canción utilizando una etiqueta

• Añada un reproductor de audio debajo con el archivo de origen

<h3>Bro Time</h3>

<audio controls>

  <source src="bro_time.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

Repita el proceso para más canciones

• Copie y pegue la misma estructura
• Cambie el encabezado y el nombre del archivo de origen

<h3>Block Party</h3>

<audio controls>

  <source src="block_party.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

<h3>City Night Lights</h3>

<audio controls>

  <source src="city_night_lights.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

<h3>Beat Your Competition</h3>

<audio controls>

  <source src="beat_your_competition.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

Añada espacio entre cada pista

• Utilice etiquetas
  para añadir espacio adicional
• Esto mantiene la página limpia y fácil de leer

Pruébelo en un navegador

• Haga doble clic en su archivo HTML para abrirlo
• Asegúrese de que todas las canciones funcionan correctamente
• Si algo no se reproduce, compruebe los nombres de los archivos y las rutas

Ahora tiene una página de música funcional utilizando HTML básico. Cada archivo de audio muestra su propio reproductor y todo se reproduce correctamente.

CONSEJO: Aquí tiene el código completo de este proyecto. Simplemente cópielo y péguelo. Cambie las rutas de los archivos y los nombres de las canciones para practicar la adición de sus canciones favoritas a un sitio HTML.

<!DOCTYPE html>

<html>

  <head>

  <title>MY PRACTICE AUDIO HTML SITE</title>

</head>

  <body>

    <h1>SongSite</h1>

    <br>

Song One:

    <br>

<audio controls>

  <source src="song_one.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

<br>

Song Two:

    <br>

<audio controls>

  <source src="song_two.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

    <br>

  Song Three:

    <br>

<audio controls>

  <source src="song_three.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

<br>

    Song Four:

    <br>

<audio controls>

  <source src="song_four.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

    <br>

  </body>

</html>

Si lo ha hecho correctamente, la página HTML debería aparecer similar a esta:

Resumen

Cuando comprenda los conceptos básicos de la etiqueta de audio, insertar música en una página HTML se convierte en algo muy sencillo. Este artículo muestra cada paso esencial que le permite añadir una pista de audio a HTML.

Sin embargo, es importante que utilice los atributos correctos para garantizar la privacidad del usuario. De la misma manera, siempre recomendamos utilizar música de uso gratuito o con licencia para evitar infracciones de derechos de autor.

Preguntas frecuentes

1. ¿Cómo se hace invisible el reproductor de audio en HTML?

Para mantener oculto el reproductor de audio, omita la palabra controls en la etiqueta. Cuando alguien visita su página, el audio se reproduce sin mostrar nada. Si también utiliza autoplay, se inicia de inmediato. Solo tenga cuidado. Algunos navegadores pueden bloquear el sonido si no hay controles.

2. ¿Qué hacen las etiquetas de audio y vídeo en HTML?

Las etiquetas de audio y vídeo le permiten añadir sonido o vídeo. Puede colocar música o clips directamente en su página. Estas etiquetas forman parte de HTML5 y funcionan en la mayoría de los navegadores actuales. Añádalas dentro de la sección body para mostrar los reproductores en pantalla. También admiten diferentes tipos de archivos, dependiendo del navegador.

3. ¿Sigue la gente utilizando HTML para los sitios web modernos?

Sí, HTML se sigue utilizando para construir todos los sitios en línea. Incluso las páginas avanzadas necesitan HTML para la estructura y el diseño. Ayuda con el SEO, la velocidad de carga y el diseño de la página. Ya sea una página pequeña o una compleja, HTML sigue siendo importante. Sin él, ningún sitio web se cargaría correctamente en ningún navegador.