Profilazione delle app web Audio in Chrome

Scopri come profilare le prestazioni delle app Web Audio in Chrome utilizzando about://tracing e Audion (un'estensione WebAudio in Chrome DevTools).

Probabilmente hai raggiunto questo documento perché stai sviluppando un'app che utilizza l'API Web Audio e hai riscontrato problemi imprevisti, ad esempio rumori di scoppiettio dall'output, o senti qualcosa di inaspettato. Potresti già essere coinvolto in una discussione su crbug.com e un ingegnere di Chrome ti ha chiesto di caricare "dati di tracciamento" o di esaminare la visualizzazione del grafico.

Scopri come ottenere le informazioni pertinenti per consentirci di comprendere il problema e risolvere quello sottostante.

Strumenti di profilazione Web Audio

Esistono due strumenti che ti aiuteranno a profilare Web Audio, about://tracing e l'estensione WebAudio in Chrome DevTools.

Quando utilizzi about://tracing?

Quando si verificano misteriose "anomalie". La profilazione dell'app con gli strumenti di tracciamento fornisce informazioni su:

• Fette di tempo trascorse da chiamate di funzioni specifiche su thread diversi
• Orario di richiamata audio nella visualizzazione cronologica

Di solito mostra scadenze di callback audio mancate o una garbage collection di grandi dimensioni che potrebbe causare problemi audio imprevisti. Queste informazioni sono utili per comprendere un problema di base, quindi gli ingegneri di Chromium spesso le richiedono soprattutto quando la riproduzione locale non è fattibile. Consulta le nostre istruzioni generali per il tracciamento.

Quando si utilizza l'estensione Web Audio DevTools?

Quando vuoi visualizzare il grafico audio e monitorare le prestazioni del renderer audio in tempo reale. Il grafico audio, una rete di oggetti AudioNode per generare e sintetizzare uno stream audio, spesso diventa complesso, ma la topologia del grafico è opaca per progettazione. (L'API Web Audio non dispone di funzionalità per l'introspezione di nodi/grafici.) Alcune modifiche vengono apportate al grafico e ora non senti nulla. A questo punto è il momento di eseguire il debug ascoltando. Non è mai facile e diventa più difficile quando il grafico audio è più grande. L'estensione DevTools Web Audio può aiutarti visualizzando il grafico.

Con questa estensione, puoi monitorare una stima in tempo reale della capacità di rendering, che indica il rendimento del renderer audio web in base a un determinato budget di rendering (ad esempio, circa 2,67 ms a 48 kHz). Se la capacità si avvicina al 100%, è probabile che la tua app produca problemi perché il renderer non riesce a completare il lavoro nel budget assegnato.

Utilizza about://tracing

Per risultati ottimali, chiudi tutte le altre schede e finestre e disattiva le estensioni. In alternativa, puoi avviare una nuova istanza di Chrome o utilizzare altre build di canali di rilascio diversi (ad es. Beta o Canary). Una volta pronto il browser:

1. Apri l'applicazione (pagina web) in una scheda.
2. Apri un'altra scheda e vai su about://tracing.
3. Premi il pulsante Registra e seleziona Seleziona manualmente le impostazioni.
4. Premi i pulsanti Nessuno nelle sezioni Categorie di record e Categorie disattivate per impostazione predefinita.
5. Nella sezione Categorie di registrazione, seleziona quanto segue:
   • audio
   • blink_gc
   • media
   • v8.execute (se ti interessa il rendimento del codice JS AudioWorklet)
   • webaudio
6. Nella sezione Categorie disattivate per impostazione predefinita, seleziona quanto segue:
   • audio-worklet (se ti interessa sapere da dove inizia il thread AudioWorklet)
   • webaudio.audionode (se hai bisogno della traccia dettagliata per ogni AudioNode)
7. Premi il pulsante Registra in basso.
8. Torna alla scheda dell'applicazione e ripeti i passaggi che hanno causato il problema.
9. Quando hai raccolto dati di traccia sufficienti, torna alla scheda Tracciamento e premi Interrompi.

10. La scheda Tracciamento visualizzerà il risultato.

    

11. Premi Salva per salvare i dati di tracciamento.

Come analizzare i dati di tracciamento

I dati di tracciamento visualizzano il modo in cui il motore audio web di Chrome esegue il rendering dell'audio. Il renderer ha due modalità di rendering diverse: modalità sistema operativo e modalità worklet. Ogni modalità utilizza un modello di threading diverso, quindi anche i risultati della tracciatura sono diversi.

Modalità del sistema operativo

In modalità sistema operativo, il thread AudioOutputDevice esegue tutto il codice audio web. Il AudioOutputDevice è un thread di priorità in tempo reale che ha origine dal servizio audio del browser e che è gestito dall'orologio hardware audio. Se in questa corsia noti un'irregolarità nei dati di traccia, significa che la tempistica di callback del dispositivo potrebbe essere instabile. È noto che la combinazione di Linux e Pulse Audio presenta questo problema.

Per ulteriori dettagli, consulta i seguenti problemi di Chromium: #825823, #864463.

Modalità worklet

In modalità Worklet, caratterizzata da un salto di thread da AudioOutputDevice al thread AudioWorklet, dovresti vedere tracce ben allineate in due corsie di thread. Quando il worklet viene attivato, tutte le operazioni audio web vengono eseguite dal thread AudioWorklet. Questo thread non è una priorità in tempo reale.

L'irregolarità comune qui è un blocco di grandi dimensioni causato dalla garbage collection o dalle scadenze di rendering mancate. In entrambi i casi, si verificano problemi nello stream audio.

In entrambi i casi, i dati di tracciamento ideali sono caratterizzati da chiamate di callback del dispositivo audio ben allineate e da attività di rendering completate entro il budget di rendering specificato. I due screenshot sono ottimi esempi di dati di tracciamento ideali.

Imparare da esempi reali

Esempio 1: attività di rendering che superano il budget di rendering

Lo screenshot seguente (problema di Chromium n. 796330) è un esempio tipico di quando il codice in AudioWorkletProcessor richiede troppo tempo e supera un determinato budget di rendering. Il timing del callback è corretto, ma la chiamata di funzione di elaborazione audio dell'API Web Audio non è riuscita a completare il lavoro prima del successivo callback del dispositivo.

Le tue opzioni:

• Riduci il carico di lavoro del grafico audio utilizzando meno istanze AudioNode.
• Ridurre il carico di lavoro del codice in AudioWorkletProcessor.
• Aumenta la latenza di base di AudioContext.

Esempio 2: Garbage collection significativa sul thread del worklet

A differenza del thread di rendering audio del sistema operativo, la garbage collection viene gestita sul thread del worklet. Ciò significa che se il tuo codice esegue l'allocazione/deallocazione della memoria (ad es. nuovi array), alla fine attiva una garbage collection che blocca in modo sincrono il thread. Se il carico di lavoro delle operazioni audio web e della garbage collection è superiore a un determinato budget di rendering, si verificano problemi nello stream audio. Lo screenshot che segue è un esempio estremo di questo caso.

Le tue opzioni:

• Alloca la memoria in anticipo e riutilizzala quando possibile.
• Utilizza diversi pattern di progettazione in base a SharedArrayBuffer. Sebbene questa non sia una soluzione perfetta, diverse app audio web utilizzano un pattern simile con SharedArrayBuffer per eseguire il codice audio intensivo. Esempi:
  • Pattern di progettazione di Audio Worklet

Esempio 3: callback del dispositivo audio con jitter da AudioOutputDevice

La tempistica precisa del callback audio è la cosa più importante per Web Audio. Questo dovrebbe essere l'orologio più preciso del tuo sistema. Se il sistema operativo o il relativo sottosistema audio non possono garantire un timing di callback solido, tutte le operazioni successive ne risentiranno. L'immagine seguente è un esempio di callback audio con jitter. Rispetto alle due immagini precedenti, l'intervallo tra ogni callback varia in modo significativo.

Le tue opzioni:

• Aumenta la dimensione del buffer di callback dell'audio di sistema regolando l'opzione latencyHint.
• Se riscontri un problema, segnalalo su crbug.com con i dati di tracciamento.

Utilizzare l'estensione Web Audio DevTools

Puoi anche utilizzare l'estensione DevTools progettata appositamente per l'API Web Audio. A differenza dello strumento di tracciamento, questo fornisce un'ispezione in tempo reale dei grafici e delle metriche sul rendimento.

Questa estensione deve essere installata dal Chrome Web Store.

Dopo l'installazione, puoi accedere al pannello aprendo Chrome DevTools e facendo clic su "Web Audio" nel menu in alto.

Il pannello Web Audio è composto da quattro componenti: selettore di contesto, ispettore delle proprietà, visualizzatore di grafici e monitor delle prestazioni.

Selettore del contesto

Poiché una pagina può contenere più oggetti BaseAudioContext, questo menu a discesa ti consente di scegliere il contesto che vuoi esaminare. Puoi anche attivare manualmente la raccolta dei rifiuti facendo clic sull'icona del cestino a sinistra.

Ispettore delle proprietà

Il riquadro laterale mostra varie proprietà di un contesto selezionato dall'utente o AudioNode. L'ispezione dei valori dinamici in AudioParam non è supportata.

Visualizzatore del grafico

Questa visualizzazione esegue il rendering della topologia del grafico corrente di un contesto selezionato dall'utente. Questa visualizzazione cambia in modo dinamico in tempo reale. Se fai clic su un elemento nella visualizzazione, puoi esaminare le informazioni dettagliate nell'ispettore delle proprietà.

Monitoraggio delle prestazioni

La barra di stato in basso è attiva solo quando il BaseAudioContext selezionato è un AudioContext, che viene eseguito in tempo reale. Questa barra mostra la qualità istantanea dello stream audio di un AudioContext selezionato e viene aggiornata ogni secondo. Fornisce le seguenti informazioni:

• Intervallo di richiamata (ms): mostra la media ponderata o la varianza dell'intervallo di richiamata. Idealmente, la media dovrebbe essere stabile e la varianza dovrebbe essere vicina a zero. Se noti una varianza elevata, significa che la funzione di callback audio a livello di sistema ha una tempistica instabile che può comportare una scarsa qualità del flusso audio. (Vedi l'esempio 3).

• Capacità di rendering (percentuale): quando la capacità si avvicina al 100%, significa che il renderer sta facendo troppo per un determinato budget di rendering, quindi dovresti prendere in considerazione di ridurre il carico (ad esempio, utilizzando meno oggetti AudioNodes nel grafico).

Puoi attivare manualmente un garbage collector facendo clic sull'icona del cestino.

Riquadro DevTools WebAudio legacy

L'estensione è ora un metodo consigliato dal team di Chrome Web Audio, ma è disponibile anche il pannello legacy WebAudio DevTools. Puoi accedere a questo riquadro facendo clic sul menu con tre puntini nell'angolo in alto a destra di DevTools, poi su Altri strumenti e infine su WebAudio.

Conclusione

Il debug dell'audio è difficile. Il debug dell'audio nel browser è ancora più difficile. Tuttavia, questi strumenti possono alleviare il dolore fornendoti informazioni utili sul rendimento del codice audio web. In alcuni casi, tuttavia, potresti riscontrare problemi in Chrome o nell'estensione. Segnala un bug su crbug.com o sul tracker dei problemi delle estensioni.