Libreng Audio Spectrum Analyzer

Paano ito Gumagana

Buong tumatakbo sa iyong browser ang Audio Spectrum Analyzer gamit ang AnalyserNode ng Web Audio API, na nagkakalkula ng real-time na FFT (Fast Fourier Transform) sa audio data mula sa file o mikropono. Iginuguhit ang bawat frame gamit ang hand-written na Canvas 2D code — walang visualization library, at walang audio na umaalis sa device mo.

1. 1
   Dine-decode at ini-route ang audio

   Kapag nag-load ka ng file, dine-decode ito ng Web Audio API sa isang AudioBuffer at ini-route sa isang MediaElementAudioSourceNode papunta sa isang AnalyserNode. Para sa input mula sa mikropono, kinukuha ng getUserMedia() ang stream at ipinapasa sa isang MediaStreamAudioSourceNode — na naka-disable ang echo cancellation, noise suppression, at auto-gain para makita mo ang raw na signal.
2. 2
   Pinapatakbo ng AnalyserNode ang FFT bawat frame

   Sa bawat animation frame (sa pamamagitan ng requestAnimationFrame), tinatawag ng code ang getFloatFrequencyData() para basahin ang kasalukuyang FFT magnitude spectrum sa dBFS, at ang getFloatTimeDomainData() para sa raw na waveform sample. Puwedeng i-configure ang FFT size mula 2048 hanggang 16384 bin, na nagbibigay ng frequency resolution na kasing-pino ng mga 2.7 Hz/bin sa 44.1 kHz.
3. 3
   Nire-render ng Canvas 2D ang napiling view

   Ina-map ng Analyzer view ang mga FFT bin sa isang log-frequency (20 Hz–20 kHz) na X axis at dBFS na Y axis, iginuguhit ang spectrum bilang punong linya, at nagpapatong ng unti-unting kumukupas na peak-hold trace. Tinutukoy ang dominanteng frequency gamit ang parabolic interpolation sa paligid ng peak bin, pagkatapos ay kino-convert sa pinakamalapit na equal-tempered na musical note (A4=440 Hz) na may cent deviation sa readout. Ini-scroll ng Spectrogram view ang canvas nang isang pixel pakaliwa bawat frame at nagpipinta ng bagong column gamit ang inferno-style na color ramp. Gumagamit ang Artistic view ng byte-resolution na frequency o time-domain data para sa bar, waveform, o circular na dekoratibong mode.
4. 4
   Pag-export gamit ang Canvas at MediaRecorder

   Ang pag-save ng PNG ay tumatawag sa canvas.toBlob() para i-encode ang kasalukuyang frame. Ang pag-record ng video ay gumagamit ng canvas.captureStream(30) kasama ang audio tap mula sa isang MediaStreamAudioDestinationNode, na ipinapasa sa MediaRecorder na gumagawa ng WebM o MP4. Ang WAV export ay mano-manong nag-e-encode ng 16-bit PCM RIFF file mula sa AudioBuffer gamit ang DataView — walang panlabas na encoder.

Mga Kaugnay na Tool