免費音訊頻譜分析器

工作原理

音訊頻譜分析器完全在你的瀏覽器中執行，使用 Web Audio API 的 AnalyserNode，對來自檔案或麥克風的音訊資料進行即時 FFT（快速傅立葉變換）。每一幀都用手寫的 Canvas 2D 程式碼繪製——不使用視覺化庫，音訊也不會離開你的裝置。

1. 1
   音訊解碼與路由

   載入檔案時，Web Audio API 將其解碼為 AudioBuffer，並透過 MediaElementAudioSourceNode 路由到 AnalyserNode。對於麥克風輸入，getUserMedia() 捕獲音訊流並透過 MediaStreamAudioSourceNode 輸入——回聲消除、噪聲抑制和自動增益全部關閉，讓你看到原始訊號。
2. 2
   AnalyserNode 每幀執行 FFT

   在每個動畫幀（透過 requestAnimationFrame）中，程式碼呼叫 getFloatFrequencyData() 讀取當前以 dBFS 表示的 FFT 幅度譜，並呼叫 getFloatTimeDomainData() 讀取原始波形取樣。FFT 大小可在 2048 到 16384 之間設定，在 44.1 kHz 下頻率解析度可精細到約 2.7 Hz/bin。
3. 3
   Canvas 2D 渲染所選檢視

   分析檢視將 FFT 頻點對映到對數頻率（20 Hz–20 kHz）X 軸和 dBFS Y 軸，將頻譜繪製為填充線條，併疊加逐漸衰減的峰值保持曲線。主頻率透過峰值頻點附近的拋物線插值精確定位，然後換算為最接近的十二平均律音符（A4=440 Hz），並在讀數中顯示音分偏差。頻譜圖檢視每幀將畫布向左捲動一個畫素，並用 inferno 風格的色階繪製新的一列。藝術檢視使用位元組精度的頻率或時域資料，提供柱狀、波形或環形裝飾模式。
4. 4
   透過 Canvas 和 MediaRecorder 匯出

   儲存 PNG 時呼叫 canvas.toBlob() 編碼當前幀。錄製影片時將 canvas.captureStream(30) 與來自 MediaStreamAudioDestinationNode 的音訊分接結合，輸入 MediaRecorder 產生 WebM 或 MP4。WAV 匯出使用 DataView 從 AudioBuffer 手工編碼 16 位 PCM RIFF 檔案——不使用外部編碼器。

相關工具