Découvrez comment profiler les performances des applications Web Audio dans Chrome à l'aide de about://tracing et d'Audion (une extension WebAudio dans les outils pour les développeurs Chrome).
Vous êtes probablement arrivé sur cet article parce que vous développez une application qui utilise l'API Web Audio et que vous avez rencontré des problèmes inattendus, comme des bruits de claquement provenant de la sortie ou un son inattendu. Il est possible que vous participiez déjà à une discussion sur crbug.com et qu'un ingénieur Chrome vous ait demandé d'importer des "données de traçage" ou d'examiner la visualisation du graphique. Cet article explique comment obtenir les informations pertinentes pour nous permettre de comprendre un problème et éventuellement de le résoudre.
Outils de profilage Web Audio
Deux outils vous aideront à profiler Web Audio : about://tracing et l'extension WebAudio dans les outils pour les développeurs Chrome.
Quand utiliser about://tracing ?
En cas de dysfonctionnements mystérieux. Le profilage de l'application avec les outils de traçage vous donne des insights sur les éléments suivants:
- Tranches de temps passées par des appels de fonction spécifiques sur différents threads
- Temps de rappel audio dans la vue chronologique
Il s'agit généralement de délais de rappel audio manqués ou d'une récupération de mémoire importante pouvant entraîner des problèmes audio inattendus. Ces informations sont utiles pour comprendre un problème sous-jacent. Les ingénieurs Chromium les demandent donc souvent, en particulier lorsque la reproduction locale n'est pas possible. Pour obtenir des instructions générales sur le traçage, cliquez 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 graphique 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 conception. (L'API Web Audio ne propose pas de fonctionnalités d'introspection de nœuds/de graphiques.) Des changements se produisent dans votre graphique et vous n'entendez plus rien. Il est alors temps de déboguer en écoutant. Ce n'est jamais facile, et cela devient encore plus difficile lorsque vous avez un graphique audio plus grand. L'extension Web Audio DevTools peut vous aider à visualiser le graphique.
Avec cette extension, vous pouvez surveiller une estimation en cours de la capacité de rendu, qui indique les performances du moteur de rendu audio Web sur un budget de rendu donné (par exemple, environ 2,67 ms à 48 kHz). Si la capacité atteint près de 100 %, cela signifie que votre application est susceptible de générer des glitchs, car le moteur de rendu ne parvient pas à terminer le travail dans le budget donné.
Utiliser about://tracing
Capturer des données de traçage
Les instructions ci-dessous s'appliquent à Chrome 80 et versions ultérieures.
Pour de meilleurs résultats, fermez tous les autres onglets et fenêtres, et désactivez les extensions. Vous pouvez également lancer une nouvelle instance de Chrome ou utiliser d'autres builds à partir de différents canaux de publication (par exemple, bêta ou Canary). Une fois le navigateur prêt, procédez comme suit:
- Ouvrez votre application (page Web) dans un onglet.
- Ouvrez un autre onglet et accédez à
about://tracing. - Appuyez sur le bouton Enregistrer, puis sélectionnez Sélectionner manuellement les paramètres.
- Appuyez sur les boutons Aucune dans les sections Catégories d'enregistrement et Catégories désactivées par défaut.
- Dans la section Catégories d'enregistrement, sélectionnez les éléments suivants :
audioblink_gcmediav8.execute(si vous souhaitez connaître les performances du code JavaScriptAudioWorklet)webaudio
- Dans la section Catégories désactivées par défaut, sélectionnez les éléments suivants :
audio-worklet(si vous souhaitez savoir où commence le threadAudioWorklet)webaudio.audionode(si vous avez besoin de la trace détaillée pour chaqueAudioNode)
- Appuyez sur le bouton Record (Enregistrer) en bas de l'écran.
- Revenez à l'onglet de votre application et répétez les étapes qui ont déclenché le problème.
- Lorsque vous avez suffisamment de données de traçage, revenez à l'onglet "Traçage", puis appuyez sur Arrêter.
L'onglet "Trace" visualise le résultat.
Appuyez sur 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 la façon dont le moteur audio Web de Chrome effectue le rendu audio. Le moteur de rendu propose deux modes de rendu différents: le mode système d'exploitation et le mode worklet. Chaque mode utilise un modèle de threads différent. Les résultats de traçage sont donc également différents.
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, qui est piloté par l'horloge matérielle audio. Si vous constatez une irrégularité dans les données de suivi de cette voie, cela signifie que le délai de rappel de l'appareil peut être irrégulier. 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 et 864463.
Mode worklet
En mode Worklet, qui se caractérise par un saut de thread de AudioOutputDevice vers le thread AudioWorklet, vous devriez voir des traces bien alignées sur deux canaux de thread, comme indiqué ci-dessous. Lorsque le worklet est activé, toutes les opérations audio Web sont rendues par le thread AudioWorklet. Ce fil de discussion n'est actuellement pas une priorité en temps réel.
L'irrégularité courante ici est un grand bloc causé par la récupération de mémoire ou les délais de rendu manqués. Dans les deux cas, des glitchs apparaissent 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 effectuées dans le 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 796330 dans Chromium) est un exemple typique de code dans AudioWorkletProcessor qui prend trop de temps et dépasse un budget de rendu donné. Le délai de rappel se comporte correctement, mais l'appel de la fonction de traitement audio de l'API Web Audio n'a pas réussi à terminer la tâche avant le prochain rappel de l'appareil.
Vos options:
- 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 le
AudioWorkletProcessor. - Augmentez la latence de base de
AudioContext.
Exemple 2: Collecte des déchets importante sur le thread de travail
Contrairement au thread de rendu audio du système d'exploitation, le garbage collection est géré sur le thread de travaillet. Cela signifie que si votre code effectue une allocation/déallocation de mémoire (par exemple, de nouveaux tableaux), il déclenche finalement une collecte des déchets qui bloque de manière synchrone le thread. Si la charge de travail des opérations audio Web et de la collecte des déchets est supérieure à un budget de rendu donné, des erreurs se produisent dans le flux audio. La capture d'écran suivante en est un exemple extrême.
Vos options:
- Allouez la mémoire à l'avance et réutilisez-la dans la mesure du possible.
- Utilisez différents modèles de conception basés sur
SharedArrayBuffer. Bien que cette solution ne soit pas parfaite, plusieurs applications audio Web utilisent un schéma similaire avecSharedArrayBufferpour exécuter le code audio intensif. Exemples :
Exemple 3: Rappel de l'appareil audio avec jitter à partir de AudioOutputDevice
Le timing précis du rappel audio est l'élément le plus important pour Web Audio. Il s'agit de l'horloge la plus précise de votre système. Si le système d'exploitation ou son sous-système audio ne peuvent pas garantir un délai de rappel solide, toutes les opérations ultérieures seront affectées. L'image suivante est un exemple de rappel audio avec jitter. Par rapport aux deux images précédentes, l'intervalle entre chaque rappel varie considérablement.
Vos options:
- Augmentez la taille de la mémoire tampon du rappel audio du système en ajustant l'option
latencyHint. - Si vous rencontrez un problème, signalez-le sur crbug.com en indiquant 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 d'inspecter les graphiques et les métriques de performances en temps réel.
Cette extension doit être installée à partir du Chrome Web Store.
Une fois l'installation terminée, accédez au panneau en ouvrant les outils pour les développeurs Chrome et en cliquant sur "Web Audio" dans le menu supérieur.
Le panneau Web Audio comporte quatre composants: le sélecteur de contexte, l'inspecteur de propriétés, le visualiseur de graphiques et le moniteur 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 que vous souhaitez inspecter. Vous pouvez également déclencher manuellement la collecte des déchets en cliquant sur l'icône en forme de poubelle à gauche.
Inspecteur de propriété
Le panneau latéral affiche différentes propriétés d'un contexte ou d'un AudioNode sélectionné par l'utilisateur. L'inspection des valeurs dynamiques dans AudioParam n'est pas prise en charge.
Visualiseur de graphiques
Cette vue affiche la topologie de graphique actuelle d'un contexte sélectionné par l'utilisateur. Cette visualisation change de manière dynamique en temps réel. En cliquant sur un élément de la visualisation, vous pouvez inspecter les informations détaillées dans l'outil d'inspection de la propriété.
Surveillance des performances
La barre d'état en bas n'est active que lorsque le 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é et est mise à jour toutes les secondes. Il fournit les informations suivantes:
Intervalle de rappel (ms): affiche la moyenne/variance pondérée de l'intervalle de rappel. Dans l'idéal, la moyenne doit être stable et la variance proche de zéro. Si vous constatez une grande variance, cela signifie que la fonction de rappel audio au niveau du système présente un timing instable, ce qui peut entraîner une mauvaise qualité du flux audio. (voir l'exemple 3 ci-dessus).
Capacité de rendu (en pourcentage): lorsque la capacité se rapproche de 100 %, cela signifie que le moteur de rendu fait trop pour un budget de rendu donné. Vous devriez donc réduire votre activité (par exemple, en utilisant moins d'objets
AudioNodesdans le graphique).
Vous pouvez déclencher manuellement un collecteur de déchets en cliquant sur l'icône en forme de corbeille.
Ancien panneau DevTools WebAudio
L'extension est désormais la méthode recommandée par l'équipe Chrome Web Audio, mais l'ancien panneau des outils pour les développeurs WebAudio est également disponible. Pour y accéder, cliquez sur le menu à trois points en haut à droite des outils de développement, puis sur Plus d'outils, puis sur WebAudio.
Conclusion
Le débogage audio est difficile. Le débogage audio dans le navigateur est encore plus difficile. Toutefois, ces outils peuvent vous aider en vous fournissant des insights utiles sur les performances du code audio Web. Toutefois, dans certains cas, vous pouvez rencontrer des problèmes dans Chrome ou dans l'extension. N'hésitez donc pas à signaler un bug sur crbug.com ou sur l'outil de suivi des problèmes des extensions.
Photo de Jonathan Velasquez sur Unsplash