Profiler des applications Web Audio dans Chrome

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 ce document 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 secs dans la sortie audio, ou que vous entendez quelque chose d'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 trace" ou d'examiner la visualisation du graphique.

Découvrez comment obtenir les informations pertinentes pour nous aider à comprendre le problème et, à terme, à 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 utilisez-vous about://tracing ?

Lorsque des "glitches" mystérieux se produisent. Le profilage de l'application avec les outils de traçage vous donne des informations sur :

• Tranches de temps passées par des appels de fonction spécifiques sur différents threads
• Heure du rappel audio dans la vue chronologique

Il indique généralement des délais non respectés pour le rappel audio ou 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. Consultez nos instructions générales pour le traçage.

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 dispose pas de fonctionnalités d'introspection des nœuds/graphiques.) Certaines modifications se produisent dans votre graphique et vous n'entendez plus rien. Ensuite, il est temps de déboguer en écoutant. Ce n'est jamais facile, et cela devient plus difficile lorsque vous avez un graphique audio plus grand. L'extension Web Audio DevTools peut vous aider en visualisant le graphique.

Cette extension vous permet de surveiller une estimation en cours de la capacité de rendu, qui indique les performances du moteur de rendu audio Web pour un budget de rendu donné (par exemple, environ 2, 67 ms à 48 kHz). Si la capacité approche les 100 %, cela signifie que votre application est susceptible de produire des problèmes, car le moteur de rendu ne parvient pas à terminer le travail dans le budget donné.

Utiliser about://tracing

Pour obtenir les 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 versions à partir de différents canaux de diffusion (par exemple, bêta ou Canary). Une fois le navigateur prêt :

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 Aucune dans les sections Catégories d'enregistrement et Catégories désactivées par défaut.
5. Dans la section Catégories d'enregistrements, sélectionnez les éléments suivants :
   • audio
   • blink_gc
   • media
   • v8.execute (si vous êtes intéressé par les performances du code JS AudioWorklet)
   • webaudio
6. 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 fil de discussion AudioWorklet)
   • webaudio.audionode (si vous avez besoin de la trace détaillée pour chaque AudioNode)
7. Appuyez sur le bouton Enregistrer en bas de l'écran.
8. Revenez à l'onglet de votre application et répétez les étapes qui ont déclenché le problème.
9. Lorsque vous disposez de suffisamment de données de trace, revenez à l'onglet "Traçage" et appuyez sur Arrêter.

10. L'onglet "Traçage" affiche le résultat.

    

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

Analyser les données de traçage

Les données de traçage visualisent la façon dont le moteur audio Web de Chrome affiche l'audio. Le moteur de rendu dispose de deux modes de rendu différents : le mode Système d'exploitation et le mode Worklet. Chaque mode utilise un modèle de threading différent, de sorte que les résultats du traçage diffèrent également.

Mode du système d'exploitation

En mode système d'exploitation, le thread AudioOutputDevice exécute tout le code Web Audio. Le AudioOutputDevice est un thread de priorité en temps réel provenant du service audio du navigateur, qui est piloté par l'horloge du matériel audio. Si vous constatez une irrégularité dans les données de trace de cette voie, cela signifie que le timing du rappel de l'appareil peut être instable. Ce problème est connu pour se produire avec la combinaison de Linux et Pulse Audio.

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 au thread AudioWorklet, vous devriez voir des traces bien alignées dans deux voies de thread. Lorsque le worklet est activé, toutes les opérations Web Audio sont rendues par le thread AudioWorklet. Ce thread n'est 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 problèmes se produisent 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 de périphérique audio bien alignés et des tâches de rendu effectuées bien dans le budget de rendu donné. Les deux captures d'écran 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 #796330) est un exemple typique de cas où le code dans AudioWorkletProcessor prend trop de temps et dépasse un budget de rendu donné. Le timing du rappel est correct, mais l'appel de la fonction de traitement audio de l'API Web Audio n'a pas réussi à terminer le travail 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 AudioWorkletProcessor.
• Augmentez la latence de base de AudioContext.

Exemple 2 : Collecte des déchets importante sur le thread du 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 du worklet. Cela signifie que si votre code effectue une allocation/désallocation de mémoire (par exemple, de nouveaux tableaux), il déclenche finalement un garbage collection qui bloque le thread de manière synchrone. Si la charge de travail des opérations audio Web et du garbage collection est supérieure à un budget de rendu donné, cela entraîne des problèmes dans le flux audio. La capture d'écran suivante est un exemple extrême de ce cas.

Vos options :

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

Exemple 3 : Rappel de périphérique audio saccadé depuis AudioOutputDevice

Le timing précis du rappel audio est l'élément le plus important pour Web Audio. 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 peuvent pas garantir un timing de rappel solide, toutes les opérations suivantes seront affectées. L'image suivante est un exemple de rappel audio saccadé. Par rapport aux deux images précédentes, l'intervalle entre chaque rappel varie considérablement.

Vos options :

• Augmentez la taille du tampon de rappel audio du système en ajustant l'option latencyHint.
• Si vous rencontrez un problème, signalez-le sur crbug.com en incluant les données de trace.

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, vous pouvez accéder au panneau en ouvrant les outils pour les développeurs Chrome et en cliquant sur "Web Audio" dans le menu du haut.

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 corbeille à gauche.

Inspecteur des propriétés

Le panneau latéral affiche différentes propriétés d'un contexte ou d'un AudioNode sélectionnés par l'utilisateur. L'inspection des valeurs dynamiques dans AudioParam n'est pas prise en charge.

Visualiseur de graphiques

Cette vue affiche la topologie actuelle du graphique 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 examiner les informations détaillées dans l'inspecteur de propriétés.

Surveillance des performances

La barre d'état en bas de l'écran 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 actualisée toutes les secondes. Il fournit les informations suivantes :

• Intervalle de rappel (ms) : affiche la moyenne ou la variance pondérée de l'intervalle de rappel. Dans l'idéal, la moyenne doit être stable et la variance doit être proche de zéro. Si vous constatez une grande variance, cela signifie que la fonction de rappel audio au niveau du système a un timing instable qui peut entraîner une mauvaise qualité du flux audio. (voir l'exemple 3).

• Capacité de rendu (pourcentage) : lorsque la capacité approche les 100 %, cela signifie que le moteur de rendu en fait trop pour un budget de rendu donné. Vous devriez donc envisager de réduire la charge (par exemple, en utilisant moins d'objets AudioNodes dans le graphique).

Vous pouvez déclencher manuellement un collecteur de déchets en cliquant sur l'icône en forme de corbeille.

Ancien panneau WebAudio des outils pour les développeurs

L'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 en haut à droite des outils de développement, puis accédez à Plus d'outils, puis WebAudio.

Conclusion

Le débogage audio est difficile. Le débogage audio dans le navigateur est encore plus difficile. Toutefois, ces outils peuvent vous faciliter la tâche en vous fournissant des informations utiles sur les performances du code audio Web. Toutefois, il peut arriver que vous rencontriez des problèmes dans Chrome ou dans l'extension. Signalez un bug sur crbug.com ou sur l'outil de suivi des problèmes liés aux extensions.