Los visualizadores de audio transforman el sonido en movimiento. Probablemente los haya visto como barras o ondas coloridas en vídeos musicales o podcasts. ¿Lo mejor? Puede crear uno usted mismo utilizando código sencillo. En esta guía, aprenderá a crear un visualizador de audio con HTML, CSS y JavaScript.

Utilizaremos herramientas integradas del navegador, como la API de audio web y Canvas. Incluso puede utilizar un micrófono para visualizar su voz. Para un sonido nítido, un micrófono como el Hollyland LARK M2 es de gran ayuda. Captura audio claro con bajo nivel de ruido, por lo que sus elementos visuales reaccionan mejor a la música, el habla o los instrumentos.

Hollyland LARK M2 - Mini Lavalier Microphone

An incredibly lightweight and compact wireless button microphone that captures high-fidelity audio.

Key Features: 9g Button Size | 48 kHz/24-bit | 40 Hours Battery

Check on Amazon

Herramientas esenciales para crear un visualizador de audio TML/CSS/JS

Antes de empezar a construir, asegúrese de tener preparadas algunas herramientas clave. Todo aquí es gratuito y apto para principiantes.

• Un navegador moderno (Chrome, Firefox o Edge)
• Un editor de código (VS Code, Sublime Text, etc.)
• Un archivo de audio local (MP3 o WAV)
• Conocimientos básicos de HTML y JavaScript
• Opcional: Un micrófono (como el LARK M2) para entrada en tiempo real

Empezaremos subiendo un archivo para visualizar y, a continuación, mostraremos cómo utilizar el micrófono.

¿Qué es un visualizador de audio?

Un visualizador de audio es una herramienta que escucha el sonido y lo dibuja como formas. Podrían ser barras, círculos, ondas o algo más. Las formas cambian en función del tono y el volumen. Los visualizadores leen la frecuencia y la amplitud en tiempo real y convierten esos datos en movimiento.

Hacen que el audio sea más atractivo, especialmente para podcasts, música o transmisiones en vivo.

Comprensión de la API de audio web

La API de audio web permite a JavaScript analizar y manipular el sonido. Le permite hacer cosas como:

• Reproducir archivos de audio
• Utilizar el micrófono
• Visualizar frecuencias
• Aplicar filtros y efectos

Utilizaremos AnalyserNode para leer datos de frecuencia en tiempo real y la API Canvas para dibujar barras que reaccionen a ella.

Tutorial completo para codificar un visualizador de audio con HTML/JS

Si es nuevo en HTML, no se preocupe. Vamos a repasar lo que hace este bloque de código para que sepa exactamente lo que está construyendo y por qué cada parte es importante.

Paso 1: declarar el tipo de documento e iniciar el documento HTML

Esta línea le indica al navegador que está escribiendo un documento HTML5. Siempre se coloca en la parte superior de su archivo HTML. A continuación, inicie el documento HTML con la etiqueta .

Paso 2: iniciar el documento HTML

Esto abre el contenedor principal para su página HTML. El atributo lang=”en” simplemente le indica al navegador (y a los motores de búsqueda) que su página está escrita en inglés.

Paso 3: sección de encabezado

Todo lo que hay dentro de la etiqueta contiene la configuración y los metadatos de su página web.

• : Esto asegura que su página sea compatible con todos los caracteres estándar, incluidos los símbolos especiales.
• : Esto vincula su página HTML a un archivo CSS externo, que controlará el aspecto de su visualizador.

Paso 4: contenido del cuerpo

Aquí es donde van todas las partes visibles e interactivas de su página web:

• Visualizador de audio

  : Un encabezado. Esto aparece en la parte superior de la página para que los usuarios sepan para qué sirve la herramienta.
• : Esto crea un botón de carga de archivos. Cuando el usuario hace clic en él, puede elegir un archivo de audio de su ordenador. Así es como alimentaremos el sonido al visualizador.
• : Esta es el área de dibujo. El JavaScript que escriba más adelante utilizará este lienzo para dibujar barras y formas coloridas que se mueven con el audio.
• : Esto carga su archivo JavaScript. Ahí es donde vive toda la lógica del visualizador, incluyendo la reproducción del sonido y la animación de las barras.

Paso 5: cerrar el HTML

Esto simplemente termina su documento HTML mientras añade una entrada de archivo y un lienzo para dibujar el visual.

Paso 6: dar estilo a la página (style.css)

Esta parte de su proyecto controla el aspecto de su página. No estamos cambiando cómo funciona nada, solo cómo aparece a los usuarios. Vamos a desglosarlo paso a paso.

El estilo del cuerpo

body {

background-color: #111;

color: white;

font-family: Arial, sans-serif;

text-align: center;

}

• background-color: #111; Esto le da a toda la página un fondo gris oscuro (casi negro). Ayuda a que las coloridas barras de audio destaquen.
• color: white;
  Todo el texto de la página (como el encabezado) aparecerá en blanco.
• font-family: Arial, sans-serif;
  Establece el texto para que utilice primero la fuente Arial. Si no está disponible, recurre a una fuente sans-serif genérica. Esto mantiene el texto con un aspecto limpio y moderno.
• text-align: center;
  Esto centra el encabezado y otros elementos de texto en el medio de la página.

El estilo del lienzo

canvas {

background-color: black;

margin-top: 20px;

display: block;

margin-left: auto;

margin-right: auto;

border: 2px solid #444;

}

• background-color: black;
  Establece el lienzo (el área donde ocurre la animación) en negro puro, lo que le da a su visualizador un aspecto elegante.
• margin-top: 20px;
  Añade espacio entre el lienzo y el encabezado o la entrada de archivo.
• display: block;
  Asegura que el lienzo sea tratado como un elemento de nivel de bloque para que pueda darle estilo correctamente.
• margin-left: auto;
  margin-right: auto;
  Estas dos líneas centran horizontalmente el lienzo en la página.
  
• border: 2px solid #444;
  Dibuja un borde delgado de color gris oscuro alrededor del lienzo. Esto le da al visualizador una apariencia enmarcada y pulida.

Paso 7: añadir el JavaScript (app.js)

Estas líneas toman elementos de su HTML:

• fileInput es el selector de archivos
• canvas es donde aparecerá la animación
• ctx es el contexto de dibujo. Nos permite dibujar en el lienzo utilizando formas 2D

Paso 8: establecer el tamaño del lienzo

Esto establece las dimensiones del lienzo a 800 píxeles de ancho y 300 píxeles de alto.

Paso 9: escuchar la carga de archivos

Esta línea le dice al navegador: “Cuando alguien suba un archivo de audio, ejecute el código dentro de esta función”.

Paso 10: configurar el contexto de audio

Esto crea un nuevo contexto de audio. Es un entorno especial donde el sonido puede ser analizado o modificado.

Paso 11: cargar el archivo

Esto obtiene el archivo que el usuario seleccionó y configura un lector para decodificarlo.

Paso 12: decodificar el archivo de audio

Cuando el archivo se carga, esta función decodifica los datos de audio en un formato que el navegador puede entender.

Paso 13: crear la fuente de audio

Esto crea una nueva fuente de audio y la conecta al audio decodificado.

Paso 14: crear el analizador

Aquí, el AnalyserNode está configurado para leer datos de frecuencia. fftSize controla cuán detallada es la lectura. El dataArray almacenará esos valores de frecuencia como números que podemos utilizar para dibujar visuales.

Paso 15: conectar los nodos

Esto conecta todo en una cadena:

1. La fuente envía sonido al analizador.
2. El analizador envía sonido a los altavoces.
3. La fuente comienza a reproducirse.

Paso 16: la función de animación

Esta función dibuja las barras y se llama a sí misma continuamente, creando un bucle que se ejecuta unas 60 veces por segundo.

Paso 17: obtener datos de frecuencia

Esto llena el dataArray con valores de frecuencia de 0 a 255.

Paso 18: limpiar el lienzo

Estas líneas pintan el lienzo de negro antes de dibujar nuevas barras, para que no se produzca un desorden visual.

Paso 19: configurar las dimensiones de la barra

Calculamos cuán ancha debe ser cada barra, luego comenzamos a dibujar desde la izquierda (x = 0).

Paso 20: dibujar las barras

La altura de cada barra se basa en el valor de frecuencia. El color cambia ligeramente dependiendo de la altura, creando un efecto animado genial.

• ctx.fillRect() dibuja cada rectángulo.
• Movemos x hacia adelante cada vez para espaciar las barras uniformemente.

Paso 21: iniciar la animación

Esto inicia la función de animación una vez que se reproduce el audio.

Paso 22: leer los datos de audio

Finalmente, esta línea le dice al lector que comience a procesar el archivo de audio cargado.

Cómo utilizar un micrófono para la visualización de audio en vivo

Aquí le mostramos cómo capturar sonido en vivo en lugar de un archivo:

Aquí es donde el LARK M2 brilla. Es inalámbrico, ligero y ofrece un audio limpio y equilibrado. Cuando está visualizando sonido en vivo, la calidad del micrófono importa. El LARK M2 ayuda a evitar las interrupciones y los picos de ruido.

Archivo vs. Micrófono: ¿Cuál debería utilizar?

Extra: pruebe un visualizador de audio circular para una apariencia única

¿Quiere algo diferente? Pruebe este visual radial:

Esto crea un anillo de puntos pulsantes, ideal para música o pistas de meditación.

Cómo dar estilo y personalizar su visualizador de audio

• Pruebe los degradados con ctx.createLinearGradient()
• Haga que el lienzo cambie de tamaño según el tamaño de la ventana
• Añada botones de pausa/reproducción para el control del usuario
• Grabe la pantalla para convertirla en un vídeo
• Utilice ctx.globalAlpha para los rastros de desvanecimiento

Del código a la web: publique su visualizador fácilmente

¿Quiere compartir su trabajo?

1. Aloje su trabajo de forma gratuita en GitHub Pages o Netlify
2. Suba su HTML, CSS y JS
3. Enlace a su página en vivo
4. Extra: añada audio y marca visual para hacerlo personal

Conclusión

¡Acaba de construir su propio visualizador de audio en funcionamiento! Tanto si utiliza archivos como un micrófono en vivo como el Hollyland LARK M2, ahora tiene un proyecto que da vida al sonido.

Ha aprendido a:

• Utilizar la API de audio web para analizar el sonido
• Dibujar visuales en el lienzo
• Capturar sonido de un archivo o un micrófono
• Crear animaciones de barras y circulares

Ahora vaya a experimentar. Pruebe nuevas formas, combine herramientas o conéctelo a aplicaciones de música. Las posibilidades creativas son infinitas.

Preguntas frecuentes

1. ¿Puedo utilizar esto con aplicaciones de transmisión de música?

No directamente. Debido a la seguridad del navegador y a los derechos de autor, no puede acceder a las transmisiones de aplicaciones como Spotify. En su lugar, utilice archivos descargados o una entrada de micrófono.

2. ¿Funcionará esto en dispositivos móviles?

Principalmente, sí. Pero algunos navegadores limitan la reproducción de audio y el acceso al micrófono. Es mejor probar primero en un escritorio y luego ajustarlo para dispositivos móviles.

3. ¿Cómo puedo guardar esto como un vídeo?

Utilice un software de grabación de pantalla como OBS o Loom. A continuación, puede editar el visualizador en vídeos musicales, carretes o intros.