how do i troubleshoot a problem when i generate audio waveform
產生音訊波形時的疑難排解

產生音訊波形時,通常哪裡會出錯

排解音訊波形產生器的問題時,需依序檢查三件事:瀏覽器是否成功解碼您的檔案、所選的尺寸與顏色是否落在支援範圍內,以及回報的影格與欄數是否符合您的預期。大多數的失敗並非繪圖程序的錯誤,而是輸入內容超出解碼器或 SVG 建構器所能接受的限制。音訊波形產生器會在目前的瀏覽器分頁中於本地端執行每個步驟,因此問題通常在您選擇檔案或點擊產生的那一刻就會出現,而不是稍後才以神秘的空白方式顯現。

在開始變更設定之前,請先辨識您看到的是哪種症狀。是選取檔案時發生錯誤,還是預覽只是看起來不對?是預覽從未出現,還是即使在您變更輸入後仍顯示舊的預覽?是下載的 SVG 無法開啟,還是能開啟但看起來是空白或被拉長?每種症狀皆指向管線中的不同層級:解碼、尺寸調整、顏色格式化,或過時的物件 URL 處理。

由於每個操作都在本地端執行,您也可以將頁面用作診斷工具。回報的解碼影格數會告訴您有多少音訊通過了限制。回報的峰值欄數則會告訴您該工具實際繪製了多少條獨立的垂直線。可展開的 SVG 檢查器會顯示即將儲存的完整字串。將這些數字與您的預期進行比較,通常是定位問題最快速的方法。若需超出本工具範圍、更廣泛的瀏覽器層級修正,音訊波形產生功能無效指南會更深入地說明編碼與瀏覽器的支援情況。

優先檢查檔案格式與解碼限制

音訊波形無法產生的最常見原因,是 Web Audio 無法解碼該檔案。音訊波形產生器接受 MP3、WAV、M4A、AAC、Ogg、WebM 或 FLAC,但前提是目前的瀏覽器與作業系統實際支援其真實的編解碼器。副檔名或 MIME 標籤無法保證能順利解碼。不支援、損毀、空的或偽裝的檔案會直接回傳錯誤,而不是產生部分波形,因此出現沒有 SVG 的空白結果,通常代表解碼器直接拒絕了該檔案。

本站音訊工具所採用的相同解碼資料限制亦適用於此。壓縮檔案的大小最多為 50 MiB。解碼後的音訊長度不得超過 5 分鐘、聲道數介於 1 到 8 之間、取樣率介於 8,000 至 192,000 Hz,且總聲道樣本數不得超過 3,000 萬。這些檢查之所以重要,是因為一個小的壓縮檔案可能會展開成大得多的浮點聲道陣列,而超出限制的音訊會整體遭到拒絕 — 絕不會僅以開頭部分靜悄悄地產生波形。

當限制標記出您的檔案時,修正方式是在產生之前先進行裁剪、轉檔或重新取樣。能匯出有限範圍 WAV 的音訊編輯器是最簡便的方式。若您的檔案明顯低於所有限制卻仍然失敗,問題就在於編解碼器的支援而非檔案大小,請在同一瀏覽器中嘗試不同的格式(例如 WAV 或 FLAC)以進行確認。使用已知可用的 1 分鐘 WAV 進行快速測試,即可立即判斷工具本身是否正常運作。

會導致靜默拒絕的限制

檢查項目允許範圍超出時的結果
壓縮檔案大小上限 50 MiB解碼前即遭拒絕
解碼後長度上限 5 分鐘整體遭到拒絕
聲道數1 至 8整體遭到拒絕
取樣率8,000 至 192,000 Hz整體遭到拒絕
總聲道樣本數上限 30,000,000整體遭到拒絕

驗證寬度、高度與顏色設定

若檔案能解碼但預覽仍然看起來不對,下一個要檢查的層級就是 SVG 設定。音訊波形產生器接受的寬度介於 320 至 1,600 像素之間,高度介於 120 至 600 像素之間。超出這些範圍的值將不被接受,在您將數值調回範圍內之前,預覽無法顯示。若您是在欄位中手動輸入數值,請確認該值會以像素而非百分比或單位後綴的形式進行解析。

背景與波形的顏色必須來自瀏覽器的六位數十六進制顏色控制項。貼上 CSS 顏色名稱、三位數十六進制值、RGB 元組,或是含有 alpha 通道的顏色皆無法通過驗證,SVG 也將無法建構。若您不確定顏色是否已被接受,請在產生後開啟可展開的檢查器。SVG 文字應恰好包含兩個十六進制值,一個用於背景矩形,一個用於峰值線群組,且不應嵌入其他顏色字串。

SVG 座標是確定性的。垂直中心為所要求高度的一半,而全幅的正負樣本會以該中心為基準,向上或向下延伸至高度的 45%。因此頂部與底部各留有 5% 的邊界。欄位會在所要求的寬度上平均置中。若您的預覽看起來垂直被壓縮,或出現非預期的空白,表示尺寸並未依您輸入的內容保留,而檢查器檢視將會顯示實際使用的數值。

透過影格與欄數診斷結果

頁面在產生後會回報兩個數字:解碼後的樣本影格數,以及實際的峰值欄數。比較這兩者即可判斷視覺化結果是否如實呈現。欄數會是所要求的影像寬度、1,000,以及解碼後影格數三者中的最小值。因此短片段不會捏造出比其內容更多的獨立測量值,而長片段則會維持在有界限的 SVG 與處理預算之內。

若回報的欄數符合您的寬度,且接近或低於 1,000,代表峰值包絡線繪製無誤,且檔案解碼乾淨。若欄數遠低於影格數,代表音訊長度超出欄數預算,您所看到的是降階後的概覽,而不是逐樣本的檢視。若想取得更密集的畫面,請調低寬度,讓每個影格皆能分配到欄位,或是裁剪片段,讓更多影格能納入上限範圍內。

桶位邊界是由整數影格索引所衍生。第一個桶位從影格零開始,最後一個桶位延伸至最終的解碼影格,相鄰範圍之間不會省略任何已被接受的影格。針對多聲道音訊,影像會呈現為合併的峰值概覽:單一桶位的最小值可能來自某個聲道,而最大值則可能來自另一個聲道。若您需要獨立的左右聲道,那是另一項任務,而能將各聲道分別匯出為獨立音軌的音訊編輯器,才是合適的工具。

逐步修正問題

要清除頑強問題最快速的方法,就是以乾淨的輸入再次依序檢查相同的三個層面。

  1. 選擇一個位於所述壓縮與解碼限制內、且瀏覽器可解碼的音訊檔案。若先前的檔案產生錯誤,請先嘗試已知可用的 WAV 或 FLAC,以確認頁面本身運作正常。
  2. 將 SVG 寬度設定為介於 320 至 1,600 像素之間的值,高度設定為介於 120 至 600 像素之間的值。直接從瀏覽器的色彩選擇器中挑選兩個六位數的十六進制顏色,分別用於背景與波形。
  3. 點擊產生,並讀取回報的解碼影格數與峰值欄數。確認兩者皆不為零,且欄數為寬度、1,000,以及影格數三者中的最小值。
  4. 檢查預覽並開啟可展開的 SVG 檢查器。確認背景顏色、波形顏色與線條數符合您所要求的內容,並確認 SVG 文字包含一個背景矩形與一個峰值線群組。
  5. 下載 SVG。在任何支援 SVG 的編輯器中開啟,以確認尺寸、viewBox 與線條集在不同顯示尺寸下皆能正確呈現。

何時應直接檢查 SVG 文字

頁面會在可展開的檢查器中顯示所產生的完整 SVG 文字,而下載的內容也會使用完全相同的字串。若預覽看起來正確,但下載的檔案看起來有誤,則差異幾乎都來自工具之外:可能是過時的快取檔案、不遵循 viewBox 的檢視器,或是下游編輯器以不同的方式解讀了像素尺寸。請開啟檢查器、複製該字串,並將其另存為 .svg 檔,以排除下載步驟所帶來的變數。

下載的內容是文字型 SVG,而非 PNG、JPEG、影片或音訊。其中包含一個背景矩形,以及一組具有固定像素尺寸與相符 viewBox 的峰值線條。SVG 在以其他顯示尺寸放置時仍能保持清晰,但在極大的印刷或編輯工作流程中,可能仍需要不同的筆畫寬度或更詳細的來源資料。這是格式本身的特性,而非產生器的瑕疵。

若峰值波形並非經過校準的響度量測工具,兩段錄音可能會有相似的峰值,但聽起來卻截然不同,因為感知響度取決於長度、頻率平衡、動態範圍與播放條件。此圖片亦非頻譜圖:時間由左至右遞增,而垂直線所代表的是樣本振幅範圍,而非頻率。若您的工作流程需要響度、頻率或聲道分離的分析,請將其視為個別的任務,並選用合適的工具,而非試圖從 SVG 中讀出超出其包絡線方法所能提供的更多資訊。