一款適用於 After Effects 的 SVG 音訊波形產生器,是一個在本機瀏覽器中運作的工具,它會解碼音訊檔案、計算每個時間區間的最小與最大取樣峰值,然後匯出一個可縮放的向量圖形,讓您可以匯入 After Effects 作為形狀圖層、參考線圖形或合成元件。其結果是一個銳利、與解析度無關的峰值波形,具備您自行指定的固定像素尺寸——寬度介於 320 至 1,600 像素之間,高度介於 120 至 600 像素之間——並搭配一個相符的 viewBox,使其在任何合成縮放比例下都能保持清晰。由於每一條線都是依據經過驗證的數字與色彩繪製,而非來自檔案名稱或嵌入的中繼資料,因此該圖形具備確定性且可編輯:在文字編輯器中開啟 SVG,每個峰值欄位都是一個座標已知的純文字 line 元素。這使它非常適合作為靜態參考底圖、標誌風格的波形疊加,或作為您使用 After Effects 自身路徑工具描繪的起始圖層。該圖片是一個峰值包絡線——它並非 After Effects 內部與時間同步的 Audio Spectrum 效果,也不是頻譜圖或響度計量器。

After Effects 音訊波形產生器的功能
音訊波形產生器使用刻意簡化的包絡線方法,將瀏覽器可解碼的音訊檔案轉換為靜態 SVG 峰值總覽。Web Audio 僅在當前瀏覽器與作業系統確實支援該編解碼器時,才會解碼所選的 MP3、WAV、M4A、AAC、Ogg、WebM 或 FLAC 檔案——擴充功能或 MIME 標籤並無法保證解碼,且不支援、損壞、空檔或偽裝的檔案會回傳錯誤。解碼完成後,工具會將每個取樣訊框劃分為連續的整數索引區間,並為每個區間繪製一條垂直線,從該區間的限制後最小值延伸至其限制後最大值,跨越所有接受的聲道。處理、色彩驗證、預覽渲染與下載皆透過 Web Audio AudioBuffer 表示法在當前分頁中完成;不會上傳至遠端伺服器,且原始音訊永遠不會被重新寫入。
為何 SVG 波形對 After Effects 專案有幫助
After Effects 能以多種方式將 SVG 讀取為資產:作為連續點陣化的素材圖層、透過 Illustrator 往返流程作為形狀圖層來源,或作為主要動畫背後的參考合成元件。由於 SVG 帶有精確的像素尺寸與 viewBox,因此在縮放至 4K 合成、社交媒體直式影片或印刷尺寸海報時,無需重新渲染即可保持銳利。您也可以在任何編輯器中開啟 SVG 文字,調整描邊寬度、重新設定背景或峰值線的顏色,或在重新匯入前重新排列欄位——這是烘焙後的 PNG 或 JPEG 完全無法提供的功能。如果您的專案在合成前還需要修改音訊本身,您可以使用在 After Effects 中變更音訊音高這個本機瀏覽器步驟,產生一個全新的 WAV 檔案以便替換至專案中。
逐步產生波形
- 在規定的限制內選擇一個瀏覽器可解碼的音訊檔案。壓縮檔案必須為 50 MiB 或以下,且解碼後的音訊長度不得超過五分鐘,須包含一至八個聲道,採用 8,000 至 192,000 Hz 之間的取樣率,且總聲道取樣數不得超過 3,000 萬。不支援、損壞、空檔或偽裝的檔案會回傳錯誤,而非產生不完整的圖片。
- 設定 SVG 尺寸與顏色,然後產生。使用瀏覽器的六位數十六進制控制項,選擇 320 至 1,600 像素之間的寬度、120 至 600 像素之間的高度、背景顏色以及波形顏色。點擊「產生」以建立本機峰值包絡線。所繪製的欄位數等於所要求的圖片寬度、1,000 與解碼後訊框數三者中較小者,因此短片段永遠不會被填充虛構的測量值,而長片段則保持在有界限的 SVG 與處理預算之內。
- 檢查預覽,然後下載。讀取所回報的訊框數與峰值欄位數,展開檢查器以檢視精確的 SVG 文字,然後下載檔案。下載使用的字串與檢查器顯示的內容完全相同,而選擇替換檔案、更改選項、再次產生或離開頁面,都會撤銷已失效的物件 URL,使舊的圖片無法顯示為代表新的輸入。
將 SVG 帶入 After Effects
將下載的 .svg 儲存於 After Effects 專案可存取的位置。將該檔案拖曳至 Project 面板,接著將產生的資產拖曳到一個新的合成上。After Effects 會以連續點陣化的素材圖層形式匯入 SVG,採用資產的原生像素大小;若您在匯出時將 SVG 放大或縮小,viewBox 會在新尺寸下保持銳利。將該圖層視為任何藝術底圖:預合成、套用 Track Matte、進行顏色校正,或將其作為參考線,逐幀描繪與包絡線相符的自訂形狀圖層。由於 SVG 為純文字,您也可以在 Illustrator 中重新上色或調整樣式,然後重新匯入,無需從頭重建波形。
當您需要快速的動態讀數時,這種方法可與 AE 內建的 Audio Spectrum 和 Audio Waveform 效果自然搭配使用,因為靜態 SVG 提供可控的參考底圖,而內建效果則提供與時間同步的即時視覺化。當您需要精確的顏色、精確的尺寸,以及一個可在多次往返中存活的可編輯檔案時,請使用 SVG。
峰值包絡線如何對應至像素
SVG 座標具有確定性且易於推導。垂直中心為所要求高度的一半,而滿刻度的正負取樣會延伸至中心上下各 45% 的高度範圍,在畫布頂部與底部各保留 5% 的邊界。以所要求的 400 像素高度為例,計算方式如下:中心 y = 400 ÷ 2 = 200;滿刻度頂部 y = 200 − (400 × 0.45) = 200 − 180 = 20;滿刻度底部 y = 200 + (400 × 0.45) = 200 + 180 = 380。因此,一個區間最小值為 −1.0、最大值為 +1.0 的峰值欄位將以垂直線形式呈現,從 y = 20 延伸至 y = 380。欄位在所要求寬度上均勻置中,而多聲道處理方式則是合併各聲道的極值,而非取其平均值——一個區間的最小值可能來自某個聲道,而最大值則可能來自另一個聲道,產生的是一個合併後的峰值總覽,而非獨立的左右聲道分隔線。原始音訊永遠不會被重新寫入;若您需要獨立的聲道波形,請使用能將每個聲道各自匯出為音軌的音訊編輯器。
以下比較說明峰值包絡線所擷取的內容與其刻意省略的內容。
| 圖片所顯示的內容 | 圖片未顯示的內容 |
|---|---|
| 每個區間的時域最小與最大取樣值 | 頻率內容、諧波或頻譜形狀 |
| 跨所有接受聲道的合併峰值總覽 | 獨立的左右聲道分隔線或個別聲道識別 |
| 將非有限值或超出範圍的取樣防禦性地限制在 ±1 | 以 LUFS、dBFS 峰值或 K 加權單位表示的校準響度 |
| 靜態、與解析度無關的向量線加上背景矩形 | 節拍、音符、暫態、語音識別或音樂結構 |
| 保留每個區間的短暫正負峰值 | 相位關係、削波歷史或母帶處理合規性 |
須遵守的檔案、大小與解碼限制
這些限制會在產生任何 SVG 之前進行預先檢查,因為一個小型的壓縮檔案經 Web Audio 解碼後,可能會展開成大得多的浮點聲道陣列。超出限制的音訊會整體遭到拒絕——波形絕不會僅以檔案開頭部分悄悄建立。
| 限制 | 接受的範圍或數值 |
|---|---|
| 壓縮檔案大小 | 最大 50 MiB |
| 解碼後長度 | 最長 5 分鐘 |
| 聲道數 | 1 至 8 |
| 取樣率 | 8,000 Hz 至 192,000 Hz |
| 總聲道取樣數 | 最多 30,000,000 |
| SVG 寬度 | 320 至 1,600 像素 |
| SVG 高度 | 120 至 600 像素 |
| 所繪製的峰值欄位數 | Min(所要求寬度, 1,000, 解碼後訊框數) |
| 顏色格式 | 瀏覽器選取器中的六位數十六進制 |
若印刷流程需要極度放大,SVG 仍可保持銳利,但可見的描邊寬度可能需要在 Illustrator 中重新調整,或者您可能希望從更詳細的來源視覺化開始——此處的包絡線方法刻意保持簡化,並不以成為校準儀器為目標。兩段錄音可能呈現相似的峰值形狀,但聽起來卻截然不同,因為感知響度取決於持續時間、頻率平衡、動態範圍與播放條件,而非僅取決於靜態振幅範圍。請將 SVG 作為 After Effects 中的視覺建構區塊使用,而非作為削波歷史、相位、聽感或母帶處理合規性的診斷工具。
相關閱讀:免費使用本機 SVG 將音訊轉換為波形圖片。