規劃產生音訊波形的步驟，意味著定義三個檢查點——檔案就緒狀態、本地 SVG 產生狀態，以及結果驗證狀態——使流程可重複執行，並能毫無意外地產生一張銳利、可縮放的圖片。大多數讀者低估了規劃階段的重要性，因為可見的工作看起來很小:挑一個檔案、畫幾條線、儲存。實際上，有兩個約束會主導你做的每個決定——音訊在瀏覽器中解碼後的大小，以及你選擇用來繪製的 SVG 畫布。如果你事先理清這些，實際的產生流程只需一次點擊就能完成。如果你略過這些，你可能會挑到一個解碼後高達數千萬個取樣的檔案而被拒絕，或是為一段 3 秒的音訊片段挑了一個 1600 像素寬的畫布，結果得到的直條數比預期還少。音訊波形產生器的工作流程刻意設計得很短，但圍繞著它的規劃才是讓輸出可預測的關鍵。本指南會逐步帶你完成規劃並執行該工作流程，並提供從工具文件限制中取得的具體數值。
已規劃的音訊波形工作流程看起來像什麼
已規劃的音訊波形工作流程會分成三個階段，對應工具本身的內部邏輯。你要準備一個落在文件化瀏解碼預算內的單一檔案，以你實際需要的尺寸與色彩產生 SVG，並在宣佈完成前驗證結果。同樣的分工也反映在工具回傳狀態的方式上——它在產生後回報已解碼幀數與峰值直條數，這只有在了解幀數來自音訊、直條數來自畫布後才會顯得合理。
下表摘要說明每個階段會產生什麼，以及在往下進行前你應該確認什麼。
| 階段 | 你做什麼 | 工具回傳什麼 | 要確認什麼 |
|---|---|---|---|
| 準備 | 挑選一個瀏覽器可解碼的檔案 | 目前無 | 檔案通過 50 MiB、5 分鐘，以及 3000 萬聲道取樣的檢查 |
| 產生 | 設定寬度、高度、兩種色彩，執行 | 預覽加上回報的幀數與直條數 | 直條數符合你對畫布寬度的預期 |
| 驗證 | 檢查 SVG 文字或下載檔案 | 一個 SVG 檔案 | SVG 能在編輯器中開啟，且座標符合要求的尺寸 |
之所以需要事先讓規劃一目了然，是因為這三個階段會在不同環節出錯。一個通過大小檢查的檔案，仍可能因為瀏覽器無法播放其實際編碼而失敗。一個看起來沒問題的畫布，仍可能因為幀數是瓶頸，使得產生的直條少於要求的寬度。一個能正確開啟的下載檔案，仍可能因為你忘了在產生後驗證直條數，而與你想要的結果不符。規劃能迫使你在進入下一步前逐一檢查這些事項。
在開始前先了解限制
下列限制是工具實際強制執行的;它們並不是可以忽略的預設值。如果你規劃的檔案超出其中任何一項，產生器會直接拒絕整個檔案，而不是默默地產生部分波形，因此事先確認這些限制，是整個規劃中最省時間的一環。
- 壓縮檔大小:最多 50 MiB。
- 解碼後時長:最多 5 分鐘。
- 聲道數:1 到 8。
- 取樣率:8,000 Hz 到 192,000 Hz。
- 解碼後的總聲道取樣數:最多 30,000,000。
最後一項限制是多數讀者最容易忽略的。一個小的壓縮檔，在 Web Audio 解碼後可能會展開成非常龐大的浮點聲道陣列。作為一個快速的規劃檢查，聲道取樣數等於以秒計的時長乘以取樣率再乘以聲道數。一段 3 分鐘、44,100 Hz 的立體聲檔會產生 3 × 60 × 44,100 × 2 = 15,876,000 個聲道取樣，舒舒服服地落在預算內。一段 9 分鐘、96,000 Hz 的立體聲檔會產生 9 × 60 × 96,000 × 2 = 103,680,000 個——超出上限，因此會被整個拒絕。
至於 SVG 尺寸，允許的範圍是寬度 320 到 1,600 像素，高度 120 到 600 像素。任何超出這個範圍的設定，在峰值封包尚未計算之前就會被拒絕，因此挑選畫布尺寸屬於規劃的一部分，而不是事後才想到的事。
規劃逐步產生的流程
- 在所述的壓縮與解碼限制內，挑選一個瀏覽器可解碼的音訊檔案。Web Audio 只有在目前的瀏覽器與作業系統支援其實際編碼時，才會讀取所選的 MP3、WAV、M4A、AAC、Ogg、WebM 或 FLAC。副檔名或 MIME 標籤無法保證解碼一定會成功，因此請預先規劃一個備用檔案。不支援、損毀、空的，或偽裝的檔案會回傳錯誤，而不是產生一張佔位圖片。
- 設定 SVG 的寬度、高度、背景色彩與波形色彩，然後產生本地峰值封包。色彩必須來自瀏覽器提供的六位數十六進位色票控制項。實際繪製的峰值直條數，取你所要求的寬度、1,000，以及已解碼幀數三者中的最小值——這就是為什麼一段短音訊無法捏造出比它本身所含更多的獨立測量點。長音訊則因為有 1,000 直條的上限，得以維持在有限的 SVG 與處理預算之內。
- 檢查回報的幀數與峰值直條數，查看預覽或 SVG 文字，並下載完全可縮放的 SVG。頁面會在一個可展開的檢查器中顯示產生的 SVG，而下載的內容正是那段一模一樣的字串。確認直條數符合你的規劃後再儲存。
如果你還在決定哪種方式適合某個特定專案，挑選產生音訊波形的正確方式中的規劃檢查清單，涵蓋了在這個逐步規劃開始前的決策。
多聲道音訊在峰值總覽中的繪製方式
對於多聲道音訊，這個工具並不會分別繪製左右兩條軌道——它會繪製一個合併後的峰值總覽。每一個區間會從某個聲道取最小值，並從另一個聲道取最大值，前提是那裡才出現真正的極值。這對於跨所有聲道的真實振幅區間是誠實的呈現，但這也意味著立體聲檔並不會以兩條上下堆疊或並排的波形來表示。如果你需要分開的聲道圖形，請規劃使用一款能將每個聲道各自匯出為軌道的音訊編輯器，然後再把該匯出結果送進產生器。
| 聲道組態 | 工具繪製什麼 | 你無法從 SVG 還原的內容 |
|---|---|---|
| 單聲道，1 個聲道 | 在單一聲道上，每個區間的最小與最大取樣 | 無——影像本身即代表該聲道 |
| 立體聲，2 個聲道 | 每個區間中，跨兩個聲道合併後的最小與最大值 | 是哪個聲道產生了該極值 |
| 多聲道，3 到 8 個聲道 | 每個區間中，跨所有聲道的最小與最大值 | 聲道身分、各聲道專屬的峰值 |
| 任何組態 | 一張合併的峰值總覽 | 聲道平均——音訊本身絕不會被改寫 |
峰值封包的方法會把已解碼的幀切成等長的索引範圍，在每個範圍內找出所有已解碼聲道中的最小與最大有限取樣，並將防禦性的超出範圍值限制在 -1 到 1 之間。然後它會在每個區間的最小值與最大值之間畫一條垂直的 SVG 線，比起每個區間只取單一任意取樣，這種方式更能誠實地保留短暫的正向與負向峰值。
輸出是什麼——以及不是什麼
規劃也意味著要清楚最終檔案實際代表什麼。輸出是純文字的 SVG，而不是 PNG、JPEG、影片或音訊。它包含一個背景矩形，以及一組具有固定像素尺寸與對應 viewBox 的峰值線。SVG 放置在其他顯示尺寸下依然銳利，但若是極大型的印刷或編輯流程，可能仍需要不同的筆畫粗細或更詳細的原始資料——如果你的成品會以海報尺寸印刷，請將此納入考量。
峰值波形並不是經過校正的響度計量表。兩段錄音可能顯示相近的峰值，聽起來卻大不相同，因為感知響度取決於時長、頻率平衡、動態與播放條件。它也不是頻譜圖:時間由左至右推進，但垂直線代表的是取樣振幅範圍，而不是頻率。這個工具不會計算頻率內容、節拍、音符、響度、語音、暫態或音樂結構。如果這些是成品的一部分，請規劃使用其他工具。
處理過程全程在本地完成。Web Audio 在目前的分頁中解碼檔案，SVG 也是在本機產生並下載，完全沒有任何網路步驟。不會上傳任何音訊檔案或產生的圖片。挑選替換檔案、變更選項、重新產生或離開頁面，都會撤銷已失效的物件 URL，讓舊的圖片無法繼續代表新的輸入——當你在同一個工作階段中反覆嘗試多個規劃版本時，這一點非常實用。
在下載前先驗證結果
規劃中的最後一步，是在你決定下載之前先驗證結果。回報的幀數應與你為該檔案計算的結果一致，而回報的峰值直條數應等於所要求的寬度、1,000，以及幀數三者中的最小值。如果直條數低於你所要求的寬度，代表這段音訊比你規劃的還短，你可能會想要降低寬度，或是挑一段更長的檔案。
可展開的 SVG 檢查器會顯示完整的產生內容，而下載的正是那段一模一樣的字串。座標是確定性的:垂直中心為所要求高度的一半，而滿刻度的正向或負向取樣會由該中心向上或向下延伸至高度的 45%，在上下各保留 5% 的邊界。如果你在任何支援 SVG 的編輯器中開啟下載的 SVG，這些尺寸與位置應能完全重現預覽中所顯示的結果。
如果你依照規劃執行後，預覽看起來仍然不對，在產生音訊波形後檢查結果指南涵蓋了常見的驗證方式。一旦直條數、座標與色彩都符合規劃，這個 SVG 就能直接放入版面配置中，或是交給設計師接手。