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