Analizador de espectro de audio de balde

Como funciona

O Analizador de espectro de audio execútase enteiramente no teu navegador usando o AnalyserNode da Web Audio API, que calcula unha FFT (Transformada Rápida de Fourier) en tempo real sobre os datos de audio dun ficheiro ou micrófono. Cada fotograma debúxase con código Canvas 2D escrito a man — non se usa ningunha biblioteca de visualización, e ningún audio sae do teu dispositivo.

1. 1
   O audio decodifícase e encamíñase

   Cando cargas un ficheiro, a Web Audio API decodifícao nun AudioBuffer e encamíñao a través dun MediaElementAudioSourceNode a un AnalyserNode. Para a entrada do micrófono, getUserMedia() captura o fluxo e aliméntao a través dun MediaStreamAudioSourceNode no seu lugar — coa cancelación de eco, a supresión de ruído e a ganancia automática todas desactivadas para que vexas o sinal en bruto.
2. 2
   O AnalyserNode executa a FFT en cada fotograma

   En cada fotograma de animación (mediante requestAnimationFrame), o código chama a getFloatFrequencyData() para ler o espectro de magnitude FFT actual en dBFS, e a getFloatTimeDomainData() para as mostras da forma de onda en bruto. O tamaño da FFT é configurable de 2048 a 16384 bins, dando unha resolución de frecuencia tan fina como uns 2,7 Hz/bin a 44,1 kHz.
3. 3
   Canvas 2D renderiza a vista escollida

   A vista Analizador mapea os bins da FFT nun eixe X de frecuencia logarítmica (20 Hz–20 kHz) e un eixe Y de dBFS, debuxa o espectro como unha liña rechea e superpón un trazo de retención de picos decrecente. A frecuencia dominante localízase mediante interpolación parabólica arredor do bin do pico e despois convértese á nota musical temperada máis próxima (A4=440 Hz) coa desviación en centésimas mostrada na lectura. A vista Espectrograma despraza o lenzo un píxel á esquerda en cada fotograma e pinta unha nova columna usando unha gama de cores de estilo inferno. A vista Artística usa datos de frecuencia ou dominio temporal en resolución de byte para os modos decorativos de barras, forma de onda ou circular.
4. 4
   Exportación mediante Canvas e MediaRecorder

   Gardar un PNG chama a canvas.toBlob() para codificar o fotograma actual. Gravar un vídeo usa canvas.captureStream(30) combinado cunha toma de audio dun MediaStreamAudioDestinationNode, canalizado a un MediaRecorder que produce WebM ou MP4. A exportación WAV codifica a man un ficheiro RIFF PCM de 16 bits a partir do AudioBuffer usando un DataView — sen codificador externo.

Ferramentas relacionadas