Gratis Oudiospektrumontleder

Hoe dit werk

Die Oudiospektrum-ontleder loop heeltemal in jou blaaier met die Web Audio API se AnalyserNode, wat 'n intydse FFT (Fast Fourier Transform) op oudiodata van 'n lêer of mikrofoon bereken. Elke raam word met handgeskrewe Canvas 2D-kode geteken — geen visualiseringsbiblioteek is betrokke nie, en geen oudio verlaat jou toestel nie.

1. 1
   Oudio word gedekodeer en gerooteer

   Wanneer jy 'n lêer laai, dekodeer die Web Audio API dit in 'n AudioBuffer en rooteer dit deur 'n MediaElementAudioSourceNode na 'n AnalyserNode. Vir mikrofoontoevoer vang getUserMedia() die stroom vas en voer dit eerder deur 'n MediaStreamAudioSourceNode — met eggo-kansellasie, geraasonderdrukking, en outo-aanwins almal gedeaktiveer sodat jy die rou sein sien.
2. 2
   AnalyserNode loop die FFT elke raam

   By elke animasieraam (via requestAnimationFrame) roep die kode getFloatFrequencyData() aan om die huidige FFT-amplitudespektrum in dBFS te lees, en getFloatTimeDomainData() vir die rou golfvormmonsters. Die FFT-grootte is instelbaar van 2048 tot 16384 bakke, wat frekwensieresolusie so fyn as omtrent 2.7 Hz/bak by 44.1 kHz gee.
3. 3
   Canvas 2D render die gekose aansig

   Die Ontleder-aansig karteer FFT-bakke op 'n log-frekwensie- (20 Hz–20 kHz) X-as en 'n dBFS Y-as, teken die spektrum as 'n gevulde lyn, en lê 'n vervalende piekvashouspoor oor. Dominante frekwensie word met paraboliese interpolasie rondom die piekbak bepaal, dan omgeskakel na die naaste gelykgetemperde musieknoot (A4=440 Hz) met sentafwyking in die aflesing gewys. Die Spektrogram-aansig rol die canvas elke raam een pixel na links en verf 'n nuwe kolom met 'n inferno-styl kleurskaal. Die Artistieke aansig gebruik greepresolusie-frekwensie- of tydgebiedsdata vir staaf-, golfvorm- of sirkelvormige dekoratiewe modusse.
4. 4
   Uitvoer via Canvas en MediaRecorder

   Om 'n PNG te stoor roep canvas.toBlob() aan om die huidige raam te enkodeer. Om 'n video op te neem gebruik canvas.captureStream(30) gekombineer met 'n oudiotap van 'n MediaStreamAudioDestinationNode, gevoer in 'n MediaRecorder wat WebM of MP4 produseer. WAV-uitvoer enkodeer met die hand 'n 16-bis PCM RIFF-lêer vanaf die AudioBuffer met 'n DataView — geen eksterne enkodeerder nie.

Verwante gereedskap