Analyzátor audio spektra zadarmo

Ako to funguje

Analyzátor zvukového spektra beží výhradne vo vašom prehliadači pomocou uzla AnalyserNode z Web Audio API, ktorý počíta FFT (rýchlu Fourierovu transformáciu) v reálnom čase nad zvukovými dátami zo súboru alebo mikrofónu. Každá snímka sa kreslí pomocou ručne napísaného kódu Canvas 2D — nie je zapojená žiadna vizualizačná knižnica a žiadny zvuk neopúšťa vaše zariadenie.

1. 1
   Zvuk sa dekóduje a smeruje

   Keď načítate súbor, Web Audio API ho dekóduje do AudioBuffer a nasmeruje ho cez MediaElementAudioSourceNode do AnalyserNode. Pre vstup z mikrofónu namiesto toho getUserMedia() zachytí stream a posunie ho cez MediaStreamAudioSourceNode — s vypnutým potlačením ozveny, potlačením šumu a automatickým ziskom, aby ste videli surový signál.
2. 2
   AnalyserNode počíta FFT pri každej snímke

   Pri každej animačnej snímke (cez requestAnimationFrame) kód volá getFloatFrequencyData() na čítanie aktuálneho FFT amplitúdového spektra v dBFS a getFloatTimeDomainData() pre surové vzorky waveformy. Veľkosť FFT je nastaviteľná od 2048 do 16384 bodov, čo dáva frekvenčné rozlíšenie jemné až na približne 2,7 Hz/bod pri 44,1 kHz.
3. 3
   Canvas 2D vykresľuje zvolený pohľad

   Pohľad Analyzátor mapuje FFT body na logaritmickú frekvenčnú (20 Hz–20 kHz) os X a os Y v dBFS, vykresľuje spektrum ako vyplnenú čiaru a prekrýva ho doznievajúcou stopou vrcholovej hodnoty (peak-hold). Dominantná frekvencia sa presne určí pomocou parabolickej interpolácie okolo vrcholového bodu a potom sa prevedie na najbližší rovnomerne temperovaný hudobný tón (A4=440 Hz) s odchýlkou v centoch zobrazenou v hodnote. Pohľad Spektrogram posúva plátno o jeden pixel doľava pri každej snímke a maľuje nový stĺpec pomocou farebnej škály v štýle inferno. Umelecký pohľad používa frekvenčné alebo časové dáta v bajtovom rozlíšení pre ozdobné režimy stĺpcov, waveformy alebo kruhu.
4. 4
   Export cez Canvas a MediaRecorder

   Uloženie PNG volá canvas.toBlob() na zakódovanie aktuálnej snímky. Nahrávanie videa používa canvas.captureStream(30) v kombinácii so zvukovým odberom z MediaStreamAudioDestinationNode, ktorý sa posiela do MediaRecorder produkujúceho WebM alebo MP4. Export WAV ručne zakóduje 16-bitový PCM RIFF súbor z AudioBuffer pomocou DataView — bez externého kodéra.

Súvisiace nástroje