要產生音訊波形圖，你可以挑選一個瀏覽器可解碼的檔案，將寬度設定在 320 到 1,600 像素之間、高度設定在 120 到 600 像素之間，選擇背景顏色與波形顏色，然後讓頁面在目前的分頁中完整建構一個確定性的 SVG 峰值封包。第一次執行是三步驟的工作流程：選擇、設定、產生。Web Audio 會在本機解碼該檔案——MP3、WAV、M4A、AAC、Ogg、WebM 或 FLAC 只有在你的瀏覽器與作業系統實際支援該真實編解碼器時才會被接受。擴充功能或 MIME 標籤無法保證解碼成功，所以在一個瀏覽器中可以運作的檔案，在另一個瀏覽器中可能會被拒絕。任何超出所述壓縮與解碼預算的項目會整個被拒絕，這表示你看到的預覽就是下載下來的同一段字串。結果是一張靜態的 SVG 總覽圖，而不是頻譜圖、也不是校準過的響度量測計、更不是頻率圖表。以下是關於要準備什麼、要設定什麼、頁面會回報什麼，以及你的第一張波形圖存到磁碟後要查看哪裡的簡明逐步說明。
在開啟工具之前先準備好這些輸入
與其事後重做工作，避免執行中途被拒絕才是更聰明的做法，所以在點任何按鈕之前先確認檔案。音訊波形產生器 每次執行只接受一個音訊檔案，並且同時套用壓縮檔案預算與解碼取樣預算。一個小的壓縮檔案在 Web Audio 解碼每個聲道後，可能會膨脹成一個大得多的浮點陣列，這就是為什麼這些限制會以不同單位列出兩次。
| 輸入檢查 | 允許範圍 |
|---|---|
| 壓縮檔案大小 | 最大 50 MiB |
| 解碼後的音訊長度 | 最長 5 分鐘 |
| 聲道數量 | 1 到 8 個聲道 |
| 取樣率 | 8,000 到 192,000 Hz |
| 聲道取樣數 | 總計最多 30,000,000 |
Web Audio 會決定解碼是否真的能成功——擴充功能或 MIME 標籤永遠無法決定。不支援的、損壞的、空的，或是偽裝的檔案會直接回傳錯誤，而不是產生一張不完整的圖片。如果你知道你的檔案是以特殊取樣率錄製、由非標準軟體匯出，或是從瀏覽器無法原生解碼的容器重新命名而來，請預期第一次嘗試會失敗，並準備好備份檔案。
波形圖實際上顯示的是什麼
你得到的圖片是一張刻意簡化的時域峰值封包圖。每個解碼後的取樣框會被放入一個寬度依據所要求的影像寬度與總框數計算出來的儲存格中，對於每個儲存格，工具會從所有解碼聲道中找出最小與最大的有限取樣值。超出範圍的防禦性數值會被箝制在 -1 到 1 之間，然後從儲存格的最大值到最小值畫一條垂直的 SVG 線。全幅的正向或負向取樣會延伸到垂直中心上下各佔所要求高度的 45%，在頂端與底部各保留 5% 的邊界。這些直欄會在所要求的寬度上均勻地置中。
這個視覺化對於它「不會」計算的部分是坦誠的。請使用下表來讓第一次的預期與實際輸出保持一致。
| 面向 | 輸出涵蓋了什麼 | 輸出沒有涵蓋什麼 |
|---|---|---|
| 時間軸 | 時間由左至右進行，每個直欄一個儲存格 | 沒有拍點、音符或段落邊界的標記 |
| 垂直軸 | 每個儲存格的取樣振幅範圍，全幅映射至 ±45% 高度 | 沒有頻率、沒有音高、也沒有頻譜 |
| 響度 | 僅有峰值封包 | 不是校準過的響度量測計（LUFS、dB SPL 等） |
| 聲道 | 每個儲存格中所有聲道的最小值與最大值合併顯示 | 沒有分開的左/右音軌 |
| 診斷 | 對非有限數值進行防禦性箝制 | 無法用於診斷截幅、相位、聽感或母帶處理的合規性 |
逐步產生你的第一張音訊波形圖
準備好支援的檔案並確認好限制之後，實際執行的流程很短。底下的步驟對應頁面已驗證的操作流程。
- 從你的裝置中挑選一個音訊檔案。頁面會在進行任何其他動作之前，先檢查壓縮大小、解碼後的音訊長度、聲道數量、取樣率，以及 30,000,000 個聲道取樣的預算。被拒絕的檔案會產生錯誤，而不是不完整的影像。
- 使用數值控制項設定 SVG 寬度（320–1,600 像素）與高度（120–600 像素），然後從瀏覽器的六位數十六進位色彩選擇器中選擇背景顏色與波形顏色。顏色會透過這些控制項進行驗證，而不是從檔名或任何嵌入的中繼資料讀取。
- 產生本機峰值封包。頁面會將每個解碼框分配到連續的整數索引儲存格中，對每個儲存格在所有聲道中取箝制後的有限最小值與最大值，然後在這兩個值之間為每個儲存格畫一條垂直的 SVG 線。
- 讀取頁面回報的框數與峰值直欄數。這些數字會告訴你工具看到了多少解碼取樣，以及實際畫出了多少峰值直欄，當音訊很短時，這個數字幾乎不會等於原始的像素寬度。
- 開啟可展開的檢查器來檢視實際產生的 SVG 文字內容，然後下載完全相同的字串。下載的是文字型 SVG，而不是 PNG、JPEG、影片或音訊；選取新檔案、更改選項、再次產生或離開頁面時，會撤銷舊的物件 URL，避免舊的影像被誤用來代表新的輸入。
讀懂頁面回報的計數
成功執行後，最重要的兩個數字是：解碼後的總框數與峰值直欄數。峰值直欄數是所要求的影像寬度、1,000，以及解碼框數三者中的最小值。因此短的音訊片段絕不會產生比它實際包含的更多獨立量測值，長的音訊片段則會維持在有上限的 SVG 與處理預算之內。儲存格邊界使用由每個儲存格編號與總框數推導出來的整數框索引，第一個儲存格從第零框開始，最後一個儲存格則到達最後一個解碼框。在相鄰範圍之間不會省略任何已被接受的框。
以一個單一的計算範例來說，假設你要求一張寬度為 800 像素的影像，而檔案解碼後共有 480,000 個框。峰值直欄數就是 min(800, 1,000, 480,000) = 800。因此這 800 個直欄每一個橫跨 480,000 ÷ 800 = 600 個框。光是這個計算就能讓你在實際看到波形圖之前，先得知它的水平解析度。
正確處理立體聲與多聲道檔案
立體聲與多聲道音訊會以單一合併的峰值總覽來呈現，而不是兩條分開的音軌。一個儲存格的最小值可能來自某個聲道，最大值則可能來自另一個聲道，這表示影像在視覺上無法保留聲道身分、不會顯示分開的左右波形，也不會把各聲道平均成一個新的音訊訊號。原始音訊永遠不會被重寫。如果你需要分開的左右波形，請使用能將每個聲道各自顯示為獨立音軌的音訊編輯器，並將每個音軌分別餵入音訊波形產生器。
如果要對一段立體聲訪談或立體聲音樂片段做快速的視覺檢查，合併檢視通常足以確認兩邊都有訊號。對於任何依賴每個聲道差異的工作流程——相位關係、對白分離、M/S 處理——請把合併波形圖僅視為初步的總覽，在下結論之前改用多軌編輯器。
第一次成功執行之後該往哪裡去
SVG 存到磁碟之後，一些實用的後續步驟可以讓第一次的結果更有價值。下載的是文字型 SVG，具有固定的像素大小與相符的 viewBox，所以圖片放到任何顯示尺寸都能保持銳利；非常大的印刷尺寸或需要細部編輯的工作流程，仍可能會需要不同的描邊寬度或更高解析度的來源檔。頁面上的檢查器永遠會顯示下載按鈕所寫入的確切字串，這讓你在分享檔案之前很容易確認你用的是正確的那次產生結果。如果你想比較兩組不同的顏色或尺寸設定，請用新的選項再執行一次工作流程——每次產生都會撤銷舊的物件 URL，避免舊的預覽不小心被用來代表新的輸入。如果要更全面地判斷峰值波形是否是你專案的正確成品，請參考 如何判斷是否需要產生波形，看看有哪些使用情境是時域峰值封包無法處理的。
請記住，兩段錄音可能會顯示類似的峰值但聽起來差異很大，因為主觀感知的響度取決於持續時間、頻率平衡、動態與播放條件。請把這張圖視為忠實的時域總覽，除此之外不要有過度解讀；一旦結果看起來有問題，就立刻回頭檢查輸入（檔案、尺寸、顏色），而不是在 SVG 裡面追著表面症狀打轉。
延伸閱讀：確保你正確產生音訊波形圖。