Profiler des applications Web Audio dans Chrome

Découvrez comment profiler les performances des applications audio sur le Web dans Chrome avec about://tracing et Audion (une extension WebAudio dans les outils pour les développeurs Chrome).

Vous êtes arrivé à cet article, probablement parce que vous développez une application qui utilise l'API Web Audio et que vous avez rencontré des problèmes inattendus (par exemple, des bruits de claquement de la sortie) ou que vous entendez quelque chose d'inattendu. Vous avez peut-être déjà participé à une discussion sur crbug.com et un ingénieur Chrome vous a demandé d'importer des "données de traçage" ou d'examiner la visualisation graphique. Cet article explique comment obtenir les informations pertinentes pour que nous puissions comprendre un problème et, à terme, résoudre le problème sous-jacent.

Outils de profilage Web Audio

Deux outils vous aideront à profiler l'audio Web : about://tracing et l'extension WebAudio dans les outils pour les développeurs Chrome.

Quand utilisez-vous about://tracing ?

Quand de mystérieux "glitchs" se produisent. Le profilage de l'application avec les outils de traçage vous permet d'obtenir des insights sur les éléments suivants:

• Tranches de temps consacrées à des appels de fonction spécifiques sur différents threads
• Chronologie de rappel audio dans la vue chronologique

Il affiche généralement des délais de rappel audio manqués ou une récupération de mémoire importante qui peuvent entraîner des glitchs audio inattendus. Ces informations sont utiles pour comprendre un problème sous-jacent. Les ingénieurs de Chromium la poseront donc souvent, en particulier lorsque la reproduction locale n'est pas possible. Les instructions générales de traçage sont disponibles ici.

Quand utiliser l'extension Web Audio DevTools ?

Lorsque vous souhaitez visualiser le graphique audio et surveiller les performances du moteur de rendu audio en temps réel. Le graphe audio, un réseau d'objets AudioNode permettant de générer et de synthétiser un flux audio, devient souvent complexe, mais la topologie du graphique est opaque par nature. (L'API Web Audio ne propose pas de fonctionnalités d'introspection des nœuds/graphiques.) Certains changements se produisent dans votre graphique, et vous entendez maintenant un silence. Ensuite, il est temps de procéder au débogage en écoutant. Ce n'est jamais facile, et cela devient plus difficile avec un graphique audio de plus grande taille. L'extension Web Audio DevTools peut vous aider en visualisant le graphique.

Avec cette extension, vous pouvez surveiller une estimation de la capacité de rendu, qui indique les performances du moteur de rendu audio Web avec un budget de rendu donné (par exemple, environ 2,67 ms à 48 KHz). Si la capacité est proche de 100 %, cela signifie que votre application risque de générer des problèmes, car le moteur de rendu ne termine pas le travail dans les limites du budget donné.

Utiliser "about://tracing"

Capturer les données de traçage

Les instructions ci-dessous concernent Chrome 80 et les versions ultérieures.

Pour des résultats optimaux, fermez tous les autres onglets et fenêtres, puis désactivez les extensions. Vous pouvez également lancer une nouvelle instance de Chrome ou utiliser d'autres builds issus de différentes versions disponibles (par exemple, version bêta ou Canary). Une fois le navigateur prêt, procédez comme suit:

1. Ouvrez votre application (page Web) dans un onglet.
2. Ouvrez un autre onglet et accédez à about://tracing.
3. Appuyez sur le bouton Enregistrer, puis sélectionnez Sélectionner manuellement les paramètres.
4. Appuyez sur les boutons None (Aucun) des deux sections Record Categories (Catégories d'enregistrement) et Disabled by Default Categories (Désactivées par les catégories par défaut).
5. Dans la section Record Categories (Catégories d'enregistrements), sélectionnez les éléments suivants :
   • audio
   • blink_gc
   • media
   • v8.execute (si vous souhaitez connaître les performances du code JS AudioWorklet)
   • webaudio
6. Dans la section Disabled by Default Categories (Désactivées par les catégories par défaut), sélectionnez les éléments suivants :
   • audio-worklet (si vous souhaitez savoir où commence le fil de discussion AudioWorklet)
   • webaudio.audionode (si vous avez besoin d'une trace détaillée pour chaque AudioNode)
7. Appuyez sur le bouton Record (Enregistrer) en bas.
8. Revenez à l'onglet de votre application et recommencez la procédure qui a déclenché le problème.
9. Lorsque vous avez suffisamment de données de trace, revenez à l'onglet de traçage et appuyez sur Stop (Arrêter).

10. L'onglet de traçage permet de visualiser le résultat.

    

11. Appuyez sur Save (Enregistrer) pour enregistrer les données de traçage.

Analyser les données de traçage

Les données de traçage permettent de visualiser comment le moteur audio Web de Chrome affiche le contenu audio. Le moteur de rendu comporte deux modes de rendu différents: le mode du système d'exploitation et le mode Worklet. Chaque mode utilise un modèle de thread différent. Les résultats de traçage diffèrent donc également.

Mode du système d'exploitation

En mode Système d'exploitation, le thread AudioOutputDevice exécute tout le code audio Web. AudioOutputDevice est un thread prioritaire en temps réel provenant du service audio du navigateur et géré par l'horloge matérielle audio. Si vous constatez des irrégularités dans les données de trace sur cette voie, cela signifie que le temps de rappel de l'appareil peut être instable. La combinaison de Linux et de Pulse Audio est connue pour présenter ce problème. Pour en savoir plus, consultez les problèmes Chromium suivants: #825823, #864463.

Mode Worklet

En mode Worklet, qui se caractérise par un saut de thread de AudioOutputDevice au thread AudioWorklet, vous devriez voir des traces bien alignées dans deux bandes de threads, comme illustré ci-dessous. Lorsque le worklet est activé, toutes les opérations audio Web sont affichées par le thread AudioWorklet. Ce thread n'est pas prioritaire en temps réel pour le moment. L'irrégularité courante ici est un bloc important causé par la récupération de mémoire ou le non-respect des délais d'affichage. Dans les deux cas, des problèmes peuvent survenir dans le flux audio.

Dans les deux cas, les données de traçage idéales sont caractérisées par des appels de rappel d'appareil audio bien alignés et des tâches de rendu bien effectuées dans les limites du budget de rendu donné. Les deux captures d'écran ci-dessus sont d'excellents exemples de données de traçage idéales.

Apprendre à partir d'exemples concrets

Exemple 1: Tâches de rendu dépassant le budget de rendu

La capture d'écran ci-dessous (problème Chromium n° 796330) est un exemple courant de situations dans lesquelles le code dans AudioWorkletProcessor prend trop de temps et dépasse un budget de rendu donné. Le timing de rappel est adapté, mais l'appel de la fonction de traitement audio de l'API Web Audio n'a pas pu terminer le travail avant le rappel suivant de l'appareil.

Options disponibles:

• Réduisez la charge de travail du graphique audio en utilisant moins d'instances AudioNode.
• Réduisez la charge de travail de votre code dans AudioWorkletProcessor.
• Augmentez la latence de base de AudioContext.

Exemple 2: récupération importante de mémoire sur le thread de Worklet

Contrairement au thread de rendu audio du système d'exploitation, la récupération de mémoire est gérée sur le thread de worklet. Cela signifie que si votre code effectue une allocation ou désallocation de mémoire (par exemple, de nouveaux tableaux), il finit par déclencher une récupération de mémoire qui bloque le thread de manière synchrone. Si la charge de travail des opérations audio Web et de la récupération de mémoire dépasse un budget de rendu donné, cela entraîne des glitchs dans le flux audio. La capture d'écran suivante est un exemple extrême de ce cas.

Options disponibles:

• Allouez la mémoire à l'avance et réutilisez-la autant que possible.
• Utilisez différents modèles de conception en fonction de SharedArrayBuffer. Bien que cette solution ne soit pas parfaite, plusieurs applications audio Web utilisent un modèle similaire avec SharedArrayBuffer pour exécuter le code audio intensif. Exemples :
  • Modèle de conception de Worklet audio

Exemple 3: Rappel d'appareil audio saccadé à partir de AudioOutputDevice

L'heure précise du rappel audio est l'élément le plus important pour l'audio Web. Il doit s'agir de l'horloge la plus précise de votre système. Si le système d'exploitation ou son sous-système audio ne peut pas garantir un timing de rappel fiable, toutes les opérations ultérieures seront affectées. L'image suivante montre un exemple de rappel audio instable. L'intervalle entre chaque rappel varie considérablement par rapport aux deux images précédentes.

Options disponibles:

• Augmentez la taille de la mémoire tampon de rappel audio du système en ajustant l'option latencyHint.
• Si vous constatez un problème, signalez-le sur crbug.com en fournissant les données de traçage.

Utiliser l'extension Web Audio DevTools

Vous pouvez également utiliser l'extension DevTools spécialement conçue pour l'API Web Audio. Contrairement à l'outil de traçage, il permet une inspection en temps réel des graphiques et des métriques de performances.

Cette extension doit être installée à partir du Chrome Web Store.

Après l'installation, vous accédez au panneau en ouvrant les Outils pour les développeurs Chrome, puis en cliquant sur "Web Audio" dans le menu supérieur.

Le panneau "Web Audio" comprend quatre composants: le sélecteur de contexte, l'inspecteur de propriétés, le visualiseur de graphiques et l'analyseur de performances.

Sélecteur de contexte

Étant donné qu'une page peut comporter plusieurs objets BaseAudioContext, ce menu déroulant vous permet de choisir le contexte à inspecter. Vous pouvez également déclencher manuellement la récupération de mémoire en cliquant sur l'icône de la corbeille située à gauche.

Inspecteur immobilier

Le panneau latéral affiche différentes propriétés d'un contexte sélectionné par l'utilisateur ou AudioNode. Il n'est pas possible d'inspecter des valeurs dynamiques dans AudioParam.

Visualiseur graphique

Cette vue affiche la topologie actuelle du graphique pour un contexte sélectionné par l'utilisateur. Cette visualisation change de manière dynamique et en temps réel. En cliquant sur un élément de la visualisation, vous pouvez consulter les informations détaillées dans l'inspecteur des propriétés.

Surveillance des performances

La barre d'état située en bas n'est active que si l'élément BaseAudioContext sélectionné est un AudioContext, qui s'exécute en temps réel. Cette barre indique la qualité instantanée du flux audio d'un AudioContext sélectionné. Elle est mise à jour toutes les secondes. Elle fournit les informations suivantes:

• Intervalle de rappel (ms): affiche la moyenne et la variance pondérées de l'intervalle de rappel. Idéalement, la moyenne devrait être stable et la variance devrait être proche de zéro. Si vous constatez une variance importante, cela signifie que la fonction de rappel audio au niveau du système présente un timing instable, ce qui peut nuire à la qualité du flux audio. (voir l'exemple 3 ci-dessus).

• Capacité de rendu (pourcentage): lorsque la capacité se rapproche de 100 %, cela signifie que le moteur de rendu en fait trop pour un budget de rendu donné. Nous vous conseillons donc d'en faire moins (par exemple, en utilisant moins d'objets AudioNodes dans le graphique).

Vous pouvez déclencher manuellement un récupérateur de mémoire en cliquant sur l'icône de la corbeille.

Ancien panneau "WebAudio DevTools"

Cette extension est désormais une méthode recommandée par l'équipe Chrome Web Audio, mais l'ancien panneau "WebAudio DevTools" est également disponible. Pour accéder à ce panneau, cliquez sur le menu à trois points dans l'angle supérieur droit de DevTools, cliquez sur More tools (Plus d'outils), puis sur WebAudio.

Conclusion

Le débogage audio est difficile. Il est encore plus difficile de déboguer le son dans le navigateur. Cependant, ces outils peuvent vous faciliter la tâche en vous fournissant des informations utiles sur les performances du code audio Web. Toutefois, dans certains cas, vous pouvez rencontrer des problèmes au niveau de Chrome ou de l'extension. Par conséquent, n'hésitez pas à signaler un bug sur crbug.com ou sur l'outil de suivi des problèmes de l'extension.

Photo de Jonathan Velasquez sur Unsplash