Analizues Spektri Audio Falas

Si funksionon

Analizuesi i Spektrit Audio funksionon tërësisht në shfletuesin tënd duke përdorur AnalyserNode të API-së Web Audio, i cili llogarit një FFT (Transformim i Shpejtë Furie) në kohë reale mbi të dhëna audio nga një skedar ose mikrofon. Çdo kuadro vizatohet me kod Canvas 2D të shkruar me dorë — nuk përfshihet asnjë bibliotekë vizualizimi, dhe asnjë audio nuk largohet nga pajisja jote.

1. 1
   Audioja dekodohet dhe drejtohet

   Kur ngarkon një skedar, API-ja Web Audio e dekodon në një AudioBuffer dhe e drejton përmes një MediaElementAudioSourceNode drejt një AnalyserNode. Për hyrje mikrofoni, getUserMedia() e kap rrjedhën dhe e ushqen përmes një MediaStreamAudioSourceNode në vend të kësaj — me anulim jehone, shtypje zhurme, dhe fitim automatik të gjitha të çaktivizuara që të shohësh sinjalin e papërpunuar.
2. 2
   AnalyserNode xhiron FFT-në në çdo kuadro

   Në çdo kuadro animacioni (përmes requestAnimationFrame), kodi thërret getFloatFrequencyData() për të lexuar spektrin aktual të magnitudës FFT në dBFS, dhe getFloatTimeDomainData() për mostrat e papërpunuara të valëformës. Madhësia FFT konfigurohet nga 2048 deri 16384 bin, duke dhënë rezolucion frekuence deri në rreth 2.7 Hz/bin në 44.1 kHz.
3. 3
   Canvas 2D vizaton pamjen e zgjedhur

   Pamja Analizues harton binët FFT në një aks X log-frekuencë (20 Hz–20 kHz) dhe një aks Y dBFS, vizaton spektrin si një vijë të mbushur, dhe mbivendos një gjurmë kulmi që shuhet ngadalë. Frekuenca dominuese lokalizohet duke përdorur interpolim parabolik rreth binit të kulmit, pastaj konvertohet në notën muzikore më të afërt me temperim të barabartë (A4=440 Hz) me devijim centësh të shfaqur në lexim. Pamja Spektrogram e lëviz canvas-in një piksel majtas në çdo kuadro dhe vizaton një kolonë të re duke përdorur një gamë ngjyrash stil-inferno. Pamja Artistike përdor të dhëna frekuence ose kohe me rezolucion byte për mënyra dekorative shufra, valëformë, ose rrethore.
4. 4
   Eksportim përmes Canvas dhe MediaRecorder

   Ruajtja e një PNG thërret canvas.toBlob() për të koduar kuadron aktuale. Regjistrimi i një videoje përdor canvas.captureStream(30) të kombinuar me një prekje audio nga një MediaStreamAudioDestinationNode, drejtuar në një MediaRecorder që prodhon WebM ose MP4. Eksportimi WAV kodon me dorë një skedar RIFF PCM 16-bit nga AudioBuffer duke përdorur një DataView — pa kodifikues të jashtëm.

Mjete të ngjashme