ຕົວວິເຄາະສະເປກຕຣຳສຽງ ຟຣີ

ມັນເຮັດວຽກແນວໃດ

Audio Spectrum Analyzer ເຮັດວຽກທັງໝົດຢູ່ໃນບຣາວເຊີຂອງທ່ານໂດຍໃຊ້ AnalyserNode ຂອງ Web Audio API, ເຊິ່ງຄິດໄລ່ FFT (Fast Fourier Transform) ໃນເວລາຈິງເທິງຂໍ້ມູນສຽງຈາກໄຟລ໌ ຫຼືໄມໂຄຣໂຟນ. ທຸກກອບຖືກແຕ້ມດ້ວຍໂຄ້ດ Canvas 2D ທີ່ຂຽນເອງ — ບໍ່ມີໄລບຣາຣີການສະແດງພາບທີ່ກ່ຽວຂ້ອງ, ແລະ ບໍ່ມີສຽງອອກຈາກອຸປະກອນຂອງທ່ານ.

1. 1
   ສຽງຖືກຖອດລະຫັດ ແລະ ນຳສົ່ງ

   ເມື່ອທ່ານໂຫຼດໄຟລ໌, Web Audio API ຖອດລະຫັດມັນເປັນ AudioBuffer ແລະ ນຳມັນຜ່ານ MediaElementAudioSourceNode ໄປ AnalyserNode. ສຳລັບຂໍ້ມູນເຂົ້າໄມໂຄຣໂຟນ, getUserMedia() ຈັບສະຕຣີມ ແລະ ປ້ອນມັນຜ່ານ MediaStreamAudioSourceNode ແທນ — ພ້ອມການຍົກເລີກສຽງສະທ້ອນ, ການລົບສຽງລົບກວນ, ແລະ ອັດຕາຂະຫຍາຍອັດຕະໂນມັດທັງໝົດປິດໄວ້ ດັ່ງນັ້ນທ່ານເຫັນສັນຍານດິບ.
2. 2
   AnalyserNode ເຮັດວຽກ FFT ແຕ່ລະກອບ

   ໃນທຸກກອບແອນິເມຊັນ (ຜ່ານ requestAnimationFrame), ໂຄ້ດເອີ້ນ getFloatFrequencyData() ເພື່ອອ່ານສະເປັກຕຣັມຂະໜາດ FFT ປັດຈຸບັນເປັນ dBFS, ແລະ getFloatTimeDomainData() ສຳລັບຕົວຢ່າງຮູບຄື້ນດິບ. ຂະໜາດ FFT ຕັ້ງຄ່າໄດ້ຈາກ 2048 ຫາ 16384 bins, ໃຫ້ຄວາມລະອຽດຄວາມຖີ່ລະອຽດເຖິງປະມານ 2.7 Hz/bin ທີ່ 44.1 kHz.
3. 3
   Canvas 2D ສະແດງຜົນມຸມມອງທີ່ເລືອກ

   ມຸມມອງ Analyzer ຈັບຄູ່ bins FFT ເທິງແກນ X ຄວາມຖີ່ log (20 Hz–20 kHz) ແລະ ແກນ Y dBFS, ແຕ້ມສະເປັກຕຣັມເປັນເສັ້ນຕື່ມ, ແລະ ວາງທັບຮ່ອງຮອຍ peak-hold ທີ່ຫຼຸດລົງ. ຄວາມຖີ່ທີ່ເດັ່ນຖືກກຳນົດຢ່າງແນ່ນອນໂດຍໃຊ້ parabolic interpolation ອ້ອມຮອບ bin ຈຸດສູງສຸດ, ແລ້ວແປງເປັນໂນ້ດດົນຕີ equal-tempered ທີ່ໃກ້ທີ່ສຸດ (A4=440 Hz) ພ້ອມການແຍກ cent ສະແດງໃນຄ່າອ່ານ. ມຸມມອງ Spectrogram ເລື່ອນ canvas ໜຶ່ງພິກເຊວໄປຊ້າຍທຸກກອບ ແລະ ແຕ້ມຖັນໃໝ່ໂດຍໃຊ້ ramp ສີແບບ inferno. ມຸມມອງ Artistic ໃຊ້ຂໍ້ມູນຄວາມຖີ່ ຫຼືເວລາລະດັບໄບຕ໌ ສຳລັບໂໝດແຖບ, ຮູບຄື້ນ, ຫຼືເສັ້ນວົງກົມແບບຕົກແຕ່ງ.
4. 4
   ສົ່ງອອກຜ່ານ Canvas ແລະ MediaRecorder

   ການບັນທຶກ PNG ເອີ້ນ canvas.toBlob() ເພື່ອເຂົ້າລະຫັດກອບປັດຈຸບັນ. ການບັນທຶກວິດີໂອໃຊ້ canvas.captureStream(30) ປະສົມກັບການແຕະສຽງຈາກ MediaStreamAudioDestinationNode, ສົ່ງເຂົ້າ MediaRecorder ຜະລິດ WebM ຫຼື MP4. ການສົ່ງອອກ WAV ເຂົ້າລະຫັດໄຟລ໌ RIFF PCM 16-ບິດດ້ວຍມືຈາກ AudioBuffer ໂດຍໃຊ້ DataView — ບໍ່ມີຕົວເຂົ້າລະຫັດພາຍນອກ.

ເຄື່ອງມືທີ່ກ່ຽວຂ້ອງ