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

audio waveform generator after effects
audio waveform generator after effects

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 檔案以便替換至專案中。

逐步產生波形

  1. 在規定的限制內選擇一個瀏覽器可解碼的音訊檔案。壓縮檔案必須為 50 MiB 或以下,且解碼後的音訊長度不得超過五分鐘,須包含一至八個聲道,採用 8,000 至 192,000 Hz 之間的取樣率,且總聲道取樣數不得超過 3,000 萬。不支援、損壞、空檔或偽裝的檔案會回傳錯誤,而非產生不完整的圖片。
  2. 設定 SVG 尺寸與顏色,然後產生。使用瀏覽器的六位數十六進制控制項,選擇 320 至 1,600 像素之間的寬度、120 至 600 像素之間的高度、背景顏色以及波形顏色。點擊「產生」以建立本機峰值包絡線。所繪製的欄位數等於所要求的圖片寬度、1,000 與解碼後訊框數三者中較小者,因此短片段永遠不會被填充虛構的測量值,而長片段則保持在有界限的 SVG 與處理預算之內。
  3. 檢查預覽,然後下載。讀取所回報的訊框數與峰值欄位數,展開檢查器以檢視精確的 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 將音訊轉換為波形圖片