音訊波形產生器會把本機解碼的音訊檔轉成一個確定性的 SVG 峰值波形,方法是將每個解碼出來的訊框切分為數個峰值區間,在每個區間中跨所有聲道取最低與最高的取樣點,然後在這兩個數值之間為每個區間畫一條垂直線。時間由左至右遞進,全幅的取樣點會延伸到垂直中心上下各 45% 的要求高度,並在影像頂部與底部各保留 5% 的邊距。由於解碼、峰值萃取、SVG 產生、預覽與下載全部都在目前的瀏覽器分頁中完成,因此音訊檔與產生的圖片絕不會離開你的裝置。下載的是文字格式的 SVG,而非 PNG 或影片,所以同一個檔案在任何顯示尺寸下都能保持清晰,也能在任何支援 SVG 的編輯器中開啟。這讓整個流程只需要選一次檔案、設定兩個數值範圍、挑兩個顏色、再下載一次,這也是為什麼這條路徑比安裝命令列工具、設定本機編輯器,或把音軌上傳到代管服務都還要簡單的原因。

音訊波形產生實際上涉及什麼
波形並不是聲音本身。它是一張靜態的二維圖片,把時間壓縮成水平軸,並把每段小切片的最小到最大取樣範圍壓縮成垂直軸。許多軟體路徑會把這張圖片變得複雜:需要 JSON 中介檔的命令列工具、要求外掛的大型本機編輯器,或要求帳號的網路服務。音訊波形產生器刻意做得更簡單。使用者挑一個音訊檔、設定寬度、高度與兩個顏色,按下產生,就能拿到一份可縮放的 SVG。不必安裝、不必註冊帳號、沒有伺服器存放檔案、不必清理中介 JSON,也不需要在看到第一張圖之前先學一套建置系統。
為什麼本機瀏覽器處理能消除常見障礙
產生波形最困難的部分通常不是數學,而是工具鏈。命令列的 audiowaveform 需要建置步驟、FFmpeg 需要設定,而線上服務常常要求上傳。整個流程都在目前的分頁中執行,就把這三個步驟都省掉了。瀏覽器會透過 Web Audio 將音訊解碼到一個記憶體中的緩衝區(請參考 Web Audio API 的 AudioBuffer 參考),網頁會把這些解碼後的訊框切分成區間,並由經過驗證的數字(而非從檔名或來源中繼資料抄來的數字)來寫入 SVG。由於解碼取決於目前瀏覽器與作業系統的編解碼器支援,而非檔案副檔名或 MIME 標籤,所以同一個 MP3、WAV、M4A、AAC、Ogg、WebM 或 FLAC 在某個環境中可能可以解碼,在另一個環境卻不行;不支援或損壞的檔案會回傳錯誤,而不是產生一張壞掉的圖。
在支援的限制範圍內準備你的音訊檔
一個小的壓縮檔在解碼後可能會膨脹成一個非常大的浮點聲道陣列,因此這個工具在開始繪製前會強制設定一個固定預算。壓縮檔必須在 50 MiB 以下、解碼後的音訊長度不得超過 5 分鐘、檔案必須包含 1 到 8 個聲道、取樣率必須介於 8,000 到 192,000 Hz 之間,且解碼後的總聲道取樣數必須維持在 3,000 萬以下。超過上限的音訊會整體被拒絕;它不會只用檔案開頭的片段悄悄產生波形。請先選好音訊檔、確認可以讀取,再進入尺寸設定。
| 限制 | 允許值 |
|---|---|
| 壓縮檔大小 | 最多 50 MiB |
| 解碼後長度 | 最多 5 分鐘 |
| 聲道數 | 1 到 8 |
| 取樣率 | 8,000 到 192,000 Hz |
| 聲道取樣數 | 最多 30,000,000 |
| 支援的編解碼器(在系統支援時) | MP3、WAV、M4A、AAC、Ogg、WebM、FLAC |
在產生前先設定尺寸與顏色
寬度與高度是用來決定 SVG 形狀的兩個數值範圍。寬度可以是 320 到 1,600 像素之間的任何值,高度可以是 120 到 600 像素之間的任何值。背景色與波形色來自瀏覽器標準的六位數十六進制色彩控制,因此每張輸出的 SVG 都是由經過驗證的數字與經過驗證的顏色所構成,而不是從檔名去猜測。垂直中心位於要求高度的一半處,全幅的正向或負向取樣會從中心向上或向下延伸到該高度的 45%。選較高的畫布(接近 600)會在密集段落保留較多的垂直餘裕,而較寬的畫布(接近 1,600)則讓長音訊能在水平方向展開。各欄會在要求的寬度內均勻置中,因此單獨改變寬度不會讓圖片偏離中心。
逐步產生 SVG 波形
- 在指定的壓縮與解碼限制範圍內,選擇一個瀏覽器可解碼的音訊檔。
- 設定 SVG 的寬度、高度、背景色與波形色,然後產生本機的峰值包絡。
- 檢查回報的訊框數與峰值欄數,查看預覽或 SVG 文字內容,再下載完全相同、可縮放的 SVG。
實際繪製的欄數是要求的影像寬度、1,000 與解碼後的訊框數三者中最小的一個。因此短音訊不會捏造比它實際擁有的更多獨立測量,而長音訊則會維持在有界限的 SVG 大小與處理預算內。每個區間使用依區間編號與總訊框數推導出來的連續整數訊框索引,因此第一個區間從訊框零開始,最後一個區間會延伸到最後一個解碼出來的訊框,且相鄰區間之間不會省略被接受的訊框。對於每個區間,工具會跨所有解碼聲道找出有限範圍內的最小與最大取樣值,把防禦性的超出範圍值限制在 -1 到 1 的區間內,然後在該區間的最大值與最小值之間畫一條垂直的 SVG 線。這比在每個區間任意挑一個取樣點更能忠實保留短暫的正負峰值。
了解波形會顯示與不會顯示的內容
這張圖是峰值包絡,而不是經過校正的響度計量器。兩段錄音可能顯示相近的峰值,但聽起來卻差異很大,因為感知響度取決於持續時間、頻率平衡、動態範圍與播放條件。它也不是頻譜圖:時間由左至右進行,但垂直線代表的是取樣振幅範圍,而不是頻率。這個工具不會計算頻率內容、節拍、音符、響度、語音、暫態或音樂結構,因此這張圖不應該用來判斷聽力、設備、削波歷史、相位或母帶合規性。對多聲道音訊而言,這張圖是合併後的峰值總覽:單一區間可以從某個聲道取最小值、從另一個聲道取最大值,所以結果並不會顯示獨立的左右音軌、也不會在視覺上保留聲道身分,更不會把聲道平均成新的音訊訊號。如果你需要獨立的聲道波形,請使用能將每個聲道分別視為一條音軌的音訊編輯器。這個流程絕不會重新改寫原始音訊。
當簡化不再適用時:邊緣情況與修正方式
有幾種情況會打斷這條簡單路徑,建議在開始前特別注意。選擇替換檔案、更改選項、重新產生或離開頁面時,會撤銷已失效的物件 URL,因此舊的影像不會看起來像是在代表新的輸入。防禦性的超出範圍值會被限制在 -1 到 1 之間,而非有限的取樣值會被忽略,這讓幾何形狀在來源資料不理想時仍能保持穩定。SVG 放到其他顯示尺寸時仍然清晰,但若是極大的印刷或編輯工作流程,可能仍需要不同的描邊粗細或更精細的來源資料,這已超出本工具的涵蓋範圍。如果之後需要重現完全相同的圖片,確定性的幾何再加上同一個輸入檔、寬度、高度與兩個顏色,就能重新產生同一段 SVG,因此重現性來自於輸入本身,而非任何隱藏狀態。
開始前的快速參考
在打開工具之前,請先確認三件事:檔案是目前瀏覽器與作業系統實際能解碼的支援編解碼器之一、檔案大小在 50 MiB 的壓縮上限之內,以及解碼後的版本長度在 5 分鐘以內且聲道取樣數在 3,000 萬以下。如果這三項檢查都通過,整個工作流程就簡化為一次選檔、兩個數值範圍、兩個顏色選擇、一次產生與一次儲存。網頁會在可展開的檢查器中顯示完全相同的已產生 SVG 文字內容,下載時使用的也正是那段相同的字串,所以你看見什麼就會儲存什麼。如果你想深入了解這裡使用的本機 SVG 方法,請參考如何使用本機 SVG 方法將音訊轉為波形。
如果你正在權衡各種選項,產生音訊波形時的問題排除對此有詳細說明。