Акысыз Аудио спектр анализатору

Бул кантип иштейт

Audio Spectrum Analyzer файл же микрофондон аудио маалыматта реалдуу убакыттагы FFT (Тез Фурье Түрлөндүрүүсүн) эсептеген Web Audio API'нин AnalyserNode колдонуп толугу менен браузериңизде иштейт. Ар бир кадр кол менен жазылган Canvas 2D коду менен тартылат — эч бир визуализация китепканасы катышпайт жана эч бир аудио түзмөгүңүздөн чыкпайт.

1. 1
   Аудио декодделип, багытталат

   Файл жүктөгөндө, Web Audio API аны AudioBuffer'ге декодтойт жана MediaElementAudioSourceNode аркылуу AnalyserNode'го багыттайт. Микрофон киргизүүсү үчүн, getUserMedia() агымды кармайт жана анын ордуна MediaStreamAudioSourceNode аркылуу берет — эхо жоюу, ызы-чуу басаңдатуу жана авто-күчөтүү бардыгы өчүрүлгөн, ошондуктан чийки сигналды көрөсүз.
2. 2
   AnalyserNode ар бир кадрда FFT иштетет

   Ар бир анимация кадрында (requestAnimationFrame аркылуу), код учурдагы FFT магнитуда спектрин dBFSте окуу үчүн getFloatFrequencyData(), ал эми чийки толкун формасынын үлгүлөрү үчүн getFloatTimeDomainData() чакырат. FFT өлчөмү 2048ден 16384 бинге чейин конфигурацияланат, 44.1 кГцде бин башына болжол менен 2.7 Гцге чейин жыштык чечимин берет.
3. 3
   Canvas 2D тандалган көрүнүштү жаратат

   Analyzer көрүнүшү FFT биндерин лог-жыштыгы (20 Гц–20 кГц) X огуна жана dBFS Y огуна картага түшүрөт, спектрди толтурулган сызык катары тартат жана солгундаган чоку-кармоо изин каптайт. Басымдуу жыштык чоку бин тегерегиндеги параболалык интерполяция колдонуп табылат, андан кийин эсептөөдө көрсөтүлгөн цент четтөөсү менен эң жакын бирдей-темперленген музыкалык нотага (A4=440 Гц) айландырылат. Spectrogram көрүнүшү ар бир кадрда canvas'ты бир пиксел солго сыдырат жана инферно-стилиндеги түс шкаласын колдонуп жаңы мамыча тартат. Artistic көрүнүшү тилке, толкун формасы же тегерек декоративдик режимдер үчүн байт-чечилиштеги жыштык же убакыт-домен маалыматын колдонот.
4. 4
   Canvas жана MediaRecorder аркылуу экспорттоо

   PNG сактоо учурдагы кадрды коддоо үчүн canvas.toBlob() чакырат. Видео жаздыруу MediaStreamAudioDestinationNode'дон алынган аудио менен айкалышкан canvas.captureStream(30) колдонот, WebM же MP4 жараткан MediaRecorder'ге жиберилет. WAV экспорту DataView колдонуп AudioBuffer'ден 16-биттик PCM RIFF файлын кол менен коддойт — тышкы кодировщик жок.

Байланыштуу куралдар