Profilerstellung für Web-Audio-Apps in Chrome

Hier erfahren Sie, wie Sie mit about://tracing und Audion (einer WebAudio in den Chrome-Entwicklertools) ein Profil der Leistung von Web Audio-Apps in Chrome erstellen.

Hongchan Choi

Sie sind wahrscheinlich auf diesen Artikel gestoßen, weil Sie vermutlich eine Anwendung entwickeln, die die Web Audio API verwendet, und unerwartete Fehler wie Knallgeräusche in der Ausgabe aufgetreten sind oder Sie etwas Unerwartetes hören. Möglicherweise sind Sie bereits an einer Diskussion auf crbug.com beteiligt und ein Chrome-Entwickler hat Sie gebeten, „Tracing-Daten“ hochzuladen oder sich die Grafikvisualisierung anzusehen. In diesem Artikel erfahren Sie, wie Sie die relevanten Informationen erhalten, damit wir ein Problem verstehen und es schließlich beheben können.

Web Audio-Profiling-Tools

Bei der Profilerstellung für Web Audio stehen zwei Tools zur Verfügung: about://tracing und die Erweiterung WebAudio in den Chrome-Entwicklertools.

Wann verwenden Sie about://tracing?

Wenn mysteriöse „Störungen“ auftreten. Durch das Erstellen von App-Profilen mit den Tracing-Tools erhalten Sie Informationen zu folgenden Aspekten:

• Zeitabschnitte, die von bestimmten Funktionsaufrufen für verschiedene Threads aufgewendet werden
• Zeitangaben für Audio-Callbacks in der Zeitachse

In der Regel werden verpasste Fristen für Audio-Callbacks oder eine große automatische Speicherbereinigung angezeigt, die zu unerwarteten Audiofehlern führen können. Diese Informationen helfen beim Verständnis eines zugrunde liegenden Problems. Deshalb fragen Chromium-Entwickler häufig danach, insbesondere wenn die lokale Reproduktion nicht möglich ist. Die allgemeine Anleitung zum Tracing finden Sie hier.

Wann verwendest du die Erweiterung „Web Audio DevTools“?

Wenn Sie das Audiodiagramm visualisieren und die Leistung des Audio-Renderers in Echtzeit beobachten möchten. Ein Audiodiagramm, ein Netzwerk von AudioNode-Objekten zum Generieren und Synthetisieren eines Audiostreams, wird häufig komplex, aber die Grafiktopologie ist von Grund auf undurchsichtig. Die Web Audio API bietet keine Funktionen für die Selbstprüfung von Knoten und Diagrammen. In der Grafik treten einige Änderungen auf und Sie hören jetzt Stummschaltung. Dann ist es Zeit für die Fehlerbehebung, indem du zuhörst. Es ist nie einfach und wird mit einem größeren Audiodiagramm schwieriger. Mit der Erweiterung „Web Audio DeveloperTools“ kannst du die Grafik visualisieren.

Mit dieser Erweiterung können Sie eine laufende Schätzung der Renderingkapazität überwachen, die angibt, wie der Web-Audio-Renderer bei einem bestimmten Renderingbudget (z. B. etwa 2,67 ms bei 48 kHz) abschneidet. Wenn sich die Kapazität bei 100 % nähert, führt dies wahrscheinlich zu Störungen in Ihrer Anwendung, da der Renderer die Arbeit im Rahmen des vorgegebenen Budgets nicht abschließen kann.

„about://tracing“ verwenden

Tracing-Daten erfassen

Die folgende Anleitung gilt für Chrome 80 und höher.

Die besten Ergebnisse erzielst du, wenn du alle anderen Tabs und Fenster schließt und die Erweiterungen deaktivierst. Alternativ können Sie entweder eine neue Instanz von Chrome starten oder andere Builds aus verschiedenen Release-Versionen verwenden (z.B. Beta oder Canary). Sobald der Browser bereit ist, führen Sie die folgenden Schritte aus:

1. Öffnen Sie Ihre Anwendung (Webseite) auf einem Tab.
2. Öffnen Sie einen weiteren Tab und rufen Sie about://tracing auf.
3. Drücken Sie die Schaltfläche Aufnehmen und wählen Sie Einstellungen manuell auswählen aus.
4. Drücken Sie sowohl in den Bereichen Eintragskategorien als auch Durch Standardkategorien deaktiviert die Schaltfläche Keine.
5. Wählen Sie im Abschnitt Eintragskategorien Folgendes aus:
   • audio
   • blink_gc
   • media
   • v8.execute (wenn Sie an der Leistung des JS-Codes in AudioWorklet interessiert sind)
   • webaudio
6. Wählen Sie im Bereich Durch Standardkategorien deaktiviert Folgendes aus:
   • audio-worklet (wenn du möchtest, wo der Thread „AudioWorklet“ beginnt)
   • webaudio.audionode (wenn Sie den detaillierten Trace für jeden AudioNode benötigen)
7. Klicken Sie unten auf die Schaltfläche Aufnehmen.
8. Gehen Sie zurück zum Tab „Anwendung“ und wiederholen Sie die Schritte, die das Problem ausgelöst haben.
9. Wenn genügend Trace-Daten vorhanden sind, kehren Sie zum Tab für das Tracing zurück und klicken Sie auf Beenden.

10. Auf dem Tab „Tracing“ wird das Ergebnis visualisiert.

    

11. Klicken Sie auf Speichern, um die Tracing-Daten zu speichern.

Wie Tracing-Daten analysiert werden

Die Tracing-Daten visualisieren, wie die Web-Audio-Engine von Chrome die Audiodaten rendert. Der Renderer hat zwei verschiedene Renderingmodi: Betriebssystemmodus und Worklet-Modus. Da jeder Modus ein anderes Threading-Modell verwendet, unterscheiden sich auch die Tracing-Ergebnisse.

Betriebssystemmodus

Im Betriebssystemmodus führt der Thread AudioOutputDevice den gesamten Web-Audiocode aus. Der AudioOutputDevice ist ein Thread mit Echtzeitpriorität, der vom Audiodienst des Browsers stammt und von der Audiohardware-Uhr gesteuert wird. Wenn Sie Unregelmäßigkeiten bei den Trace-Daten in dieser Spur feststellen, kann die Callback-Zeit des Geräts ungenau sein. Bei der Kombination aus Linux und Pulse Audio ist bekannt, dass dieses Problem auftritt. Weitere Informationen finden Sie in den folgenden Chromium-Problemen: #825823, #864463.

Worklet-Modus

Im Worklet-Modus, in dem ein Thread von AudioOutputDevice zum AudioWorklet-Thread springt, sollten gut ausgerichtete Traces in zwei Thread-Spuren angezeigt werden (siehe unten). Wenn das Worklet aktiviert ist, werden alle Web-Audiovorgänge vom AudioWorklet-Thread gerendert. Dieser Thread hat derzeit keine Echtzeitpriorität. Die häufigste Unregelmäßigkeit hier ist ein großer Block, der durch die automatische Speicherbereinigung oder verpasste Rendering-Fristen verursacht wird. In beiden Fällen kommt es zu Störungen im Audiostream.

In beiden Fällen zeichnen sich die idealen Tracing-Daten dadurch aus, dass gut abgestimmte Callbacks für Audiogeräte aufgerufen und Renderingaufgaben innerhalb des vorgegebenen Renderingbudgets ausgeführt werden. Die beiden Screenshots oben sind gute Beispiele für das ideale Tracing.

Aus realen Beispielen lernen

Beispiel 1: Renderingaufgaben, die das Renderingbudget überschreiten

Der folgende Screenshot (Chromium-Problem #796330) ist ein typisches Beispiel für den Fall, dass Code in AudioWorkletProcessor zu lange dauert und das festgelegte Renderingbudget überschreitet. Der Callback-Zeitpunkt funktioniert gut, aber der Aufruf der Audioverarbeitungsfunktion der Web Audio API konnte die Verarbeitung nicht vor dem nächsten Geräte-Callback abschließen.

Optionen:

• Reduzieren Sie die Arbeitslast des Audiodiagramms, indem Sie weniger AudioNode-Instanzen verwenden.
• Reduzieren Sie die Arbeitslast Ihres Codes im AudioWorkletProcessor.
• Erhöhen Sie die Basislatenz von AudioContext.

Beispiel 2: Signifikante automatische Speicherbereinigung im Worklet-Thread

Im Gegensatz zum Audio-Rendering-Thread des Betriebssystems wird die automatische Speicherbereinigung im Worklet-Thread verwaltet. Wenn also Ihr Code eine Arbeitsspeicherzuweisung/-entfernung durchführt (z.B. bei neuen Arrays), wird schließlich eine automatische Speicherbereinigung ausgelöst, die den Thread synchron blockiert. Wenn die Arbeitslast der Web-Audiovorgänge und der automatischen Speicherbereinigung ein bestimmtes Renderingbudget übersteigt, treten Fehler im Audiostream auf. Der folgende Screenshot ist ein extremes Beispiel für diesen Fall.

Optionen:

• Weisen Sie den Speicher im Voraus zu und verwenden Sie ihn nach Möglichkeit wieder.
• Verwenden Sie auf Grundlage von SharedArrayBuffer unterschiedliche Designmuster. Obwohl dies keine perfekte Lösung ist, verwenden mehrere Web-Audio-Apps ein ähnliches Muster mit SharedArrayBuffer, um den intensiven Audiocode auszuführen. Beispiele:
  • Designmuster für Audio-Worklet

Beispiel 3: Vibrationen im Callback von AudioOutputDevice für ein Audiogerät

Das Wichtigste bei Web Audios ist das genaue Timing des Audio-Callbacks. Dies sollte die genaueste Uhr in deinem System sein. Wenn das Betriebssystem oder sein Audiosubsystem keine zuverlässige Callback-Zeit garantieren kann, sind alle nachfolgenden Vorgänge betroffen. Die folgende Abbildung zeigt ein Beispiel für einen wackelnden Audio-Callback. Im Vergleich zu den beiden vorherigen Bildern variiert das Intervall zwischen den einzelnen Callbacks erheblich.

Optionen:

• Erhöhen Sie die Puffergröße des System-Audio-Callbacks. Passen Sie dazu die Option latencyHint an.
• Wenn Sie ein Problem finden, melden Sie ein Problem auf crbug.com mit den Tracing-Daten.

Erweiterung „Web Audio DevTools“ verwenden

Du kannst auch die Entwicklertools-Erweiterung verwenden, die speziell für die Web Audio API entwickelt wurde. Im Gegensatz zum Tracing-Tool bietet dieses Tool eine Echtzeitprüfung von Grafiken und Leistungsmesswerten.

Diese Erweiterung muss über den Chrome Web Store installiert werden.

Nach der Installation greifen Sie auf das Steuerfeld zu, indem Sie die Chrome-Entwicklertools öffnen und im Menü oben auf „Web Audio“ klicken.

Das Web Audio-Steuerfeld besteht aus vier Komponenten: Kontextselektor, Property Inspector (Eigenschafteninspektor), Graph Visualizer und Leistungsüberwachung.

Kontextauswahl

Da eine Seite mehrere BaseAudioContext-Objekte enthalten kann, können Sie in diesem Drop-down-Menü den Kontext auswählen, den Sie prüfen möchten. Sie können die automatische Speicherbereinigung auch manuell auslösen, indem Sie links auf das Papierkorbsymbol klicken.

Property Inspector (Eigenschafteninspektor)

In der Seitenleiste werden verschiedene Eigenschaften eines vom Nutzer ausgewählten Kontextes oder AudioNode angezeigt. Die Prüfung dynamischer Werte in AudioParam wird nicht unterstützt.

Graphvisualisierung

In dieser Ansicht wird die aktuelle Diagrammtopologie eines vom Nutzer ausgewählten Kontextes gerendert. Diese Visualisierung ändert sich dynamisch und in Echtzeit. Wenn Sie auf ein Element in der Visualisierung klicken, erhalten Sie detaillierte Informationen im Property Inspector (Eigenschafteninspektor).

Leistungsüberwachung

Die Statusleiste unten ist nur aktiv, wenn der ausgewählte BaseAudioContext ein AudioContext ist, der in Echtzeit ausgeführt wird. Dieser Balken zeigt die sofortige Audiostreamqualität eines ausgewählten AudioContexts an und wird jede Sekunde aktualisiert. Sie enthält die folgenden Informationen:

• Callback-Intervall (ms): Zeigt das gewichtete Mittel/die Varianz des Callback-Intervalls an. Idealerweise sollte der Mittelwert stabil und die Varianz nahe bei null sein. Eine große Abweichung bedeutet, dass die Audio-Callback-Funktion auf Systemebene instabil ist und zu einer schlechten Audiostreamqualität führen kann. (Siehe Beispiel 3 oben.)

• Renderingkapazität (Prozent): Wenn die Kapazität 100 % erreicht, bedeutet dies, dass der Renderer für ein bestimmtes Renderingbudget zu viel erledigt. Daher sollten Sie weniger tun (z. B. weniger AudioNodes-Objekte im Diagramm verwenden).

Sie können eine automatische Speicherbereinigung manuell auslösen, indem Sie auf das Papierkorbsymbol klicken.

Bereich „Legacy WebAudio-Entwicklertools“

Die Erweiterung wird jetzt vom Chrome Web Audio-Team empfohlen. Allerdings ist auch der alte Bereich „WebAudio DevTools“ verfügbar. Sie können auf dieses Steuerfeld zugreifen, indem Sie oben rechts in den Entwicklertools auf das Dreipunkt-Menü klicken, Weitere Tools und dann WebAudio aufrufen.

Fazit

Das Debugging von Audioinhalten ist schwierig. Das Beheben von Audioproblemen im Browser ist noch schwieriger. Diese Tools können Ihnen jedoch helfen, Ihnen nützliche Informationen zur Leistung des Web-Audiocodes zu liefern. In einigen Fällen können jedoch Probleme in Chrome oder der Erweiterung auftreten. Anschließend können Sie Fehler auf crbug.com oder im Issue Tracker für Erweiterungen melden.

Foto von Jonathan Velasquez bei Unsplash