當您需要以靜態方式概觀振幅隨時間的變化，尤其是產物必須是具有固定尺寸與顏色且可編輯的 SVG 時，請產生音訊波形。 這是一項簡報與檢視工作：時間由左向右推進，每個垂直標記顯示音訊某個區段中找到的最小與最大取樣範圍。它並非完整分析錄音內容或其播放音量。
為滿足這項特定需求，音訊波形產生器會在目前的瀏覽器分頁中解碼一個選定的檔案、計算有上限的峰值包絡、預覽結果，並匯出所檢視的 SVG。音訊解碼、峰值擷取、SVG 產生、預覽與下載皆在本地進行；音訊檔案與產生的圖像都不會上傳至 Lizely。輸出結果為以文字為基礎的 SVG，而非 PNG、JPEG、影片或音訊。
音訊波形能發揮價值的時機
恰當的觸發條件是溝通需求：在無法播放錄音的位置，或需要快速視覺摘要的位置，呈現錄音的大致形狀。當編輯、設計師或開發人員需要可重複使用的向量素材，而非暫時性的播放器顯示時，波形尤其有用。
- 網頁或文件插圖：在教學、案例研究、章節標記或文章旁加入音訊脈絡，且無須使用互動式播放器。
- 編輯或設計審查：檢視整段錄音的大致振幅包絡。
- 版面規劃：為音訊視覺內容預留可預期的區域，並為單一音訊片段或素材集合建立一致的外觀。
- SVG 交接：向支援 SVG 的編輯器提供確切的尺寸、背景與波形顏色，以及可編輯的向量標記。
- 本地處理：在目前的瀏覽器分頁中建立概觀圖，且不將來源音訊傳送至伺服器。
不要僅因為有音訊檔案就產生波形。這個視覺圖可以顯示活動在時間上的集中區域，但無法說明活動存在的原因，也無法單獨揭示音樂結構。
將問題與正確的視覺化方式配對
先從視覺圖必須回答的問題開始。不同輸出適合解決不同問題，選擇錯誤的輸出，可能讓簡單的插圖看起來像分析證據。
| 問題 | 最適合的輸出 | 原因 |
|---|---|---|
| 取樣振幅如何隨時間變化？ | 時域波形 | 峰值包絡正是用來呈現此類模式。 |
| 存在哪些頻率？ | 頻譜圖或頻率分析器 | SVG 的垂直軸代表振幅，而非頻率。 |
| 錄音聽起來有多響？ | 校準響度測量 | 單憑峰值無法考量持續時間、頻率平衡、動態或播放條件。 |
| 節拍、音符、瞬態或音樂結構位於何處？ | 專業音訊分析 | 產生器不會計算這些特徵。 |
| 左右聲道是否有差異？ | 具有獨立聲軌的音訊編輯器 | 產生器會將所有聲道合併成單一概觀圖。 |
| 音訊是否發生削波、相位受損或不符合規範？ | 測量工具與具備資格的審查 | 靜態圖片無法診斷這些情況。 |
| 我是否需要 PNG、影片或音訊檔案？ | 特定格式的編輯器或匯出工具 | 產生器只會下載 SVG。 |
音訊波形產生器適合第一列的用途：提供幾何尺寸與顏色皆受控制的靜態視覺概觀圖。請將它視為插圖或參考素材，而非錄音感知響度、頻率內容、聲道平衡或技術符合性的證據。
SVG 實際測量的內容
輸出結果為時域峰值包絡。解碼後的框架索引會分割成等長且連續的範圍。針對每個範圍，工具會找出所有已解碼聲道中的最小與最大有限取樣，將防禦性處理後超出範圍的值限制在 -1 至 1 之間，並從該區塊的最大值向最小值繪製一條垂直線。欄數為所要求影像寬度、1,000 與解碼框架數三者中的較小值。因此，較短的音訊片段不會憑空產生獨立測量值，而較長的片段則仍維持在有上限的 SVG 與處理預算之內。
對於立體聲與多聲道音訊，結果為單一合併的峰值概觀圖。一個區塊的最小值可能來自某個聲道，而最大值則來自另一個聲道。圖像不會顯示獨立聲道區、在視覺上保留聲道識別，也不會將各聲道平均成新的音訊訊號。原始音訊絕不會被重寫。如果需要獨立的左右聲道波形，請使用可將各聲道呈現為獨立音軌的音訊編輯器。
座標遵循固定規則。垂直中心位於所要求高度的一半，而滿刻度的正或負取樣會延伸至中心上方或下方 45 percent 的高度。這會在頂端與底部各保留五 percent 的邊距，且各欄會在所選寬度內均勻置中。
在本地產生符合規範的波形
當檔案、設定與預期輸出均符合產生器的限制時，請使用此工作流程。
- 選擇一個瀏覽器可解碼的音訊檔案。只有在目前的瀏覽器與作業系統支援實際的編碼格式時，才能透過 Web Audio 讀取 MP3、WAV、M4A、AAC、Ogg、WebM 與 FLAC；副檔名或 MIME 標籤無法保證可以解碼。壓縮檔案的大小必須不超過 50 MiB。解碼後的音訊長度不得超過五分鐘，必須包含一至八個聲道，取樣率介於 8,000 至 192,000 Hz 之間，且通道取樣總數不得超過 30 million。超出限制的音訊會整體遭到拒絕，而不是在未告知的情況下僅保留開頭部分。這個瀏覽器端處理階段使用 Web Audio API 的 AudioBuffer 模型。
- 設定 SVG 的尺寸與顏色。選擇介於 320 至 1,600 像素的寬度，以及介於 120 至 600 像素的高度。使用六位數十六進位控制項選取背景與波形顏色。這些設定會決定最終的固定像素 SVG，而不會變更來源音訊。
- 產生本地峰值包絡。工具會將解碼後的框架索引分割成連續區塊，計算每個區塊中所有聲道的最小值與最大值，並建立相應的垂直峰值線。產生與 SVG 建構作業都會留在目前的分頁中。
- 檢查數量並檢視結果。檢查回報的解碼框架數與峰值欄數。開啟預覽或可展開的 SVG 檢視器，確認尺寸、viewBox、背景、波形顏色與線條組合皆符合預期素材。
- 下載確切的 SVG。下載內容會使用檢視器中顯示的相同字串。它是可編輯、以文字為基礎的 SVG，可在支援 SVG 的編輯器中開啟，放置於其他顯示尺寸時仍保持清晰。如果您取代檔案、變更選項、再次產生或離開頁面，過期的物件 URL 就會被撤銷，避免較舊的圖像看似代表新的輸入內容。
發布前審查素材
請將預覽視為最終設計素材，而非暫時性的縮圖。
- 數量：預期欄數為所要求寬度、1,000 與解碼框架數三者中的較小值。簡短的錄音可能包含較少的欄數，而較長的錄音則維持上限。
- 尺寸：確認所要求的寬度與高度符合 SVG 的固定像素尺寸及對應的 viewBox。
- 外觀：檢查背景與波形顏色、線條密度，以及頂端與底部的五 percent 邊距。
- 輸出識別：檢查 SVG 文字，其中包含一個背景矩形與一組峰值線，並確認下載的檔案與預覽中顯示的字串相同。
同樣也要留意解讀上的限制。峰值波形並非校準響度計，兩段具有相似峰值的錄音可能聽起來非常不同。它也不是頻譜圖：時間由左向右延伸，但垂直線代表的是取樣振幅範圍，而非頻率。請勿使用這張圖片來診斷聽力、設備、削波歷程、相位或母帶處理符合性。極大型印刷或編輯工作流程也可能需要不同的線條寬度或更詳細的來源資料。
將結果放入您的專案
請將 SVG 用於網頁、簡報投影片、文件、編輯版面、設計模型或支援 SVG 的編輯器。當單張靜態圖像能傳達大致振幅模式，且向量縮放、精確顏色與可檢查標記是優先考量時，其效果最佳。由於檔案包含固定像素尺寸與對應的 viewBox，以其他尺寸顯示時仍能保持清晰。
若要製作 After Effects 專案，請依照如何將自訂音訊波形 SVG 匯入 After Effects的步驟操作。如果目的地需要 PNG、JPEG、影片或音訊檔案，請使用合適的軟體另行匯出或轉換素材。請勿將此靜態 SVG 用於取樣精確的編輯、獨立聲道顯示、播放或分析結論。