აუდიო სპექტრის ანალიზატორი უფასოდ

როგორ მუშაობს

აუდიო სპექტრის ანალიზატორი მთლიანად თქვენს ბრაუზერში მუშაობს Web Audio API-ის AnalyserNode-ის გამოყენებით, რომელიც რეალურ დროში 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 ჰც/ბინამდე, 44.1 კჰც-ზე.
3. 3
   Canvas 2D რენდერს ირჩეულ ხედს

   ანალიზატორის ხედი FFT ბინებს ლოგარითმულ-სიხშირის (20 ჰც–20 კჰც) X ღერძზე და dBFS Y ღერძზე ასახავს, სპექტრს ავსებული ხაზის სახით ხატავს და აჩენს დაქვეითებადი პიკის-დაჭერის ტრეისს. დომინანტი სიხშირე ფიქსირდება პარაბოლური ინტერპოლაციით პიკის ბინის გარშემო, შემდეგ გარდაიქმნება უახლოეს თანაბარ-ტემპერირებულ მუსიკალურ ნოტად (A4=440 ჰც), ცენტ-გადახრით ჩვენებაში. სპექტროგრამის ხედი კანვასს ერთი პიქსელით მარცხნივ ატრიალებს ყოველ კადრზე და ხატავს ახალ სვეტს inferno-სტილის ფერის ხერხემლით. მხატვრული ხედი იყენებს ბაიტ-გარჩევადობის სიხშირის ან დროის-სფეროს მონაცემებს ზოლების, ტალღის ფორმის ან წრიული დეკორატიული რეჟიმებისთვის.
4. 4
   გამოტანა Canvas-ისა და MediaRecorder-ის მეშვეობით

   PNG-ის შენახვა canvas.toBlob()-ს იძახებს, მიმდინარე კადრის კოდირებისთვის. ვიდეოს ჩაწერა იყენებს canvas.captureStream(30)-ს, MediaStreamAudioDestinationNode-იდან აუდიო შეყვანასთან ერთად, MediaRecorder-ში გამავალით, რომელიც WebM-ს ან MP4-ს ქმნის. WAV-ის გამოტანა ხელით კოდირებს 16-ბიტიან PCM RIFF ფაილს AudioBuffer-იდან DataView-ის გამოყენებით — გარე ენკოდერის გარეშე.

დაკავშირებული ინსტრუმენტები