音訊波形產生可以採用三種主要方式:伺服器端處理,會上傳你的檔案;音訊或影片軟體內的編輯器原生波形;以及本機瀏覽器解碼,將解碼後的峰值包絡轉成可縮放的 SVG。每種方式都在處理位置、輸出格式以及影像實際代表的內容之間取捨,因此正確的選擇取決於你需要的是可攜式資產、嵌入式預覽,還是僅僅是快速的可視化參考。位於 /audio/waveform-generator/ 的音訊波形產生器採用本機瀏覽器路徑,在當前分頁中解碼 MP3、WAV、M4A、AAC、Ogg、WebM 或 FLAC,將解碼後的訊框劃分為等量區塊,每個區塊繪製一條垂直 SVG 線,範圍涵蓋所有聲道的最小值到最大值,並回傳具有固定像素尺寸與相符 viewBox 的靜態 SVG。並排比較這些方式意味著權衡每種方法實際對音訊做了什麼、留下了什麼,以及產生的檔案是否符合你打算放置的位置。

波形產生方式一覽
三類方法涵蓋了大多數日常的波形產生需求,而合適的選擇取決於你的音訊位於何處、影像最終會放在哪裡,以及你希望對結果有多少控制權。沒有一種是普遍最佳,並排比較時差異會一目了然。
| 方式 | 處理發生的位置 | 輸出格式 | 最適合 |
|---|---|---|---|
| 本機瀏覽器峰值包絡 | 你當前的分頁,使用 Web Audio | 具有精確像素尺寸的可編輯 SVG | 可攜式資產、編輯器匯入、快速視覺參考 |
| 伺服器端波形 API | 上傳後的遠端服務 | 通常為 PNG、JSON 峰值或預先渲染的影片 | 為串流目錄預先產生波形的高流量應用程式 |
| 編輯器原生波形 | 在 DAW 或非線性編輯器內 | 綁定軟體的預覽,有時可匯出 | 在編輯音訊的同一專案內作業 |
當你不希望檔案離開裝置、需要任何顯示尺寸下都保持清晰的向量資產,或希望得到與精確像素尺寸相符的確定性影像時,本機瀏覽器路徑就顯得重要。音訊波形產生器屬於此類,其設計核心是產生一個乾淨的 SVG,可交給向量編輯器或匯入動態軟體。
峰值包絡實際呈現的內容(與無法呈現的內容)
峰值包絡是隨時間繪製的取樣振幅概覽,理解它代表的內容是正確使用影像與過度解讀之間的差別。任何比較方式的人都應在開始前先知道這一點。
峰值包絡的垂直軸顯示的是取樣振幅,而非頻率。兩段錄音可能達到相近的峰值振幅但聽起來完全不同,因為感知響度取決於持續時間、頻率平衡、動態範圍與播放條件。因此峰值波形既不是校準過的響度計量表,也不是頻譜圖。它也無法診斷削波歷史、相位、聽力、設備行為或母帶合規性。Web Audio API 的 AudioBuffer 保存的是原始解碼後的取樣資料,而該影像是該資料的確定性視覺摘要,並非聆聽體驗的測量結果。
對於每個解碼訊框的區塊,該方法會取所有聲道中最小與最大的有限取樣值,將防禦性的超出範圍值箝制在負一與正一之間,並從區塊最小值到最大值繪製一條垂直線。這比每個區塊僅選取一個任意取樣值更能誠實地保留短暫的正負峰值,同時仍能產生具有有限欄數的乾淨影像。欄數是所要求的影像寬度、1,000 與解碼訊框數中的較小值,因此工具永遠不會產生比檔案所含更多的獨立測量結果。
如何在本機產生波形
本機瀏覽器方式簡短明確,以下步驟可產生可供檢查與下載的確定性 SVG。每個步驟職責單一,並銜接下一步。
- 在所述的壓縮與解碼限制內選擇一個瀏覽器可解碼的音訊檔案。Web Audio 僅在當前瀏覽器與作業系統支援該編解碼器時才能讀取 MP3、WAV、M4A、AAC、Ogg、WebM 或 FLAC,因此副檔名或 MIME 標籤並不能保證能解碼。
- 設定 SVG 寬度、高度、背景顏色與波形顏色,然後產生本機峰值包絡。可接受的寬度範圍為 320 到 1,600 像素,可接受的高度範圍為 120 到 600 像素。顏色必須來自瀏覽器的六位數十六進制顏色控制項,所有 SVG 標記均由經驗證的數字與這些顏色產生,而非從檔名或嵌入的來源中繼資料複製。
- 檢查回報的訊框數與峰值欄數。欄數是所要求的影像寬度、1,000 與解碼訊框數中的較小值,因此短片段永遠不會產生比其內容更多的獨立測量結果,長片段則會保持在有限的 SVG 與處理預算內。
- 在可展開的檢查器中檢查預覽或 SVG 文字,並下載精確的可縮放 SVG。下載的是文字式 SVG,而非 PNG、JPEG、影片或音訊,且頁面顯示的字串與儲存到裝置上的完全相同。
本機瀏覽器處理與伺服器端產生的比較
處理位置是比較方式最清晰的方式之一,並對隱私、延遲與錯誤輸入的復原有實際影響。方法的處理位置決定了誰能看到檔案。
使用伺服器端 API 時,音訊會離開裝置,在遠端機器上處理,然後回傳完成的影像。對於已將音訊儲存在雲端,或需要批次產生極大波形的服務來說,這種流程沒問題,但會引發明顯的疑問:誰能看到你的檔案、保留多久,以及上傳中途中斷會怎樣。從錯誤輸入中復原也更加困難,因為上傳失敗可能讓你既沒有原始檔案,也沒有波形。
音訊波形產生器全程保持在本地。音訊檔案或產生的圖形都不會上傳到 Lizely,因此音訊檔案與產生的 SVG 永遠不會離開當前瀏覽器分頁。Web Audio 讀取所選檔案,工具將解碼後的訊框劃分為連續的整數索引區塊,並由經驗證的數字與所選顏色產生 SVG。選擇替換檔案、變更選項、重新產生或離開頁面都會撤銷過時的物件 URL,因此舊影像無法顯示為新輸入的結果。想要更深入了解此權衡的讀者可參閱關於音訊檔案與波形是否上傳到伺服器的指南。
決定方法能否完成的限制
每種本機瀏覽器方法都有預算,本工具的預算反映了在分頁中將壓縮音訊解碼為浮點聲道陣列的現實。限制不是建議性的;它們決定 SVG 是否會出現。
壓縮檔案大小上限為 50 MiB。解碼後的音訊長度不得超過五分鐘,聲道數介於 1 到 8 之間,取樣率範圍為 8,000 到 192,000 Hz,且聲道取樣總數不得超過 3,000 萬個。較小的壓縮檔案在解碼後可能展開為更大的聲道陣列,這就是為什麼限制同時以壓縮位元組與解碼後聲道取樣數表示,而非僅採用其中之一。這些檢查很重要,因為視覺化必須保持在有限的 SVG 與處理預算內。
超出限制的音訊會被整體拒絕;波形不會僅從檔案開頭部分靜默產生。不支援、損壞、空的或偽裝的檔案會回傳錯誤而非部分結果。區塊邊界使用由每個區塊編號與總訊框數得出的整數訊框索引,第一個區塊從訊框零開始,最後一個區塊到達最終的解碼訊框,因此相鄰範圍之間不會遺漏已接受的訊框。
使用 SVG 前驗證結果
在任何比較中,匯出前檢查產生的影像是最後一步,因為可見的預覽並不總是能完整呈現 SVG 所包含的內容。良好的工作流程在檔案離開分頁前都應進行快速檢查。
頁面在可展開的檢查器中顯示精確產生的 SVG 文字,下載也使用相同的字串。SVG 座標是確定性的:垂直中心是所要求高度的一半,正負滿刻度取樣值延伸到該中心上下方各 45% 的高度,並在頂部與底部各保留 5% 的邊距。欄位在所要求的寬度上均勻置中。了解這些關係更容易發現錯誤的輸出,因為錯誤裁剪或錯誤計數的波形會以可預測的方式破壞數學。
對於多聲道音訊,該影像是合併的峰值概覽:某個區塊的最小值可能來自一個聲道,最大值來自另一個聲道。產生的結果不會顯示獨立的左右音軌、不會在視覺上保留聲道身份,也不會將聲道平均為新的音訊訊號。如果需要獨立的聲道波形,請使用可將每個聲道作為獨立音軌顯示的音訊編輯器。SVG 在以其他顯示尺寸放置時仍保持清晰,但極大的印刷或編輯工作流程可能仍需要不同的描邊寬度或更詳細的來源資料,因此如果目標尺寸大於所要求的像素範圍,請預先規劃。關於此階段的簡短後續操作說明,請參閱產生音訊波形後檢查結果的指南。