Gratis Lydspektrum­analysator

Sådan fungerer det

Lydspektrumanalysatoren kører udelukkende i din browser med Web Audio API's AnalyserNode, som beregner en FFT (hurtig Fourier-transformation) i realtid på lyddata fra en fil eller mikrofon. Hvert billede tegnes med håndskrevet Canvas 2D-kode — der indgår intet visualiseringsbibliotek, og ingen lyd forlader din enhed.

1. 1
   Lyden afkodes og dirigeres

   Når du indlæser en fil, afkoder Web Audio API den til en AudioBuffer og sender den gennem en MediaElementAudioSourceNode til en AnalyserNode. Ved mikrofoninput fanger getUserMedia() streamen og sender den i stedet gennem en MediaStreamAudioSourceNode — med ekkoannullering, støjdæmpning og automatisk forstærkning slået fra, så du ser det rå signal.
2. 2
   AnalyserNode kører FFT'en for hvert billede

   For hvert animationsbillede (via requestAnimationFrame) kalder koden getFloatFrequencyData() for at læse det aktuelle FFT-amplitudespektrum i dBFS og getFloatTimeDomainData() for de rå bølgeformssamples. FFT-størrelsen kan indstilles fra 2048 til 16384 bins, hvilket giver en frekvensopløsning helt ned til cirka 2,7 Hz/bin ved 44,1 kHz.
3. 3
   Canvas 2D tegner den valgte visning

   Analysevisningen placerer FFT-bins på en logaritmisk frekvensakse (20 Hz–20 kHz) og en dBFS-akse, tegner spektret som en udfyldt linje og lægger en aftagende peak-hold-kurve ovenpå. Den dominerende frekvens bestemmes med parabolsk interpolation omkring peak-bin'en og omregnes derefter til nærmeste tone i ligesvævende temperatur (A4=440 Hz) med afvigelsen i cent vist i aflæsningen. Spektrogramvisningen ruller lærredet én pixel til venstre for hvert billede og maler en ny kolonne med en inferno-lignende farveskala. Den kunstneriske visning bruger frekvens- eller tidsdomænedata i byteopløsning til dekorative søjle-, bølgeforms- eller cirkeltilstande.
4. 4
   Eksport via Canvas og MediaRecorder

   Når du gemmer en PNG, kaldes canvas.toBlob() for at kode det aktuelle billede. Videooptagelse bruger canvas.captureStream(30) kombineret med et lydudtag fra en MediaStreamAudioDestinationNode, sendt ind i en MediaRecorder, der laver WebM eller MP4. WAV-eksport koder selv en 16-bit PCM RIFF-fil fra AudioBuffer'en med en DataView — uden ekstern encoder.

Relaterede værktøjer