အခမဲ့ အသံဆပက်ထရမ်စစ်ဆေးစက်

မည်သို့ အလုပ်လုပ်သည်

Audio Spectrum Analyzer သည် ဖိုင် သို့မဟုတ် မိုက်ခရိုဖုန်းမှ audio data ပေါ်တွင် real-time FFT (Fast Fourier Transform) ကို တွက်ချက်ပေးသော Web Audio API ၏ AnalyserNode ကို သုံး၍ သင့် browser ထဲတွင် လုံးဝ အလုပ်လုပ်သည်။ Frame တိုင်းကို ကိုယ်တိုင်ရေးထားသော Canvas 2D code ဖြင့် ဆွဲထားသည် — visualization library မပါဝင်ပါ၊ audio သည် သင့်စက်ကို မထွက်ပါ။

1. 1
   Audio ကို decode လုပ်ပြီး route လုပ်သည်

   ဖိုင်တစ်ခု load လုပ်သောအခါ Web Audio API သည် ၎င်းကို AudioBuffer အဖြစ် decode လုပ်ပြီး MediaElementAudioSourceNode မှတစ်ဆင့် AnalyserNode သို့ route လုပ်သည်။ မိုက်ခရိုဖုန်း input အတွက် getUserMedia() သည် stream ကို ဖမ်းယူပြီး MediaStreamAudioSourceNode မှတစ်ဆင့် ပေးပို့သည် — raw signal ကို မြင်နိုင်ရန် echo cancellation၊ noise suppression နှင့် auto-gain အားလုံးကို ပိတ်ထားသည်။
2. 2
   AnalyserNode သည် frame တိုင်းတွင် FFT ကို လုပ်ဆောင်သည်

   Animation frame တိုင်းတွင် (requestAnimationFrame မှတစ်ဆင့်) code သည် dBFS ဖြင့် လက်ရှိ FFT magnitude spectrum ကို ဖတ်ရန် getFloatFrequencyData() ကို ခေါ်ပြီး raw waveform sample များအတွက် getFloatTimeDomainData() ကို ခေါ်သည်။ FFT size ကို 2048 မှ 16384 bins အထိ ချိန်ညှိနိုင်ပြီး 44.1 kHz တွင် bin လျှင် Hz 2.7 ခန့် frequency resolution ပေးသည်။
3. 3
   Canvas 2D သည် ရွေးချယ်ထားသော view ကို render လုပ်သည်

   Analyzer view သည် FFT bin များကို log-frequency (20 Hz–20 kHz) X axis နှင့် dBFS Y axis ပေါ်သို့ မြေပုံဆွဲပြီး spectrum ကို ဖြည့်ထားသော မျဉ်းတစ်ခုအဖြစ် ဆွဲကာ ပျောက်ကွယ်သွားသော peak-hold trace တစ်ခု ထပ်ဖွဲ့သည်။ အဓိက frequency ကို peak bin ပတ်ဝန်းကျင် parabolic interpolation ဖြင့် တိကျစွာ ရှာဖွေပြီး cent ကွာဟမှုနှင့်အတူ အနီးစပ်ဆုံး equal-tempered ဂီတသံစဉ် (A4=440 Hz) သို့ ပြောင်းလဲသည်။ Spectrogram view သည် canvas ကို frame တိုင်း pixel တစ်ခု ဘယ်ဘက်သို့ scroll လုပ်ပြီး inferno-style color ramp ကို သုံး၍ column အသစ်ကို ဆွဲသည်။ Artistic view သည် bar၊ waveform သို့မဟုတ် circular အလှတန်ဆာဆင် mode များအတွက် byte-resolution frequency သို့မဟုတ် time-domain data ကို သုံးသည်။
4. 4
   Canvas နှင့် MediaRecorder မှတစ်ဆင့် Export

   PNG သိမ်းခြင်းသည် လက်ရှိ frame ကို encode လုပ်ရန် canvas.toBlob() ကို ခေါ်သည်။ ဗီဒီယို recording သည် MediaStreamAudioDestinationNode မှ audio tap တစ်ခုနှင့် ပေါင်းစပ်ထားသော canvas.captureStream(30) ကို သုံးပြီး WebM သို့မဟုတ် MP4 ထုတ်ပေးသော MediaRecorder သို့ ပို့သည်။ WAV export သည် DataView တစ်ခုကို သုံး၍ AudioBuffer မှ 16-bit PCM RIFF ဖိုင်တစ်ခုကို ကိုယ်တိုင် encode လုပ်သည် — ပြင်ပ encoder မပါဝင်ပါ။

ဆက်နွှယ်သော ကိရိယာများ