Obtén información para generar perfiles del rendimiento de las apps de audio web en Chrome con about://tracing y Audion (una extensión de WebAudio en las Herramientas para desarrolladores de Chrome).
Llegaste a este artículo porque estás desarrollando una app que usa la API de Web Audio y experimentaste fallas inesperadas, como ruidos de estallido del resultado, o estás escuchando algo inesperado. Es posible que ya hayas participado en un debate de crbug.com y un ingeniero de Chrome te haya solicitado subir "datos de seguimiento" o analizar la visualización del gráfico. En este artículo, se muestra cómo obtener información relevante para que podamos comprender un problema y, con el tiempo, solucionarlo.
Herramientas de generación de perfiles de audio web
Hay dos herramientas que te ayudarán a generar perfiles de audio web: about://tracing y la extensión de WebAudio en las Herramientas para desarrolladores de Chrome.
¿Cuándo usas about://tracing?
Cuando ocurren "fallas" misteriosas. Si generas perfiles de la app con las herramientas de registro, obtendrás estadísticas sobre lo siguiente:
- Fragmentos de tiempo dedicados a llamadas a funciones específicas en diferentes subprocesos
- Sincronización de la devolución de llamada de audio en la vista de línea de tiempo
Por lo general, muestra plazos de devolución de llamada de audio omitidos o una gran recolección de elementos no utilizados que puede causar fallas de audio inesperadas. Esta información es útil para comprender un problema subyacente, por lo que los ingenieros de Chromium a menudo la preguntan, en especial cuando la reproducción local no es factible. Las instrucciones generales para el seguimiento están disponibles aquí.
¿Cuándo usas la extensión Web Audio Herramientas para desarrolladores?
Cuando quieras visualizar el gráfico de audio y supervisar el rendimiento del procesador de audio en tiempo real. El gráfico de audio, una red de objetos AudioNode para generar y sintetizar una transmisión de audio, a menudo se vuelve complejo, pero la topología de grafo es opaca por diseño. (La API de Web Audio no tiene funciones para la introspección por nodo o gráfico). Se producen algunos cambios en el gráfico y ahora escuchas silenciar. Luego, es hora de depurar escuchando. Nunca es fácil y se vuelve más difícil cuando tienes un gráfico de audio más grande. La extensión Web Audio para desarrolladores puede ayudarte a visualizar el gráfico.
Con esta extensión, puedes supervisar una estimación en ejecución de la capacidad de renderización, que indica el rendimiento del procesador de audio web en un presupuesto de renderización determinado (p.ej., aproximadamente 2.67 ms a 48 KHz). Si la capacidad se acerca al 100%, es probable que tu app produzca fallas porque el procesador no puede terminar el trabajo con el presupuesto especificado.
Usa about://tracing
Cómo capturar datos de seguimiento
Las instrucciones que se indican a continuación son para Chrome 80 y versiones posteriores.
Para obtener mejores resultados, cierra todas las demás pestañas y ventanas, y, luego, inhabilita las extensiones. Como alternativa, puedes iniciar una instancia nueva de Chrome o usar otras compilaciones de canales de versiones diferentes (p.ej., Beta o Canary). Una vez que tengas el navegador listo, sigue estos pasos:
- Abre tu aplicación (página web) en una pestaña.
- Abre otra pestaña y ve a
about://tracing. - Presiona el botón Grabar y selecciona Seleccionar la configuración manualmente.
- Presiona los botones None en las secciones Record Categories e Disabled by Default Categories.
- En la sección Categorías de registros, selecciona lo siguiente:
audioblink_gcmediav8.execute(si te interesa conocer el rendimiento del código JS deAudioWorklet)webaudio
- En la sección Inhabilitadas por categorías predeterminadas, selecciona lo siguiente:
audio-worklet(si te interesa dónde comienza la conversaciónAudioWorklet)webaudio.audionode(si necesitas el seguimiento detallado de cadaAudioNode)
- Presiona el botón Grabar que se encuentra en la parte inferior.
- Regresa a la pestaña de tu aplicación y vuelve a realizar los pasos que activaron el problema.
- Cuando tengas suficientes datos de seguimiento, vuelve a la pestaña de registro y presiona Detener.
Se mostrará el resultado en la pestaña Registro.
Presiona Guardar para guardar los datos de registro.
Cómo analizar los datos de seguimiento
Los datos de seguimiento muestran cómo el motor de audio web de Chrome procesa el audio. El procesador tiene dos modos de renderización diferentes: modo de sistema operativo y modo de Worklet. Cada modo usa un modelo de subprocesos diferente, por lo que los resultados del seguimiento también difieren.
Modo de sistema operativo
En el modo de sistema operativo, el subproceso AudioOutputDevice ejecuta todo el código de audio web. AudioOutputDevice es un subproceso de prioridad en tiempo real que se origina en el servicio de audio del navegador y está controlado por el reloj del hardware de audio. Si observas irregularidades en los datos de seguimiento en este carril, significa que el tiempo de devolución de llamada del dispositivo puede ser inestable. Se sabe que la combinación de Linux y Pulse Audio tiene este problema. Consulta los siguientes problemas de Chromium para obtener más detalles: #825823, #864463.
Modo Worklet
En el modo Worklet, que se caracteriza por un salto de subproceso de AudioOutputDevice al subproceso AudioWorklet, deberías ver seguimientos bien alineados en dos carriles de subprocesos, como se muestra a continuación. Cuando se activa el worklet, se renderizan todas las operaciones de audio web a través del subproceso AudioWorklet. Por el momento, esta conversación no tiene prioridad en tiempo real.
La irregularidad común aquí es un gran bloque causado por la recolección de elementos no utilizados o los plazos de renderización incumplidos. En ambos casos, se producen fallas en la transmisión de audio.
En ambos casos, los datos de seguimiento ideales se caracterizan por invocaciones de devolución de llamada del dispositivo de audio bien alineadas y por tareas de renderización que se completan bien dentro del presupuesto de renderización determinado. Las dos capturas de pantalla anteriores son excelentes ejemplos de los datos de seguimiento ideales.
Aprender a partir de ejemplos del mundo real
Ejemplo 1: Tareas de renderización que exceden el presupuesto de renderización
La siguiente captura de pantalla (problema #796330 de Chromium) es un ejemplo típico de cuándo el código en AudioWorkletProcessor tarda demasiado y supera un presupuesto de renderización determinado. La sincronización de la devolución de llamada funciona correctamente, pero la llamada a la función de procesamiento de audio de la API de Web Audio no pudo completar la tarea antes de la siguiente devolución de llamada del dispositivo.
Sus opciones:
- Reduce la carga de trabajo del audio grafo mediante el uso de menos instancias de
AudioNode. - Reduce la carga de trabajo de tu código en
AudioWorkletProcessor. - Aumenta la latencia base de
AudioContext.
Ejemplo 2: Recolección significativa de elementos no utilizados en el subproceso de worklet
A diferencia del subproceso de renderización de audio del sistema operativo, la recolección de elementos no utilizados se administra en el subproceso de worklet. Esto significa que, si tu código realiza una asignación o desasignación de memoria (p.ej., arrays nuevos), finalmente activa una recolección de elementos no utilizados que bloquea el subproceso de forma síncrona. Si la carga de trabajo de las operaciones de audio web y la recolección de elementos no utilizados es mayor que un presupuesto de renderización determinado, se producirán fallas en la transmisión de audio. La siguiente captura de pantalla es un ejemplo extremo de este caso.
Sus opciones:
- Asigna la memoria por adelantado y reutilízala siempre que sea posible.
- Usa diferentes patrones de diseño basados en
SharedArrayBuffer. Aunque esta no es una solución perfecta, varias apps de audio web usan un patrón similar conSharedArrayBufferpara ejecutar el código de audio intensivo. Ejemplos:
Ejemplo 3: Devolución de llamada del dispositivo de audio Jittery de AudioOutputDevice
La sincronización precisa de la devolución de llamada de audio es lo más importante para el audio web. Este debería ser el reloj más preciso del sistema. Si el sistema operativo o su subsistema de audio no pueden garantizar una sincronización correcta de la devolución de llamada, se verán afectadas todas las operaciones posteriores. La siguiente imagen es un ejemplo de devolución de llamada de audio inestable. En comparación con las dos imágenes anteriores, el intervalo entre cada devolución de llamada varía significativamente.
Sus opciones:
- Para aumentar el tamaño del búfer de devolución de llamada de audio del sistema, ajusta la opción
latencyHint. - Si encuentras un problema, infórmalo en crbug.com con los datos de seguimiento.
Cómo usar la extensión Web Audio Herramientas para desarrolladores
También puedes usar la extensión de Herramientas para desarrolladores diseñada específicamente para la API de Web Audio. A diferencia de la herramienta de seguimiento, esta proporciona una inspección en tiempo real de los gráficos y las métricas de rendimiento.
Esta extensión se debe instalar desde Chrome Web Store.
Después de la instalación, para acceder al panel, abre las Herramientas para desarrolladores de Chrome y haz clic en "Audio web" en el menú de la parte superior.
El panel de audio web tiene cuatro componentes: selector de contexto, inspector de propiedades, visualizador de gráficos y monitor de rendimiento.
Selector de contexto
Como una página puede tener varios objetos BaseAudioContext, este menú desplegable te permite elegir el contexto que deseas inspeccionar. También puedes activar manualmente la recolección
de elementos no utilizados haciendo clic en el ícono de la papelera a la izquierda.
Inspector de propiedades
En el panel lateral, se muestran varias propiedades de un contexto seleccionado por el usuario o AudioNode. No se admite la inspección de valores dinámicos en AudioParam.
Graph Visualizer
Esta vista renderiza la topología del gráfico actual de un contexto seleccionado por el usuario. Esta visualización cambia de forma dinámica en tiempo real. Cuando haces clic en un elemento de la visualización, puedes inspeccionar la información detallada en el Inspector de propiedades.
Supervisor de rendimiento
La barra de estado en la parte inferior solo está activa cuando el BaseAudioContext seleccionado
es un AudioContext, que se ejecuta en tiempo real. Esta barra muestra la calidad de transmisión de audio instantánea de un elemento AudioContext seleccionado y se actualiza cada segundo. Proporciona la siguiente información:
Intervalo de devolución de llamada (ms): Muestra la media o varianza ponderada del intervalo de devolución de llamada. Idealmente, la media debería ser estable y la varianza debe ser cercana a cero. Si observas una gran variación, significa que la función de devolución de llamada de audio a nivel del sistema tiene una sincronización inestable que puede generar una mala calidad de transmisión de audio. (Consulta el ejemplo 3, más arriba).
Capacidad de renderización (porcentaje): Cuando la capacidad se acerca al 100%, significa que el procesador realiza demasiadas tareas para un presupuesto de renderización determinado, por lo que deberías considerar hacer menos acciones (p.ej., usar menos objetos
AudioNodesen el gráfico).
Puedes activar manualmente un recolector de elementos no utilizados haciendo clic en el ícono de la papelera.
Panel de Herramientas para desarrolladores de WebAudio heredado
El equipo de Chrome Web Audio ahora recomienda la extensión, pero también está disponible el panel heredado de Herramientas para desarrolladores de WebAudio. Para acceder a este panel, haz clic en el menú de los "tres puntos" en la esquina superior derecha de Herramientas para desarrolladores. Luego, dirígete a Más herramientas y, luego, a WebAudio.
Conclusión
Es difícil depurar el audio. La depuración de audio en el navegador es aún más difícil. Sin embargo, estas herramientas pueden aliviar el dolor, ya que te proporcionan estadísticas útiles sobre el rendimiento del código de audio web. Sin embargo, en algunos casos, es posible que encuentres problemas en Chrome o en la extensión. Si es así, no tengas miedo de informar un error en crbug.com o en la herramienta de seguimiento de errores de las extensiones.
Foto de Jonathan Velasquez en Unsplash