產生音訊波形圖的正確做法，取決於你需要這張圖回答什麼問題——是取樣振幅隨時間的變化、頻率內容，或是感知響度——而 Audio Waveform Generator 以確定性的、瀏覽器本機處理的 SVG 峰值包絡線，提供第一種答案。時域峰值會顯示每個短區段中已解碼音訊內的最小與最大取樣值，並以每個區段一條垂直線的方式繪製，讓短暫的暫態信號能夠如實保留。當你需要一張可縮放、可編輯的靜態圖，用於投影片、社群貼文、影片時間軸或設計 mockup，而且不需要經過校準的響度、頻率或拍點資訊時，這種簡單的包絡線就是最佳選擇。頻率導向的方法（頻譜圖）與響度導向的計量器能回答不同的問題，需要不同的數學運算，而且學習曲線通常更陡。峰值包絡線的做法也能透過 Web Audio API 的 AudioBuffer 介面，把所有處理程序都保留在目前的瀏覽器分頁中執行，因此原始檔案與產生的 SVG 結果都不會傳送到任何伺服器。本文將逐步說明如何判斷時域峰值包絡線是否適合你的目標，並示範如何透過 Audio Waveform Generator 從頭到尾產生一張波形圖。
依據你想回答的問題選擇對應的視覺化方式
最常見的錯誤選擇方式，是在還不清楚圖片要回答什麼問題之前就開始產生波形。常見的三種波形家族各自解決三種不同的問題，而每一種都需要不同的工具鏈：
- 時域峰值包絡線繪製的是一小段連續音訊範圍內的最小／最大取樣值。它用一張能乾淨縮放的單一圖片，回答「訊號在什麼時候、有多響？」。
- 頻譜圖透過短時 FFT 計算頻率隨時間的變化。它回答的是「存在哪些音高、諧波或噪音，以及出現在什麼時候？」。
- 響度計量器採用感知模型並對時間視窗進行積分。它回答的是「對聽眾而言，這段聲音平均或峰值聽起來有多響？」。
如果你的產出物是靜態的視覺素材——例如 Podcast 宣傳用的波形條、音訊產品頁的 hero image、影片播放器下方的佔位圖——那麼峰值包絡線就是該問對的家族。如果你需要診斷 EQ、暫態、母帶合規性或聽力風險，峰值包絡線就不是合適的家族，你應該改用其他工具。Audio Waveform Generator 明確屬於時域峰值包絡線；它不會計算頻率、拍點、音高、響度、語音內容或音樂結構。
當隱私與可編輯性很重要時，選擇本機瀏覽器做法
一旦確定要使用峰值包絡線，下一個決策就是運算要在哪裡執行。伺服器端的產生器會上傳檔案、在遠端硬體上處理，再回傳一張 PNG 或 SVG。這對很多人來說可行，但它有一些取捨，往往會把人推向相反的方向：
- 音訊會離開你的裝置，這對未發行的音樂、客戶機密的語音備註、醫療或法律錄音，或內部產品音訊來說是個問題。
- 回傳的圖片通常是扁平化的點陣圖，因此在向量編輯器中無法乾淨地重新上色、調整大小或重新編排文字型態而不損失品質。
- 結果會受到你無法掌控的伺服器端編解碼器與處理路徑影響，因此同一個檔案在兩個不同服務上可能看起來略有差異。
Audio Waveform Generator 採取相反的路徑：解碼、峰值擷取、SVG 產生、預覽與下載，全部都在目前的瀏覽器分頁中透過 Web Audio API 的 AudioBuffer 介面完成。不會上傳任何東西，下載的也是可編輯的文字式 SVG，而非扁平化的點陣圖。如果你想進一步了解為什麼這件事很重要，伺服器上傳隱私指南詳細說明了本站音訊工具所使用的同一套本機解碼合約。
在開始前先確認檔案與格式是否合適
本機解碼的做法有明確的限制，因為音訊一旦被解碼為浮點數聲道陣列，資料量可能會大幅膨脹。一個 50 MiB 的 MP3 若是長度很長且聲道數高，解碼後的記憶體緩衝區可能會大得多。Audio Waveform Generator 會在超過上限時直接拒絕整個檔案，而不是默默截斷，所以預先確認檔案是否符合限制，可以避免白工：
| 限制條件 | 可接受範圍 |
|---|---|
| 壓縮檔大小 | 上限 50 MiB |
| 解碼後長度 | 上限 5 分鐘 |
| 聲道數 | 1 至 8 個聲道 |
| 取樣率 | 8,000 Hz 至 192,000 Hz |
| 解碼後聲道取樣數 | 總計上限 30,000,000 |
瀏覽器與作業系統實際能解碼的壓縮編碼格式也各不相同。可接受的標籤為 MP3、WAV、M4A、AAC、Ogg、WebM 與 FLAC，但副檔名或 MIME 標籤只是提示，無法保證一定能解碼。這個工具會要求瀏覽器透過 Web Audio 進行解碼，而不支援的、損壞的、空的或偽裝的檔案會回傳錯誤，而非產生不完整的圖片。如果你需要更長的音檔、更高的聲道數，或是瀏覽器不支援的編碼，請先在音訊編輯器中裁切或轉檔後再產生波形。
產生時域峰值包絡線
確認檔案符合限制後，實際產生波形只需要幾個點擊。請依照下列步驟，在本機產生一張確定性的 SVG 峰值包絡線：
- 在瀏覽器分頁中開啟 Audio Waveform Generator，並選擇一個瀏覽器可解碼的音訊檔（MP3、WAV、M4A、AAC、Ogg、WebM 或 FLAC），且需符合上述限制。
- 設定 SVG 寬度在 320 至 1,600 像素之間，高度在 120 至 600 像素之間，並使用六位數十六進位值設定背景顏色與波形顏色。
- 點擊產生。已解碼的幀會被切分為等長的索引範圍；工具會在每個範圍中，從所有已解碼聲道裡找出最小與最大的有限取樣值，並把防禦性的超出範圍值限制在 -1 到 1 之間，然後從每個區段的最大值到最小值繪製一條垂直的 SVG 線。
- 查看回報的幀數與峰值欄數，確認你所設定的寬度內實際容納了多少獨立的測量值。
- 檢視預覽，或開啟 SVG 文字檢查器，以視覺方式確認尺寸、顏色與線條數是否符合你的預期。
- 下載 SVG。下載的內容與檢查器中顯示的文字完全一致，因此你看到什麼就會存下什麼。
驗證結果並檢查 SVG 文字內容
驗證是多數人會跳過的步驟，而這正是本機 SVG 做法真正發揮價值的地方。回報的欄數會取你要求的寬度、1,000 與已解碼幀數三者的最小值，因此短音檔絕不會產生比它實際擁有的獨立測量更多的欄數，而長音檔也能維持在有界限的 SVG 與處理預算內。區段邊界使用整數的幀索引：第一個區段從第零幀開始，最後一個區段會延伸到最後一個已解碼幀，相鄰範圍之間不會遺漏任何已接受的幀。滿刻度的正或負取樣會從垂直中心向上或向下延伸至所要求高度的 45%，在上下各保留 5% 的邊界，讓峰值不會碰到邊緣。以一張 400 像素高的圖來說，這代表滿刻度取樣可從中心分別向上與向下移動 180 像素，計算方式為 400 乘以 0.45。對於多聲道音訊，圖片呈現的是合併後的峰值總覽：同一個區段的最小值可能來自某個聲道，最大值則可能來自另一個聲道，並不會有獨立的左右聲道分軌。如果你需要針對各聲道的獨立軌道或平均結果，請改用能將每個聲道分別顯示為獨立音軌的音訊編輯器。請開啟 SVG 檢查器，複製標記內容，貼到文字編輯器中，確認 viewBox、背景矩形與線條群組的設定與你所設定的尺寸與顏色相符，再把圖片正式用於你的專案中。
延伸閱讀：在開始前先比較各種音訊波形產生方法。