Analitzador d'espectre d'àudio de franc

Com funciona

L'Analitzador d'espectre d'àudio s'executa completament al teu navegador utilitzant l'AnalyserNode de la Web Audio API, que calcula una FFT (transformada ràpida de Fourier) en temps real sobre dades d'àudio d'un fitxer o micròfon. Cada fotograma es dibuixa amb codi Canvas 2D escrit a mà — no hi ha cap biblioteca de visualització implicada, i cap àudio surt del teu dispositiu.

1. 1
   L'àudio es descodifica i s'encamina

   Quan carregues un fitxer, la Web Audio API el descodifica en un AudioBuffer i l'encamina a través d'un MediaElementAudioSourceNode cap a un AnalyserNode. Per a l'entrada de micròfon, getUserMedia() captura el flux i l'alimenta a través d'un MediaStreamAudioSourceNode en canvi — amb la cancel·lació d'eco, la supressió de soroll i el guany automàtic tots desactivats perquè vegis el senyal brut.
2. 2
   L'AnalyserNode executa la FFT a cada fotograma

   A cada fotograma d'animació (via requestAnimationFrame), el codi crida getFloatFrequencyData() per llegir l'espectre de magnitud FFT actual en dBFS, i getFloatTimeDomainData() per a les mostres brutes de la forma d'ona. La mida de la FFT és configurable de 2048 a 16384 bins, donant una resolució de freqüència tan fina com uns 2,7 Hz/bin a 44,1 kHz.
3. 3
   Canvas 2D renderitza la vista triada

   La vista Analitzador mapeja els bins de la FFT en un eix X de freqüència logarítmica (20 Hz–20 kHz) i un eix Y de dBFS, dibuixa l'espectre com una línia plena, i superposa una traça de manteniment de pic amb decaïment. La freqüència dominant es localitza utilitzant interpolació parabòlica al voltant del bin de pic, i després es converteix a la nota musical de temperament igual més propera (A4=440 Hz) amb la desviació en cèntims mostrada a la lectura. La vista Espectrograma desplaça el canvas un píxel cap a l'esquerra a cada fotograma i pinta una nova columna utilitzant una rampa de color d'estil inferno. La vista Artística utilitza dades de freqüència o de domini temporal a resolució de byte per a modes decoratius de barres, forma d'ona o circular.
4. 4
   Exportació via Canvas i MediaRecorder

   Desar un PNG crida canvas.toBlob() per codificar el fotograma actual. Enregistrar un vídeo utilitza canvas.captureStream(30) combinat amb una presa d'àudio d'un MediaStreamAudioDestinationNode, canalitzat cap a un MediaRecorder que produeix WebM o MP4. L'exportació WAV codifica a mà un fitxer RIFF PCM de 16 bits a partir de l'AudioBuffer utilitzant un DataView — sense codificador extern.

Eines relacionades