音訊波形產生器讓您可以透過三種方式來驗證剛產生的波形:讀取回報的峰值欄數(也就是所要求的寬度、1,000 與解碼後的幀數三者中的最小值)、開啟頁面上的 SVG 文字檢查器,以及下載 SVG 檔案以確認其寬度、高度、背景與波形顏色皆符合您的設定。 這三項檢查都在產生影像的同一個瀏覽器分頁中本機執行,因此您所檢查的結果與下載按鈕所儲存的字串是同一份。預覽、檢查器與下載刻意設計為完全一致,確保您所見即所保留。
這種區隔至關重要,因為波形圖片只有在值得信賴時才有用。無聲的音訊片段看起來應該是平坦的。鼓聲擊點應該產生一條高的垂直線。被截幅的錄音應該顯示峰值延伸至圖片的頂部與底部,而非乖巧地停留在中間。這些檢查都不是自動進行的;您必須透過檢查數字、線條以及最終輸出的檔案來確認。

音訊波形產生器實際上會產生什麼
產生器會接收您選取的音訊檔案,透過 Web Audio API 的 AudioBuffer 在瀏覽器中解碼,並產生一個靜態的 SVG 總覽圖,而非 PNG、JPEG、影片或重新編碼的音訊檔。解碼後的取樣幀會被分割成等長的索引範圍,針對每個範圍,工具會找出所有解碼通道中有限的最小與最大取樣。超出範圍的防禦性數值會被箝制在 -1 到 1 之間,並從每個區段的最大值到最小值繪製一條垂直的 SVG 線。這樣能誠實地呈現短暫的正負峰值,而非從每個區段中隨意抓取單一取樣點。
由於輸出是基於文字的 SVG,每個座標、尺寸與顏色都是檔案中的實際字元。頁面透過可展開的檢查器公開該字串,下載時也使用完全相同的字串。沒有任何隱藏的前處理步驟或伺服器端渲染會造成預覽與儲存內容之間的差異。
檢查結果的三種方式
您不需要只選擇一種驗證方式;工具提供三種方式並期望您搭配使用。
- 數值讀數。 產生後,頁面會回報解碼後的幀數以及實際繪製的峰值欄數。比較這兩個數字可讓您判斷音訊是在用盡欄位之前就用完,還是長檔案觸發了 1,000 欄的上限。
- 視覺預覽。 預覽窗格會以您設定的大小顯示渲染後的 SVG。垂直中心位於所要求高度的一半,全幅的正負取樣會從中心向上或向下延伸至高度的 45%,並在頂部與底部各保留 5% 的邊距。
- 下載的檔案。 下載的是純 SVG,並具有相符的 viewBox,因此當放置在其他顯示尺寸時,影像仍能保持清晰。您可以在文字編輯器或支援 SVG 的工具中開啟它,直接讀取每一個線條元素。
逐步檢查結果
- 開啟音訊波形產生器並選擇一個瀏覽器可解碼的音訊檔案。 請堅持使用您目前的瀏覽器與作業系統實際能解碼的格式——MP3、WAV、M4A、AAC、Ogg、WebM 或 FLAC——並遵守已公布的限制:50 MiB 的壓縮上限、五分鐘的最長時長、1–8 個通道、8,000–192,000 Hz 的取樣率,以及 3,000 萬個總通道取樣數。不支援、損毀、空檔或標示錯誤的檔案會回傳錯誤,而不會產生誤導性的影像。
- 將 SVG 寬度設定在 320 到 1,600 像素之間,高度設定在 120 到 600 像素之間。 從瀏覽器的六位數十六進制色彩控制項中選擇背景顏色與波形顏色。您要求的寬度會設定水平解析度的上限;實際的欄數是該寬度、1,000 與解碼後的幀數三者中的最小值。
- 產生本機峰值包絡。 解碼、分區、色彩驗證與 SVG 組裝皆在您目前的分頁中完成。不會上傳任何資料。
- 讀取回報的幀數與峰值欄數。 若欄數等於幀數,表示您的音訊片段短到一個幀對應一個欄位。若欄數等於 1,000,表示您的音訊夠長足以水平填滿 SVG,且額外的音訊幀會與其經箝制的最小與最大值合併到同一個區段中。
- 檢查預覽的外觀是否合理。 大聲的段落應該延伸至頂部與底部邊緣;無聲的段落應該緊貼中心線。高聳的尖峰代表該區段內短暫的正負峰值。
- 開啟 SVG 文字檢查器並瀏覽標記內容。 您應該會看到一個背景矩形以及一組垂直峰值線。在給定區段經箝制的最小與最大值下,每條線的 y 座標應該都是確定性的。
- 下載 SVG 並確認它與預覽一致。 下載的檔案使用與檢查器完全相同的字串,因此在任何支援 SVG 的編輯器中開啟,都能重現完全相同的圖片。
- 每次輸入變更時重新產生。 選擇新檔案、更改選項或重新產生時,會撤銷先前的物件 URL,因此舊的影像不會被誤用來代表新的輸入。
讀取回報的數字與 SVG 檢查器
頁面在產生後會顯示兩個數字:解碼後的幀數與峰值欄數。兩者的關係是讀數所能提供的最重要資訊,並遵循單一規則:欄數 = min(寬度,1,000,幀數)。一段 12 秒、44.1 kHz 的單聲道片段會解碼為約 529,200 幀,因此欄數上限為 1,000,且每個欄位約分配到 529 幀。一段 2 秒、同樣取樣率的單聲道片段會解碼為約 88,200 幀,因此在寬度為 1,600 時,欄數會落在 1,000(1,600、1,000 與 88,200 三者中的最小值)——而非您所要求的完整 1,600。
SVG 檢查器將這些數字轉化為幾何圖形。當所要求的高度為 400 時,垂直中心位於 y=200。全幅的正向取樣落在 y=200 − 0.45 × 400 = 20(頂部 5% 邊距),全幅的負向取樣落在 y=200 + 0.45 × 400 = 380(底部 5% 邊距)。在許多欄位中 y 座標皆接近 200 的線條代表安靜的段落;而延伸至接近 20 或 380 的線條則標示出檔案中最響亮的瞬間。
| 您看到的現象 | 通常代表的意義 |
|---|---|
| 欄數等於幀數 | 短片段;每欄對應一幀,無平均 |
| 欄數等於 1,000 | 長度足以填滿 SVG;多幀被合併至同一欄 |
| 欄數等於所要求的寬度 | 所要求的寬度小於 1,000 且小於幀數 |
| 所有線條緊貼中心線 | 來源接近無聲或接近直流內容 |
| 線條觸及頂部與底部邊距 | 來源中有全幅或截幅峰值 |
| 看不見左右聲道 | 為合併的多通道峰值總覽,而非各聲道分開 |
會改變「正確」結果樣貌的限制
正確的結果是誠實呈現您所選音訊的結果,而非看起來賞心悅目的結果。在信賴該圖片之前,有幾項限制值得先檢查:
- 解碼幀預算。 3,000 萬通道取樣的預算與五分鐘的時長上限存在的原因,是小型的壓縮檔可能會展開成大型浮點數陣列。超出限制的音訊會整體被拒絕;波形不會僅以檔案開頭部分悄悄產生。
- 通道識別。 對於立體聲或多通道檔案,影像為合併的峰值總覽。單一區段可能從一個通道取得最小值,從另一個通道取得最大值。圖片不會顯示分開的左右聲道、不會在視覺上保留通道識別,也不會將通道平均成新的音訊訊號。
- 編解碼器的現實。 Web Audio 僅在目前瀏覽器與作業系統確實支援 MP3、WAV、M4A、AAC、Ogg、WebM 或 FLAC 檔案的真實編解碼器時才能讀取。僅有副檔名或 MIME 標籤是不夠的;無法解碼的檔案會回傳錯誤,而非產生虛假的波形。
- 色彩控制。 背景與波形顏色必須來自瀏覽器的六位數十六進制控制項。SVG 標記是根據經驗證的數字與這些顏色產生,而非從檔名或內嵌來源中繼資料複製而來。
當圖片看起來正確但並不誠實時
峰值包絡並非音訊工程意義下的校準響度計、頻譜圖或截幅檢測器。兩段錄音可能顯示幾乎相同的峰值高度,但聽起來卻截然不同,因為感知響度取決於時長、頻率平衡、動態與播放條件。時間仍然由左至右進行,但垂直線代表的是單一區段內的振幅範圍——而非頻率、節拍或音符。若結果看起來「過於整齊」,那是區段法的功用,而非音訊本身均勻一致。
請將此圖片用於視覺配置、呈現與快速的合理性檢查。請勿用於診斷聽力、設備、截幅歷史、相位或母帶合規性。對於上述任何任務,請回到能顯示每個通道底層取樣的工具,而非合併後的包絡。若圖片在預期無聲處顯示峰值,或在預期有峰值處顯示無聲,請在重新檢查您實際選取的檔案後重新產生;每次變更時舊的物件 URL 都會被撤銷,因此過時的影像不會被誤認為目前的結果。
結果看起來錯誤的常見原因通常出在輸入端,而非產生器本身。當圖片與預期不符時,仔細閱讀產生音訊波形時避免犯錯的指南會是實用的下一步,因為相同的欄數規則、色彩驗證與撤銷行為在每次執行中都適用。