音波的波形圖是一種可決定性、可縮放的 SVG,在每個時間區間顯示一條垂直的峰值線,全幅度的樣本會對應到圖片中央垂直線上下各 45 percent 的高度。每條線涵蓋該區間內每個解碼聲道中從最小到最大的樣本值,因此短暫的正向與負向峰值能在圖中保留下來,而不會被平均掉。此工具產生的是靜態的峰值包絡圖,而非頻譜圖,因此時間由左向右推進,而垂直軸代表的是樣本振幅範圍,而非頻率。由於輸出是純文字的 SVG 並附有對應的 viewBox,因此在任何顯示尺寸下都保持清晰,並能在任何支援 SVG 的編輯器中開啟。所有解碼與 SVG 產生程序都在目前的瀏覽器分頁中執行;音訊檔案與產生的圖形絕不會離開本機。這種結合受限的本機處理、精確的尺寸與顏色,以及可下載的向量圖,正是讓免費且可決定性的波形圖適用於日常發佈、播客與簡報工作的原因。

「將音訊轉為波形圖」實際上會產生什麼
波形圖是一種時域圖片。水平軸代表已解碼音訊片段的時間長度,並被切成等距的時間區間。垂直軸代表每個區間內出現的最小與最大樣本值之間的範圍,而這是在音訊於瀏覽器中解碼為原始 PCM 資料後計算出來的。
波形圖不會測量頻率、音符、節拍、響度、暫態或音樂結構。兩段擁有相似峰值的錄音聽起來可能完全不同,因為感知響度取決於持續時間、頻率平衡、動態範圍與播放條件。峰值波形圖也不是頻譜圖:即使時間同樣由左向右推進,每條線的垂直範圍反映的是樣本振幅範圍,而不是頻率內容。在為說明文件、縮圖或編輯用圖選擇視覺化方式時,這個區別很重要。
音訊波形產生器的輸出是文字形式的 SVG,而非點陣圖。檔案包含一個背景矩形,以及一組以固定像素尺寸繪製並附有對應 viewBox 的垂直峰值線。由於整張圖片只是幾何圖形加上兩個十六進位顏色,因此可以在任何支援 SVG 的編輯器中開啟、重新著色、調整樣式或製作動畫,而無需重新編碼音訊。
為何本機、可決定性的 SVG 有所助益
免費的波形產生器在實際處理音訊檔案的方式上差異極大。有些會將原始檔案上傳到遠端伺服器、轉碼音訊,然後回傳一張點陣圖。其他則依賴瀏覽器擴充功能或單一固定的視覺樣式。這兩種做法都讓工作流程難以重現、難以重新著色,並對私人錄音具有風險。
本機、可決定性的 SVG 工作流程能分別解決這些問題。解碼作業透過載入工具的同一個分頁中的 Web Audio API 進行一次處理,相關說明記載於 Web Audio 規範的 AudioBuffer 章節。峰值線條是從解碼後的緩衝區計算出來,SVG 標記則由經驗證的數字與十六進位顏色產生,下載的內容與檢查器中顯示的完全相同。使用相同輸入與相同尺寸重新執行工具,會產生完全相同的檔案,這對樣板驅動的發佈以及比對版本化的縮圖都非常實用。
也能避免出現過時的結果。選取替代檔案、更改設定、重新產生或關閉頁面,都會撤銷舊的物件 URL,因此舊圖片不會被用來代表新的輸入。
從音訊產生波形圖
- 在目前的瀏覽器分頁中開啟音訊波形產生器,並選擇瀏覽器實際能解碼的單一音訊檔案,例如 MP3、WAV、M4A、AAC、Ogg、WebM 或 FLAC。
- 確認檔案在支援的壓縮與解碼限制範圍內,因為即使是小的壓縮檔也可能展開成非常大的浮點緩衝區,導致整體被拒絕。
- 輸入介於 320 到 1600 像素之間的 SVG 寬度,以及介於 120 到 600 像素之間的高度,然後挑選一組六位數十六進位的背景顏色與一組六位數十六進位的波形顏色。
- 產生本機峰值包絡。工具會將已解碼的幀分割成等長、以整數索引的區間,並為每個區間從所有接受聲道中最小到最大的有限且經箝制的樣本畫出一條垂直線。
- 在頁面上讀取回報的幀數與峰值線數,確認該圖片是根據實際解碼後的緩衝區所建構,而不是來自猜測的佔位內容。
- 在下載之前檢查預覽,或開啟可展開的 SVG 文字檢查器,以驗證尺寸、顏色與線條數量。
- 下載與檢查器所顯示完全相同的 SVG 字串。該檔案是獨立的向量檔,附有對應的 viewBox,可在任何支援 SVG 的編輯器中開啟,並能縮放而不失真。
設定精確的尺寸與顏色
產生器接受 320 到 1600 像素的寬度,以及 120 到 600 像素的高度。超出任一範圍會被拒絕,因為峰值包絡演算法是針對該範圍所調校的,而欄數上限也與要求的寬度連動。
顏色必須使用瀏覽器的六位數十六進位控制項來提供。任何其他輸入都會被拒絕而非猜測,因此 SVG 字串始終包含從已驗證輸入衍生的有效顏色字面值。需要兩個顏色:波形後方的背景填色,以及峰值線的描邊顏色。選擇高對比的搭配,例如接近黑色的背景配上接近白色的描邊,能在日後將圖片縮成縮圖或縮放成播客平台尺寸時,保持幾何圖形的可讀性。
為了讓一系列集數、文章或投影片保持一致的品牌形象,應重複使用相同的尺寸與顏色。由於輸出是可決定性的,相同的來源檔案、相同的寬度、高度與兩個顏色,將永遠產生相同的 SVG 字串。
峰值線與幀的計算方式
音訊解碼後,產生器會計算緩衝區中的總幀數,並選擇一個欄數,該欄數等於所要求的圖片寬度、1000 與已解碼幀數三者中較小者。因此,較短的片段不會捏造比實際內容更多的獨立測量值,而較長的片段則會保持在有限的 SVG 大小與處理負擔之內。
接著,這些欄位會以等距的水平中心分佈於所要求的寬度上。區間邊界使用由區間編號與總幀數衍生的整數幀索引,因此第一個區間從第零幀開始,最後一個區間到達最後一個已解碼幀,相鄰範圍之間不會跳過任何幀。對於多聲道音訊,若極值出現在不同聲道,每個區間會從一個聲道取最小值、從另一個聲道取最大值,產生單一合併的峰值總覽,而不是分開的左右聲道。
以要求高度為 400 像素的具體範例來說,垂直中心位於 200。全幅度的正向樣本會對應到 200 加上 0.45 乘以 400,等於 380。全幅度的負向樣本會對應到 200 減去 180,等於 20。值為正 0.5 的樣本會對應到 200 加上 0.5 乘以 180,等於 290,而值為負 0.5 的樣本會對應到 200 減去 90,等於 110。這四個座標界定了單條峰值線在高度配置所保留的上方與下方 5 percent 邊距內的幾何範圍。
免費波形圖的常見用途
只要音訊與視覺版面結合之處,就會出現波形圖。短小的循環式 SVG 播客集數圖片,是常見的節目附註圖形,因為該幾何圖案能直接傳達音訊存在的訊息,而不需要播放按鈕。同樣的模式也適用於部落格文章標題,在那裡內嵌的 SVG 能隨頁面寬度縮放,而不會增加沉重的點陣檔案。
設計師也會在製作模型時使用可決定性的峰值波形作為佔位圖,然後在專案通過後替換為動畫揭曉效果。教育工作者將它們用在投影片與印刷講義中,因為即使音訊處於靜音狀態,該圖片也能讓人一眼看出某個內容是可聽見的。開源專案則會將它們放入 README 檔中,以展示範例音訊片段的樣貌,而不必嵌入音訊本身。
下表比較峰值波形與頻譜圖在視覺化內容上的差異。可用來判斷哪種圖片較適合搭配周圍的段落。
| 面向 | 峰值波形 SVG | 頻譜圖 |
|---|---|---|
| 水平軸 | 時間,由左至右 | 時間,由左至右 |
| 垂直軸 | 每個區間的樣本振幅範圍 | 頻率 |
| 顏色編碼 | 兩個固定的十六進位顏色 | 每個頻段的強度 |
| 校正後的響度 | 未顯示 | 未顯示 |
| 輸出格式 | 可編輯的文字形式 SVG | 通常為點陣圖 |
| 最適用於 | 縮圖、標題、模型、投影片 | 聲學分析、取證審查 |
限制、錯誤,以及影像無法告訴你的事
產生器對可接受的內容設有嚴格的範圍。下方表格列出官方定義的輸入與輸出限制,這些限制決定了檔案是否能被處理,還是會整個被拒絕。
| 參數 | 接受範圍 |
|---|---|
| 壓縮檔大小 | 最多 50 MiB |
| 解碼後時長 | 最多 5 分鐘 |
| 聲道數 | 1 到 8 |
| 取樣率 | 8,000 到 192,000 Hz |
| 聲道樣本數 | 最多 30,000,000 |
| 輸出影像寬度 | 320 到 1,600 px |
| 輸出影像高度 | 120 到 600 px |
| 峰值直條數 | 取寬度、1,000 與解碼後幀數中的最小值 |
這些檢查之所以重要,是因為即使是一個小的壓縮檔,仍可能在解碼後展開成大得多的浮點聲道陣列。只要其中任何一項檢查失敗,整段音訊就會被拒絕;波形不會只用前段靜悄悄地產生。不支援的、損壞的、空的,或是偽裝過的檔案同樣會回傳錯誤,而不會產生誤導性的圖片,因為僅憑副檔名或 MIME 標籤並無法保證能成功解碼。
即便是成功產生的影像,也不是診斷工具。它既不是經過校正的響度量測器,也無法顯示削波歷史、相位,或是母帶合規狀況,更不會把原始聲道拆分成獨立軌道。若專案需要左右聲道分開的波形,就必須在能將每個聲道暴露為獨立軌道的音訊編輯器中開啟原始音訊,因為這款產生器唯一會繪製的形狀,就是合併後的總覽圖。
SVG 在以其他顯示尺寸放置時仍維持清晰,但極大型印刷或專業編輯工作流程,仍可能需要不同的筆觸粗細或更高解析度的原始資料。檢查器會顯示實際產生的字串,下載的檔案也與該字串一致,這使得把檔案交給設計師,或將它與音訊一起送入版本控制系統都很方便。
想深入了解,請參閱 在瀏覽器分頁中免費產生音訊波形。
想深入了解,請參閱 透過 LRC 檔為 Spotify 本機檔案取得歌詞。