什麼是音訊視覺化器?

以波形、頻率長條圖、圓形頻譜或滾動聲譜圖的形式即時查看你的音訊。每種顯示模式都會隨著音樂播放而變化。

可視化器從檔案或麥克風取得音訊,經過 Web Audio 的 AnalyserNode 分析,以 60 fps 把頻率或時域資料畫在畫布上。可在波形、頻率長條、鏡像長條、環形頻譜或滾動聲譜圖之間切換;畫面比例可設為寬螢幕、方形或直式,適配各種平台;背景顏色可選預設或自訂;色彩配置可選橘色、霓虹、海洋、單色、彩虹;調整靈敏度與長條數量;將單格存成 PNG;或點影片按鈕匯出含音訊的 WebM 短片。

使用方法

  1. 上傳音訊檔案或使用麥克風輸入
  2. 選擇可視化樣式:波形、頻率長條、鏡像長條、環形頻譜或滾動聲譜圖
  3. 播放音訊,觀看視覺化效果即時回應

何時使用

  • 在歌曲最大聲的瞬間截圖,做成單曲封面。
  • 錄製一段同步可視化的 WebM 短片,方便分享到社群或上傳 YouTube。
  • 向學聲音設計的學生展示:不同 EQ 調整怎麼改變曲目的頻譜外型。

結果

一位實況主在音樂直播中加入即時音訊視覺化效果,展示隨節拍律動的彩色頻率長條圖。

常見問題

條形與波形的漸層顏色是怎麼決定的?
每種配色把頻率或振幅對應到一條色彩漸層。彩虹用 HSL 走遍整個色相,霓虹是飽和的粉與青,海洋全為藍色,單色是灰階,橘色則對齊站點主色。
為什麼每次開麥克風都要再次授權?
瀏覽器在未經明確同意前不會放行麥克風。同一個工作階段內允許一次通常會延續整段;若之前拒絕過,需要到瀏覽器設定清除本站的麥克風權限後再重新整理。
怎麼錄下整段視覺化,而不是只截一張畫面?
點畫布上的影片圖示,就能把現場可視化連同音訊一起錄成 WebM。檔案模式會從頭完整錄製整首音訊,麥克風模式則錄一段三十秒的短片。旁邊的 PNG 按鈕只截一張靜態畫面,適合你只想要單張影像時。
靈敏度滑桿實際上動了什麼?
它在繪製前對整體振幅做縮放。數值較低能避免大音量母帶把畫面撐爆;較高的數值則把耳語或乾淨的指彈這類小音量誇張到清楚可見。
為什麼播純音時只看見幾根條?
純正弦只有一個基頻與少量泛音,大多數 FFT 頻段值都趨近於零,這是頻譜該有的樣子。換成音樂或人聲後就能看到整排條紛紛亮起。

相關工具