spectro

? Espectro

Spectro es un generador de espectrograma de audio en tiempo real para la web. Puede visualizar el sonido desde su micrófono o archivos de audio en su dispositivo.

Uso

Dirígete aquí para comenzar a usar Spectro.

Para comenzar a generar un espectrograma, puede:

• Haga clic en el ? Grabe desde el botón MIC para comenzar a generar un espectrograma desde su micrófono.

  Si desea grabar audio desde la salida de audio de su dispositivo, puede habilitar 'Mezcla estéreo' en Windows o usar Blackhole en MacOS y luego configurar este dispositivo como el dispositivo de entrada predeterminado de su navegador.

• Haga clic en el ? Reproduzca el botón de archivo de audio para comenzar a generar un espectrograma desde un archivo de audio en su dispositivo. Esto también reproducirá el archivo de audio seleccionado.

  Se puede reproducir cualquier formato de audio compatible con su navegador.

El espectrograma se genera de derecha a izquierda , con el audio más reciente que aparece a la derecha y más antigua de la izquierda.

También hay ⚙ opciones disponibles para controlar la apariencia del espectrograma:

• ? La sensibilidad controla cuán sensible es el espectrograma para el audio. Cambiarlo tiene el mismo efecto que cambiar el volumen del audio.
• ? El contraste aplica escala logarítmica al espectrograma para agregar contraste con la imagen. Cambiarlo puede ayudar a producir una mejor imagen dependiendo del audio que se analice.
• ? Zoom controla cómo aparece el zoom en el espectrograma a lo largo del eje de tiempo.
• ? Mínimo y max. Control de frecuencia El rango de frecuencias para mostrar en el espectrograma. Las frecuencias más bajas aparecen en la parte inferior del espectrograma y las frecuencias más altas en la parte superior.
• ? La escala de frecuencia controla la escala para aplicarse al eje de frecuencia del espectrograma. 'Lineal' significa que todas las frecuencias se representan de manera uniforme, mientras que 'MEL' da una apariencia más natural al dar más peso a frecuencias más bajas.
• ? El color controla el esquema de color para mostrar el espectrograma con.

Puede hacer clic en el botón ⏹ parada para dejar de generar el espectrograma. Si reproduce un archivo de audio, el espectrograma se detendrá automáticamente al final de la pista.

❓ Preguntas frecuentes

¿Qué es un espectrograma?

Un espectrograma es una imagen producida a partir del sonido. Visualiza las frecuencias presentes en el sonido con el tiempo, con el tiempo representado a lo largo del eje horizontal, la frecuencia a lo largo del eje vertical y el volumen de la frecuencia por color.

Por ejemplo, si generara un espectrograma de sí mismo silbando, vería una línea brillante en el tono del silbato.

¿Con qué navegadores funciona Spectro?

Las últimas versiones de Chrome, Firefox y Safari funcionan con Spectro. Cualquier otro navegador basado en Chromium como la nueva versión de Microsoft Edge también debería funcionar.

¿Cómo funciona Spectro?

¡Aquí hay una publicación de blog que lo describe todo! Una visión general rápida:

• La entrada de audio se divide en marcos de 4096 muestras, que se superponen cada 1024 muestras. Elegí 4096 como tamaño de mi ventana, ya que parecía ser la mejor compensación entre la resolución de tiempo y frecuencia; eventualmente podría hacerlo configurable.
• Estos marcos superpuestos se vistan en la ventana utilizando una función Blackman-Harris de siete períodos, que decidí, ya que parecía dar la mayor claridad visual.
• Luego, las ventanas se ejecutan a través de una transformación rápida de Fourier (usando JSFFT) en un trabajador web dedicado, y la norma de cada contenedor de frecuencia se toma como base del espectrograma.
• Estos datos de espectrograma sin procesar se insertan en una cola circular, que tiene una capacidad igual al ancho de la imagen del espectrograma.
• Los datos del espectrograma sin procesar se renderizan a la pantalla con WebGL, utilizando un sombreador para realizar rápidamente toda la escala, la colorización y otros ajustes de imágenes directamente en la GPU. Solo se cargan nuevos datos de espectrograma sin procesar en la GPU cada cuadro para mejorar el rendimiento en lugar de hacer una carga completa.
• El panel de configuración utiliza React y Material-UI (que representa la mayor parte del tamaño del paquete?).

?desarrollo

Instalar dependencias:

 npm install

Iniciar webpack-dev-server:

 npm start

Construye un paquete de producción:

 npm run build

Realizar comprobación de tipo TypeScript:

 npm run type-check

Licencia

Spectro se publica bajo los términos de la licencia MIT.