സൗജന്യ ഓഡിയോ സ്പെക്ട്രം അനലൈസർ

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

ഓഡിയോ സ്പെക്ട്രം അനലൈസർ Web Audio API-യുടെ AnalyserNode ഉപയോഗിച്ച് പൂർണ്ണമായും നിങ്ങളുടെ ബ്രൗസറിൽ പ്രവർത്തിക്കുന്നു, ഇത് ഒരു ഫയലിൽ നിന്നോ മൈക്രോഫോണിൽ നിന്നോ ഉള്ള ഓഡിയോ ഡാറ്റയിൽ തത്സമയ FFT (Fast Fourier Transform) കണക്കാക്കുന്നു. ഓരോ ഫ്രെയിമും കൈകൊണ്ട് എഴുതിയ Canvas 2D കോഡ് ഉപയോഗിച്ചാണ് വരയ്ക്കുന്നത് — ഒരു വിഷ്വലൈസേഷൻ ലൈബ്രറിയും ഉൾപ്പെട്ടിട്ടില്ല, ഓഡിയോ ഒരിക്കലും നിങ്ങളുടെ ഉപകരണം വിട്ട് പോകില്ല.

1. 1
   ഓഡിയോ ഡീകോഡ് ചെയ്ത് റൂട്ട് ചെയ്യപ്പെടുന്നു

   നിങ്ങൾ ഒരു ഫയൽ ലോഡ് ചെയ്യുമ്പോൾ, Web Audio API അതിനെ ഒരു AudioBuffer ആയി ഡീകോഡ് ചെയ്ത് ഒരു MediaElementAudioSourceNode വഴി ഒരു AnalyserNode-ലേക്ക് റൂട്ട് ചെയ്യുന്നു. മൈക്രോഫോൺ ഇൻപുട്ടിന്, getUserMedia() സ്ട്രീം പിടിച്ചെടുത്ത് പകരം ഒരു MediaStreamAudioSourceNode വഴി ഫീഡ് ചെയ്യുന്നു — echo cancellation, noise suppression, auto-gain എന്നിവ എല്ലാം ഓഫ് ചെയ്ത് നിങ്ങൾ അസംസ്കൃത സിഗ്നൽ കാണുന്നു.
2. 2
   AnalyserNode ഓരോ ഫ്രെയിമിലും FFT പ്രവർത്തിപ്പിക്കുന്നു

   ഓരോ ആനിമേഷൻ ഫ്രെയിമിലും (requestAnimationFrame വഴി), കോഡ് dBFS-ൽ നിലവിലെ FFT മാഗ്നിറ്റ്യൂഡ് സ്പെക്ട്രം വായിക്കാൻ getFloatFrequencyData() വിളിക്കുന്നു, അസംസ്കൃത വേവ്ഫോം സാമ്പിളുകൾക്ക് getFloatTimeDomainData() വിളിക്കുന്നു. FFT വലുപ്പം 2048 മുതൽ 16384 ബിന്നുകൾ വരെ കോൺഫിഗർ ചെയ്യാവുന്നതാണ്, 44.1 kHz-ൽ ഏകദേശം 2.7 Hz/ബിൻ വരെ സൂക്ഷ്മമായ ഫ്രീക്വൻസി റെസൊല്യൂഷൻ നൽകുന്നു.
3. 3
   Canvas 2D തിരഞ്ഞെടുത്ത കാഴ്ച റെൻഡർ ചെയ്യുന്നു

   Analyzer കാഴ്ച FFT ബിന്നുകളെ ഒരു ലോഗ്-ഫ്രീക്വൻസി (20 Hz–20 kHz) X ആക്സിസിലേക്കും dBFS Y ആക്സിസിലേക്കും മാപ്പ് ചെയ്യുന്നു, സ്പെക്ട്രം ഒരു നിറച്ച ലൈനായി വരയ്ക്കുന്നു, ഒരു ക്ഷയിക്കുന്ന പീക്ക്-ഹോൾഡ് ട്രെയ്സ് ഓവർലേ ചെയ്യുന്നു. പ്രധാന ഫ്രീക്വൻസി പീക്ക് ബിന്നിന് ചുറ്റും പരാബോളിക് ഇന്റർപൊളേഷൻ ഉപയോഗിച്ച് കണ്ടെത്തി, പിന്നെ സെന്റ് വ്യതിയാനത്തോടെ ഏറ്റവും അടുത്ത equal-tempered സംഗീത നോട്ടിലേക്ക് (A4=440 Hz) മാറ്റുന്നു. Spectrogram കാഴ്ച ഓരോ ഫ്രെയിമിലും കാൻവാസ് ഒരു പിക്സൽ ഇടത്തേക്ക് സ്ക്രോൾ ചെയ്യുകയും ഒരു inferno-ശൈലി കളർ റാമ്പ് ഉപയോഗിച്ച് ഒരു പുതിയ കോളം വരയ്ക്കുകയും ചെയ്യുന്നു. Artistic കാഴ്ച ബാർ, വേവ്ഫോം, അല്ലെങ്കിൽ വൃത്താകൃതി അലങ്കാര മോഡുകൾക്കായി ബൈറ്റ്-റെസൊല്യൂഷൻ ഫ്രീക്വൻസി അല്ലെങ്കിൽ ടൈം-ഡൊമെയ്ൻ ഡാറ്റ ഉപയോഗിക്കുന്നു.
4. 4
   Canvas, MediaRecorder വഴി എക്സ്പോർട്ട് ചെയ്യുന്നു

   ഒരു PNG സേവ് ചെയ്യുന്നത് നിലവിലെ ഫ്രെയിം എൻകോഡ് ചെയ്യാൻ canvas.toBlob() വിളിക്കുന്നു. ഒരു വീഡിയോ റെക്കോർഡ് ചെയ്യുന്നത് ഒരു MediaStreamAudioDestinationNode-ൽ നിന്നുള്ള ഒരു ഓഡിയോ ടാപ്പുമായി സംയോജിപ്പിച്ച canvas.captureStream(30) ഉപയോഗിക്കുന്നു, WebM അല്ലെങ്കിൽ MP4 നിർമ്മിക്കുന്ന ഒരു MediaRecorder-ലേക്ക് പൈപ്പ് ചെയ്യുന്നു. WAV എക്സ്പോർട്ട് ഒരു DataView ഉപയോഗിച്ച് AudioBuffer-ൽ നിന്ന് ഒരു 16-ബിറ്റ് PCM RIFF ഫയൽ കൈകൊണ്ട് എൻകോഡ് ചെയ്യുന്നു — ബാഹ്യ എൻകോഡർ ഇല്ല.

അനുബന്ധ ടൂളുകൾ