ಉಚಿತ ಆಡಿಯೋ ಸ್ಪೆಕ್ಟ್ರಮ್ ಅನಲೈಜರ್

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಆಡಿಯೋ ಸ್ಪೆಕ್ಟ್ರಮ್ ಅನಲೈಸರ್ Web Audio API ನ AnalyserNode ಬಳಸಿ ಸಂಪೂರ್ಣವಾಗಿ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಇದು ಫೈಲ್ ಅಥವಾ ಮೈಕ್ರೊಫೋನ್‌ನಿಂದ ಆಡಿಯೋ ಡೇಟಾದ ಮೇಲೆ ನೈಜ-ಸಮಯದ FFT (ಫಾಸ್ಟ್ ಫೂರಿಯರ್ ಟ್ರಾನ್ಸ್‌ಫಾರ್ಮ್) ಲೆಕ್ಕಹಾಕುತ್ತದೆ. ಪ್ರತಿ ಫ್ರೇಮ್ ಅನ್ನು ಕೈಯಿಂದ ಬರೆದ 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 ಆಯ್ಕೆ ಮಾಡಿದ ವೀಕ್ಷಣೆಯನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ

   ಅನಲೈಸರ್ ವೀಕ್ಷಣೆ FFT ಬಿನ್‌ಗಳನ್ನು ಲಾಗ್-ಆವರ್ತನ (20 Hz–20 kHz) X ಅಕ್ಷ ಮತ್ತು dBFS Y ಅಕ್ಷದ ಮೇಲೆ ಮ್ಯಾಪ್ ಮಾಡುತ್ತದೆ, ಸ್ಪೆಕ್ಟ್ರಮ್ ಅನ್ನು ತುಂಬಿದ ರೇಖೆಯಾಗಿ ಎಳೆಯುತ್ತದೆ, ಮತ್ತು ಕ್ಷೀಣಿಸುವ ಪೀಕ್-ಹೋಲ್ಡ್ ಟ್ರೇಸ್ ಅನ್ನು ಅತಿಕ್ರಮಿಸುತ್ತದೆ. ಪ್ರಬಲ ಆವರ್ತನವನ್ನು ಪೀಕ್ ಬಿನ್ ಸುತ್ತ ಪ್ಯಾರಾಬೊಲಿಕ್ ಇಂಟರ್ಪೊಲೇಶನ್ ಬಳಸಿ ಗುರುತಿಸಲಾಗುತ್ತದೆ, ನಂತರ ರೀಡ್‌ಔಟ್‌ನಲ್ಲಿ ಸೆಂಟ್ ವಿಚಲನೆಯೊಂದಿಗೆ ಹತ್ತಿರದ ಸಮ-ಶ್ರುತಿ ಸಂಗೀತ ಸ್ವರಕ್ಕೆ (A4=440 Hz) ಪರಿವರ್ತಿಸಲಾಗುತ್ತದೆ. ಸ್ಪೆಕ್ಟ್ರೋಗ್ರಾಮ್ ವೀಕ್ಷಣೆ ಪ್ರತಿ ಫ್ರೇಮ್‌ನಲ್ಲಿ ಕ್ಯಾನ್ವಾಸ್ ಅನ್ನು ಒಂದು ಪಿಕ್ಸೆಲ್ ಎಡಕ್ಕೆ ಸ್ಕ್ರಾಲ್ ಮಾಡಿ inferno-ಶೈಲಿಯ ಬಣ್ಣ ರ್ಯಾಂಪ್ ಬಳಸಿ ಹೊಸ ಕಾಲಂ ಚಿತ್ರಿಸುತ್ತದೆ. ಕಲಾತ್ಮಕ ವೀಕ್ಷಣೆ ಬಾರ್, ವೇವ್‌ಫಾರ್ಮ್, ಅಥವಾ ವೃತ್ತಾಕಾರದ ಅಲಂಕಾರಿಕ ಮೋಡ್‌ಗಳಿಗೆ ಬೈಟ್-ರೆಸಲ್ಯೂಶನ್ ಆವರ್ತನ ಅಥವಾ ಸಮಯ-ಡೊಮೇನ್ ಡೇಟಾ ಬಳಸುತ್ತದೆ.
4. 4
   Canvas ಮತ್ತು MediaRecorder ಮೂಲಕ ರಫ್ತು

   PNG ಉಳಿಸುವುದು ಪ್ರಸ್ತುತ ಫ್ರೇಮ್ ಎನ್‌ಕೋಡ್ ಮಾಡಲು canvas.toBlob() ಅನ್ನು ಕರೆಯುತ್ತದೆ. ವೀಡಿಯೋ ರೆಕಾರ್ಡಿಂಗ್ MediaStreamAudioDestinationNode ನಿಂದ ಆಡಿಯೋ ಟ್ಯಾಪ್‌ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ canvas.captureStream(30) ಬಳಸುತ್ತದೆ, WebM ಅಥವಾ MP4 ಉತ್ಪಾದಿಸುವ MediaRecorder ಗೆ ಪೈಪ್ ಮಾಡಲಾಗುತ್ತದೆ. WAV ರಫ್ತು DataView ಬಳಸಿ AudioBuffer ನಿಂದ 16-bit PCM RIFF ಫೈಲ್ ಅನ್ನು ಕೈಯಿಂದ ಎನ್‌ಕೋಡ್ ಮಾಡುತ್ತದೆ — ಯಾವುದೇ ಬಾಹ್ಯ ಎನ್‌ಕೋಡರ್ ಇಲ್ಲ.

ಸಂಬಂಧಿತ ಪರಿಕರಗಳು