什麼是音訊視覺化器?
以波形、頻率長條圖、圓形頻譜或滾動聲譜圖的形式即時查看你的音訊。每種顯示模式都會隨著音樂播放而變化。
可視化器從檔案或麥克風取得音訊,經過 Web Audio 的 AnalyserNode 分析,以 60 fps 把頻率或時域資料畫在畫布上。可在波形、頻率長條、鏡像長條、環形頻譜或滾動聲譜圖之間切換;畫面比例可設為寬螢幕、方形或直式,適配各種平台;背景顏色可選預設或自訂;色彩配置可選橘色、霓虹、海洋、單色、彩虹;調整靈敏度與長條數量;將單格存成 PNG;或點影片按鈕匯出含音訊的 WebM 短片。
使用方法
- 上傳音訊檔案或使用麥克風輸入
- 選擇可視化樣式:波形、頻率長條、鏡像長條、環形頻譜或滾動聲譜圖
- 播放音訊,觀看視覺化效果即時回應
何時使用
- 在歌曲最大聲的瞬間截圖,做成單曲封面。
- 錄製一段同步可視化的 WebM 短片,方便分享到社群或上傳 YouTube。
- 向學聲音設計的學生展示:不同 EQ 調整怎麼改變曲目的頻譜外型。
結果
一位實況主在音樂直播中加入即時音訊視覺化效果,展示隨節拍律動的彩色頻率長條圖。
常見問題
- 條形與波形的漸層顏色是怎麼決定的?
- 每種配色把頻率或振幅對應到一條色彩漸層。彩虹用 HSL 走遍整個色相,霓虹是飽和的粉與青,海洋全為藍色,單色是灰階,橘色則對齊站點主色。
- 為什麼每次開麥克風都要再次授權?
- 瀏覽器在未經明確同意前不會放行麥克風。同一個工作階段內允許一次通常會延續整段;若之前拒絕過,需要到瀏覽器設定清除本站的麥克風權限後再重新整理。
- 怎麼錄下整段視覺化,而不是只截一張畫面?
- 點畫布上的影片圖示,就能把現場可視化連同音訊一起錄成 WebM。檔案模式會從頭完整錄製整首音訊,麥克風模式則錄一段三十秒的短片。旁邊的 PNG 按鈕只截一張靜態畫面,適合你只想要單張影像時。
- 靈敏度滑桿實際上動了什麼?
- 它在繪製前對整體振幅做縮放。數值較低能避免大音量母帶把畫面撐爆;較高的數值則把耳語或乾淨的指彈這類小音量誇張到清楚可見。
- 為什麼播純音時只看見幾根條?
- 純正弦只有一個基頻與少量泛音,大多數 FFT 頻段值都趨近於零,這是頻譜該有的樣子。換成音樂或人聲後就能看到整排條紛紛亮起。