Gratis Audiospectrumanalyzer

Hoe het werkt

De audiospectrumanalyzer draait volledig in je browser met de AnalyserNode van de Web Audio API, die een realtime FFT (Fast Fourier Transform) berekent op audio uit een bestand of microfoon. Elk frame wordt getekend met zelfgeschreven Canvas 2D-code — er komt geen visualisatiebibliotheek aan te pas en er verlaat geen audio je apparaat.

1. 1
   Audio wordt gedecodeerd en doorgestuurd

   Als je een bestand laadt, decodeert de Web Audio API het tot een AudioBuffer en stuurt het via een MediaElementAudioSourceNode naar een AnalyserNode. Voor microfooninvoer vangt getUserMedia() de stream op en voert die in plaats daarvan via een MediaStreamAudioSourceNode in — met echo-onderdrukking, ruisonderdrukking en automatische versterking uitgeschakeld, zodat je het ruwe signaal ziet.
2. 2
   AnalyserNode voert elk frame de FFT uit

   Bij elk animatieframe (via requestAnimationFrame) roept de code getFloatFrequencyData() aan om het huidige FFT-magnitudespectrum in dBFS te lezen, en getFloatTimeDomainData() voor de ruwe golfvormsamples. De FFT-grootte is instelbaar van 2048 tot 16384 bins, wat een frequentieresolutie tot ongeveer 2,7 Hz/bin bij 44,1 kHz geeft.
3. 3
   Canvas 2D tekent de gekozen weergave

   De analyseweergave zet FFT-bins uit op een logaritmische frequentie-as (20 Hz–20 kHz) en een dBFS-as, tekent het spectrum als gevulde lijn en legt er een langzaam dalende piekvasthoudlijn overheen. De dominante frequentie wordt nauwkeurig bepaald met parabolische interpolatie rond de piekbin en omgezet naar de dichtstbijzijnde gelijkzwevend gestemde noot (A4=440 Hz), met de afwijking in cent in de uitlezing. De spectrogramweergave schuift het canvas elk frame één pixel naar links en tekent een nieuwe kolom met een kleurverloop in inferno-stijl. De artistieke weergave gebruikt frequentie- of tijddomeingegevens met byteresolutie voor decoratieve modi met balken, golfvorm of cirkel.
4. 4
   Exporteren via Canvas en MediaRecorder

   Een PNG opslaan roept canvas.toBlob() aan om het huidige frame te coderen. Een video opnemen gebruikt canvas.captureStream(30) samen met een audiotap uit een MediaStreamAudioDestinationNode, doorgestuurd naar een MediaRecorder die WebM of MP4 maakt. WAV-export codeert met de hand een 16-bit PCM RIFF-bestand uit de AudioBuffer met een DataView — zonder externe encoder.

Gerelateerde tools