Audio Espektro Analizatzailea doan

Nola Funtzionatzen Du

Audio Espektro Analizatzaileak erabat zure nabigatzailean funtzionatzen du Web Audio API-ren AnalyserNode erabiliz, denbora errealeko FFT (Fourier Transformazio Azkarra) bat kalkulatzen duena fitxategi edo mikrofono baten audio-daturen gainean. Fotograma bakoitza eskuz idatzitako Canvas 2D kodearekin marrazten da — ez dago bistaratze-liburutegirik tartean, eta audioa ez da inoiz zure gailutik ateratzen.

1. 1
   Audioa deskodetu eta bideratzen da

   Fitxategi bat kargatzen duzunean, Web Audio API-k AudioBuffer batean deskodetzen du eta MediaElementAudioSourceNode baten bidez AnalyserNode batera bideratzen du. Mikrofono-sarrerarako, getUserMedia()-k jarioa harrapatzen du eta MediaStreamAudioSourceNode baten bidez elikatzen du horren ordez — oihartzun-ezeztapena, zarata-ezabaketa eta irabazi automatikoa guztiak desgaituta seinale gordina ikus dezazun.
2. 2
   AnalyserNode-k FFT-a exekutatzen du fotograma bakoitzean

   Animazio-fotograma bakoitzean (requestAnimationFrame bidez), kodeak getFloatFrequencyData() deitzen du uneko FFT magnitude-espektroa dBFS-etan irakurtzeko, eta getFloatTimeDomainData() uhin-forma gordinaren laginetarako. FFT tamaina 2048tik 16384 bin-etara konfiguratu daiteke, 2,7 Hz/bin inguruko maiztasun-bereizmena emanez 44,1 kHz-tan.
3. 3
   Canvas 2D-k aukeratutako ikuspegia errendatzen du

   Analizatzailearen ikuspegiak FFT bin-ak maiztasun-erregistro logaritmikoko (20 Hz–20 kHz) X ardatzean eta dBFS Y ardatzean kartografiatzen ditu, espektroa lerro beteta marraztuz, eta gailur-eusteko trazu ahultzen bat gainjartzen du. Maiztasun nagusia interpolazio parabolikoaren bidez zehazten da gailur-bin-aren inguruan, gero berdin-tenperatutako nota musikal hurbilenera bihurtuta (A4=440 Hz) cent-eko desbideraketarekin irakurketan erakutsita. Espektrograma ikuspegiak lauki bat pixel bat ezkerrera korritzen du fotograma bakoitzean eta zutabe berri bat pintatzen du inferno-estiloko kolore-erregua erabiliz. Ikuspegi Artistikoak byte-bereizmeneko maiztasun edo denbora-domeinuko datuak erabiltzen ditu barra, uhin-forma edo modu dekoratibo zirkularretarako.
4. 4
   Esportazioa Canvas eta MediaRecorder bidez

   PNG bat gordetzeak canvas.toBlob() deitzen du uneko fotograma kodetzeko. Bideo bat grabatzeak canvas.captureStream(30) erabiltzen du MediaStreamAudioDestinationNode baten audio-hargunearekin konbinatuta, MediaRecorder batera bideratuta WebM edo MP4 sortzeko. WAV esportazioak eskuz kodetzen du 16 biteko PCM RIFF fitxategi bat AudioBuffer-etik DataView erabiliz — kanpo kodetzailerik gabe.

Erlazionatutako tresnak