音訊波形產生器讓您以三種方式驗證新產生的波形:透過讀取回報的峰值欄數(取您要求的寬度、1,000 與解碼後的幀數三者中的最小值)、開啟頁面上的 SVG 文字檢查器,以及下載 SVG 檔案以確認其寬度、高度、背景與波形顏色符合您所設定的值。 這三項檢查全部在本機、於產生影像的同一個瀏覽器分頁中執行,因此您檢查的結果與下載按鈕儲存的字串完全相同。預覽、檢查器與下載刻意保持一致,確保所見即所存。

這種區隔很重要,因為波形圖只有在您能信任它時才有用。靜音片段應呈現平坦。打鼓的擊打應產生一條高的垂直線。已削波的錄音應顯示峰值延伸至圖片頂端與底端,而不是規規矩矩地停在中央。這些檢查都不是自動的;您要透過檢查數字、線條,以及最終輸出的檔案來自行確認。

how do i check the result after i generate audio waveform
產生音訊波形後檢查結果

音訊波形產生器實際產生了什麼

產生器會接收您選擇的音訊檔,在瀏覽器中透過 Web Audio API 的 AudioBuffer 進行解碼,並產生單一靜態 SVG 總覽圖,而不是 PNG、JPEG、影片或重新編碼的音訊檔。解碼後的取樣幀會被切分為等長的索引範圍,對於每個範圍,工具會找出每個解碼通道中最小與最大的有限取樣。防禦性的超出範圍值會被限制在 -1 到 1 之間,然後從該分組的最大值到最小值繪製一條垂直 SVG 線。這能讓短暫的正向與負向峰值如實呈現,而不是在每個分組中只抓取一個任意取樣。

因為輸出是基於文字的 SVG,每個座標、尺寸與顏色都是檔案中的字面字元。頁面會在可展開的檢查器中顯示該字串,下載時也使用完全相同的字串。沒有任何隱藏的預處理步驟或伺服器端算繪可能造成預覽與儲存內容之間的落差。

檢查結果的三種方式

您不必只選一種驗證途徑;此工具提供三種方式,並希望您搭配使用。

  • 數值讀數。 產生後,頁面會回報解碼後的幀數以及實際繪製的峰值欄數。比較這兩個數字可以告訴您,您的片段是音訊用完之前就用完了欄位,還是因為檔案太長而觸發了 1,000 欄上限。
  • 視覺預覽。 預覽窗格會以您設定的尺寸顯示 SVG 算繪結果。垂直中心位於您所要求高度的一半,滿刻度的正向或負向取樣會從中心向上或向下延伸至高度的 45%,頂端與底端各保留 5% 的邊界。
  • 下載的檔案。 下載的是帶有對應 viewBox 的純 SVG,因此放在其他顯示尺寸下依然保持清晰。在文字編輯器或支援 SVG 的工具中開啟,即可直接讀取每一條線段元素。

逐步檢查結果

  1. 開啟 音訊波形產生器 並選擇一個瀏覽器可解碼的音訊檔。 請使用您目前的瀏覽器與作業系統實際能解碼的格式 — MP3、WAV、M4A、AAC、Ogg、WebM 或 FLAC — 並遵守已公布的限制:50 MiB 的壓縮檔上限、五分鐘的最長持續時間、1–8 個通道、8,000–192,000 Hz 的取樣率,以及 3,000 萬個通道取樣總數。不支援、損壞、空的或標示錯誤的檔案會回傳錯誤,而不是產生誤導性的影像。
  2. 將 SVG 寬度設定在 320 到 1,600 像素之間,高度設定在 120 到 600 像素之間。 從瀏覽器的六位數十六進制色彩控制項中挑選背景色與波形色。您要求的寬度會設定水平解析度的上限;實際的欄數會取該寬度、1,000 與解碼後幀數三者中的最小值。
  3. 產生本機峰值包絡。 解碼、分組、顏色驗證與 SVG 組裝全部都在您目前的分頁中完成。不會上傳任何內容。
  4. 讀取回報的幀數與峰值欄數。 若欄數等於幀數,表示您的片段夠短,一個幀對應一個欄。若欄數等於 1,000,表示您的片段夠長可以橫向填滿 SVG,額外的音訊幀會被合併到同一個分組中,並以該分組的限制後最小值與最大值呈現。
  5. 檢查預覽的形狀是否合理。 大聲的段落應延伸至頂端與底端邊緣;安靜的段落應貼近中心線。高聳的尖峰對應於該分組內短暫的正向或負向峰值。
  6. 開啟 SVG 文字檢查器並略讀標記內容。 您應該會看到一個背景矩形以及一組垂直的峰值線。每一條線的 y 座標,在已知該分組限制後的最小值與最大值的情況下,應是確定性的。
  7. 下載 SVG 並確認它與預覽一致。 下載的檔案使用與檢查器完全相同的字串,因此在任何支援 SVG 的編輯器中開啟,都會重現完全相同的圖片。
  8. 只要輸入變更就重新產生。 選擇新檔案、更改選項或重新產生,都會撤銷先前的物件 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 都會被撤銷,因此不會將過時的影像誤認為目前的影像。

結果看起來不對的常見原因通常出在輸入端,而非產生器本身。當圖片與您的預期不符時,逐步閱讀一份關於產生音訊波形時避免犯錯的專題指南會是實用的下一步,因為相同的欄數規則、顏色驗證與撤銷行為在每一次執行中都適用。

相關閱讀:選擇產生音訊波形的正確方法。