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

Како функционира

Анализаторот на аудио спектар работи целосно во вашиот прелистувач користејќи го AnalyserNode од Web Audio API, кој пресметува FFT (брза Фуриева трансформација) во реално време на аудио податоци од датотека или микрофон. Секој кадар се исцртува со рачно напишан Canvas 2D код — не е вклучена библиотека за визуелизација, и никакво аудио не го напушта вашиот уред.

1. 1
   Аудиото се декодира и насочува

   Кога вчитувате датотека, Web Audio API ја декодира во AudioBuffer и ја насочува преку MediaElementAudioSourceNode во AnalyserNode. За влез од микрофон, getUserMedia() го фаќа потокот и го проследува преку MediaStreamAudioSourceNode наместо тоа — со исклучени поништување на ехо, потиснување на шум и автоматско засилување за да го видите суровиот сигнал.
2. 2
   AnalyserNode го извршува FFT секој кадар

   Во секој кадар на анимацијата (преку requestAnimationFrame), кодот повикува getFloatFrequencyData() за да го прочита тековниот FFT спектар на магнитуди во dBFS, и getFloatTimeDomainData() за суровите примероци на бранот. Големината на FFT е прилагодлива од 2048 до 16384 бинови, давајќи фреквентна резолуција фина колку околу 2,7 Hz/бин при 44,1 kHz.
3. 3
   Canvas 2D го исцртува избраниот преглед

   Прегледот „Анализатор“ ги пресликува FFT биновите на логаритамска фреквентна (20 Hz–20 kHz) X оска и dBFS Y оска, го исцртува спектарот како исполнета линија, и наслојува опаѓачки траг за задржан врв. Доминантната фреквенција се одредува со параболична интерполација околу врвниот бин, потоа се конвертира во најблиската нота според рамномерно темперирана скала (A4=440 Hz) со отстапување во центи прикажано во отчитувањето. Прегледот „Спектрограм“ го лизга платното еден пиксел лево секој кадар и боји нова колона користејќи скала на бои во стил „инферно“. Прегледот „Уметнички“ користи податоци со резолуција од бајт за фреквенција или временски домен за режими со ленти, бран или кружни декоративни режими.
4. 4
   Извоз преку Canvas и MediaRecorder

   Зачувувањето на PNG повикува canvas.toBlob() за да го кодира тековниот кадар. Снимањето видео користи canvas.captureStream(30) комбинирано со аудио изворче од MediaStreamAudioDestinationNode, проведено во MediaRecorder кој произведува WebM или MP4. WAV извозот рачно кодира 16-битна PCM RIFF датотека од AudioBuffer користејќи DataView — без надворешен енкодер.

Поврзани алатки