瞭解如何使用 about://tracing 和 Audion (Chrome 開發人員工具中的 WebAudio 擴充功能)，在 Chrome 中分析 Web Audio 應用程式的效能。
您會看到這份文件，可能是因為您正在開發使用 Web Audio API 的應用程式，但遇到非預期的故障，例如輸出內容出現爆音，或是聽到非預期的聲音。您可能已參與 crbug.com 討論，而 Chrome 工程師要求您上傳「追蹤資料」或查看圖表。
瞭解如何取得相關資訊，協助我們瞭解問題，並最終修正根本原因。
Web Audio 剖析工具
您可以使用兩種工具剖析 Web Audio，
about://tracing 以及 Chrome 開發人員工具中的 WebAudio 擴充功能。
何時使用 about://tracing？
發生神秘的「故障」時。使用追蹤工具剖析應用程式，可深入瞭解下列事項：
- 不同執行緒上特定函式呼叫所用的時間片段
- 時間軸檢視畫面中的「音訊回撥時間」
這通常表示錯過音訊回呼期限，或是發生可能導致音訊異常的垃圾回收事件。這項資訊有助於瞭解根本問題，因此 Chromium 工程師通常會要求提供這項資訊，尤其是在無法在本機重現問題時。請參閱一般追蹤操作說明。
何時使用 Web Audio 開發人員工具擴充功能？
如要顯示音訊圖表，並即時監控音訊轉譯器的執行情況，音訊圖是 AudioNode 物件的網路，用於產生及合成音訊串流，通常很複雜，但圖形拓撲結構在設計上是不透明的。(Web Audio API 沒有節點/圖表內省功能)。圖表發生一些變化，現在卻聽不到任何聲音。接著，請透過聆聽進行偵錯。這絕非易事，而且音訊圖越大，難度就越高。Web Audio 開發人員工具擴充功能可將圖表視覺化，協助您瞭解音訊圖。
透過這項擴充功能，您可以監控算繪容量的執行估算值，瞭解網頁音訊算繪器在特定算繪預算 (例如 48KHz 時約為 2.67 毫秒) 下的效能。如果容量接近 100%，表示轉譯器無法在指定預算內完成工作，因此應用程式可能會產生故障。
使用about://tracing
為達到最佳效果，請關閉所有其他分頁和視窗，並停用擴充功能。 或者，您也可以啟動新的 Chrome 執行個體，或使用其他發布管道 (例如 Beta 版或 Canary 版) 的建構版本。準備好瀏覽器後，請按照下列步驟操作：
- 在分頁中開啟應用程式 (網頁)。
- 開啟另一個分頁，然後前往
about://tracing。 - 按下「錄製」按鈕，然後選取「手動選取設定」。
- 在「記錄類別」和「預設停用類別」部分，按下「無」按鈕。
- 在「記錄類別」部分，選取下列項目：
audioblink_gcmediav8.execute(如果您對AudioWorkletJS 程式碼效能感興趣)webaudio
- 在「預設停用的類別」部分，選取下列項目：
audio-worklet(如要瞭解AudioWorklet執行緒的開始位置)webaudio.audionode(如需每個AudioNode的詳細追蹤記錄)
- 按下底部的「錄製」按鈕。
- 返回應用程式分頁，然後重新執行導致問題的步驟。
- 收集足夠的追蹤資料後，請返回「追蹤」分頁，然後按下「停止」。
追蹤分頁會顯示結果。
按一下「儲存」，即可儲存追蹤資料。
如何分析追蹤資料
追蹤資料會以視覺化方式呈現 Chrome 網頁音訊引擎的音訊算繪方式。 轉譯器有兩種不同的算繪模式：作業系統模式和Worklet 模式。每種模式使用的執行緒模型不同，因此追蹤結果也會有所差異。
作業系統模式
在作業系統模式中，AudioOutputDevice 執行緒會執行所有網頁音訊程式碼。AudioOutputDevice是源自瀏覽器音訊服務的即時優先執行緒，由音訊硬體時鐘驅動。如果這個通道的追蹤資料顯示不規則性，表示裝置的回呼時間可能不穩定。已知 Linux 和 Pulse Audio 組合會發生這個問題。
詳情請參閱下列 Chromium 問題：#825823、#864463。
Worklet 模式
在 Worklet 模式中，一個執行緒會從 AudioOutputDevice 跳到 AudioWorklet 執行緒，您應該會在兩個執行緒通道中看到對齊的追蹤記錄。啟用工作單元後，所有 Web Audio 作業都會由 AudioWorklet 執行緒算繪。這個執行緒並非即時優先。
這裡常見的不規則情況是垃圾回收或錯過算繪期限導致的大型區塊。這兩種情況都會導致音訊串流發生故障。
在這兩種情況下，理想的追蹤資料都具有以下特徵：音訊裝置回呼呼叫和算繪工作妥善對齊，且算繪工作在指定算繪預算內完成。這兩張螢幕截圖是理想追蹤資料的絕佳範例。
從實際範例中學習
範例 1：超出算繪預算的算繪工作
下方的螢幕截圖 (Chromium 問題 #796330) 是 AudioWorkletProcessor 中的程式碼執行時間過長，超出指定算繪預算的典型範例。回呼時間正常，但 Web Audio API 的音訊處理函式呼叫未在下一個裝置回呼前完成工作。
選項：
- 減少使用
AudioNode執行個體，降低音訊圖表的工作負載。 - 減少
AudioWorkletProcessor中的程式碼工作負載。 - 增加
AudioContext的基本延遲時間。
範例 2：工作單執行緒上發生大量垃圾回收作業
與作業系統音訊算繪執行緒不同，垃圾回收作業是在工作子執行緒上管理。也就是說，如果程式碼會進行記憶體配置/解除配置 (例如新陣列)，最終會觸發垃圾回收，進而同步封鎖執行緒。如果 Web Audio 作業和垃圾回收的工作負載大於指定的算繪預算，音訊串流就會發生故障。下方的螢幕截圖是這個案例的極端例子。
選項：
- 預先分配記憶體，並盡可能重複使用。
- 根據
SharedArrayBuffer使用不同的設計模式。雖然這不是完美的解決方案，但許多 Web Audio 應用程式都使用類似模式，搭配SharedArrayBuffer執行密集程式碼。範例：
範例 3：AudioOutputDevice 傳回的音訊裝置回呼不穩定
對網頁音訊來說，音訊回呼的精確時間最為重要。 這應該是系統中最精確的時鐘。如果作業系統或音訊子系統無法確保回呼時間穩定，後續所有作業都會受到影響。下圖為音訊回呼發生抖動的範例。與前兩張圖片相比，每個回呼之間的間隔差異很大。
選項：
- 調整
latencyHint選項，增加系統音訊回呼緩衝區空間。 - 如果發現問題，請在 crbug.com 上回報問題，並附上追蹤資料。
使用 Web Audio 開發人員工具擴充功能
您也可以使用專為 Web Audio API 設計的開發人員工具擴充功能。與追蹤工具不同，這項工具可即時檢查圖表和效能指標。
這項擴充功能必須從 Chrome 線上應用程式商店安裝。
安裝完成後，開啟 Chrome 開發人員工具，然後按一下頂端選單中的「Web Audio」，即可存取面板。
「Web Audio」面板包含四個元件：內容選取器、屬性檢查器、圖表視覺化工具和效能監控器。
情境資訊選取器
由於一個頁面可以有多個 BaseAudioContext 物件，因此您可以透過這個下拉式選單選擇要檢查的內容。您也可以按一下左側的垃圾桶圖示，手動觸發垃圾收集作業。
房地產檢查員
側邊面板會顯示使用者所選內容或 AudioNode 的各種屬性。系統不支援在 AudioParam 中檢查動態值。
圖表視覺化工具
這個檢視畫面會顯示使用者所選內容的目前圖表拓撲。這項視覺化效果會即時動態變化。按一下視覺化效果中的元素，即可在屬性檢查器中檢查詳細資訊。
效能監控工具
只有在所選 BaseAudioContext 為 AudioContext 時，底部的狀態列才會啟用，並即時執行。這個長條會顯示所選 AudioContext 的即時音訊串流品質，並每秒更新一次。這份報表提供下列資訊：
回呼間隔 (毫秒)：顯示回呼間隔的加權平均值或變異數。理想情況是平均值應穩定，變異數應接近零。如果差異很大，表示系統層級的音訊回呼函式時間不穩定，可能導致音訊串流品質不佳。(請參閱範例 3)。
算繪容量 (百分比)：如果容量接近 100%，表示算繪器在特定算繪預算內執行的作業過多，因此您應考慮減少作業 (例如在圖表中減少使用
AudioNodes物件)。
按一下垃圾桶圖示，即可手動觸發垃圾收集器。
舊版 WebAudio 開發人員工具面板
Chrome Web Audio 團隊現在建議使用這項擴充功能，但您也可以使用舊版 WebAudio 開發人員工具面板。如要存取這個面板，請點選開發人員工具右上角的「三點」選單，然後依序前往「More tools」和「WebAudio」。
結論
音訊偵錯並不容易，在瀏覽器中偵錯音訊更加困難。不過，這些工具可提供實用的深入分析資訊，瞭解網頁音訊程式碼的執行情況，有助於減輕負擔。不過，有時 Chrome 或擴充功能可能會發生問題。在 crbug.com 或擴充功能問題追蹤工具上回報錯誤。