Aprende a generar perfiles del rendimiento de las apps de Web Audio en Chrome con about://tracing y Audion (una extensión de WebAudio en las Herramientas para desarrolladores de Chrome).
Es probable que hayas llegado a este documento porque estás desarrollando una app que usa la API de Web Audio y experimentaste fallas inesperadas, como ruidos de estallido en la salida, o escuchas algo inesperado. Es posible que ya estés participando en un debate en crbug.com y que un ingeniero de Chrome te haya pedido que subas "datos de seguimiento" o que consultes la visualización del gráfico.
Aprende a obtener la información pertinente para que podamos comprender el problema y, finalmente, solucionar el problema subyacente.
Herramientas de generación de perfiles de Web Audio
Hay dos herramientas que te ayudarán a generar perfiles de Web Audio: about://tracing y la extensión WebAudio en las Herramientas para desarrolladores de Chrome.
¿Cuándo se usa about://tracing?
Cuando ocurren "fallas" misteriosas. La generación de perfiles de la app con las herramientas de seguimiento te brinda estadísticas sobre lo siguiente:
- Segmentos de tiempo que pasan las llamadas a funciones específicas en diferentes subprocesos
- Sincronización de devolución de llamada de audio en la vista de cronograma
Por lo general, muestra los plazos de devolución de llamada de audio perdidos o la gran recolección de elementos no utilizados que pueden causar fallas de audio inesperadas. Esta información es útil para comprender un problema subyacente, por lo que los ingenieros de Chromium suelen solicitarla, en especial cuando la reproducción local no es factible. Consulta nuestras instrucciones generales para el seguimiento.
¿Cuándo se usa la extensión de Web Audio DevTools?
Cuando deseas visualizar el gráfico de audio y supervisar el rendimiento del renderizador de audio en tiempo real. El gráfico de audio, una red de objetos AudioNode para generar y sintetizar una transmisión de audio, suele ser complejo, pero la topología del gráfico es opaca por diseño. (La API de Web Audio no tiene funciones para la introspección de nodos o gráficos). Se producen algunos cambios en tu gráfico y ahora escuchas silencio. Luego, es el momento 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 de Web Audio DevTools 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 renderizador de audio web en un presupuesto de renderización determinado (por ejemplo, aproximadamente 2.67 ms a 48 KHz). Si la capacidad se acerca al 100%, significa que es probable que tu app produzca fallas porque el renderizador no puede terminar el trabajo en el presupuesto determinado.
Usa about://tracing
Para obtener mejores resultados, cierra todas las demás pestañas y ventanas, y deshabilita las extensiones. Como alternativa, puedes iniciar una instancia nueva de Chrome o usar otras compilaciones de diferentes canales de lanzamiento (p.ej., Beta o Canary). Una vez que tengas el navegador listo, haz lo siguiente:
- 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 configuración manualmente.
- Presiona los botones Ninguno en las secciones Categorías de registro y Categorías inhabilitadas de forma predeterminada.
- En la sección Categorías de registro, selecciona lo siguiente:
audioblink_gcmediav8.execute(si te interesa el rendimiento del código JS deAudioWorklet)webaudio
- En la sección Categorías inhabilitadas de forma predeterminada, selecciona lo siguiente:
audio-worklet(si te interesa dónde comienza el subprocesoAudioWorklet)webaudio.audionode(si necesitas el seguimiento detallado de cadaAudioNode)
- Presiona el botón Grabar en la parte inferior.
- Vuelve a la pestaña de la aplicación y repite los pasos que activaron el problema.
- Cuando tengas suficientes datos de seguimiento, vuelve a la pestaña de seguimiento y presiona Detener.
La pestaña de seguimiento visualizará el resultado.
Presiona Guardar para guardar los datos de seguimiento.
Cómo analizar los datos de seguimiento
Los datos de seguimiento visualizan cómo el motor de audio web de Chrome renderiza el audio. El renderizador tiene dos modos de renderización diferentes: Modo de sistema operativo y Modo de worklet. Cada modo usa un modelo de subprocesamiento diferente, por lo que los resultados del seguimiento también difieren.
Modo de sistema operativo
En el modo de sistema operativo, el AudioOutputDevice subproceso 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 que se controla con el reloj de hardware de audio. Si ves irregularidades en los datos de seguimiento en este carril, significa que la sincronización 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 de worklet
En el modo de worklet, que se caracteriza por un salto de subproceso de
AudioOutputDevice a la AudioWorklet subproceso, deberías ver seguimientos bien alineados en dos carriles de subprocesos. Cuando se activa el worklet, el subproceso AudioWorklet renderiza todas las operaciones de audio web. Este subproceso no es una prioridad en tiempo real.
La irregularidad común aquí es un bloque grande causado por la recolección de elementos no utilizados o los plazos de renderización perdidos. Ambos casos provocan 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 tareas de renderización que se completan dentro del presupuesto de renderización determinado. Las dos capturas de pantalla son excelentes ejemplos de los datos de seguimiento ideales.
Aprende de ejemplos del mundo real
Ejemplo 1: Tareas de renderización que superan el presupuesto de renderización
La siguiente captura de pantalla (problema de Chromium #796330) es un
ejemplo típico de cuando el código en AudioWorkletProcessor tarda demasiado y
supera un presupuesto de renderización determinado. La sincronización de devolución de llamada se comporta bien, pero la llamada a la función de procesamiento de audio de la API de Web Audio no pudo completar el trabajo antes de la siguiente devolución de llamada del dispositivo.
Tus opciones:
- Reduce la carga de trabajo del gráfico de audio usando 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 de elementos no utilizados significativa 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. Eso significa que, si tu código realiza la asignación o desasignación de memoria (p.ej., arrays nuevos), eventualmente activará una recolección de elementos no utilizados que bloqueará 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 producen fallas en la transmisión de audio. La siguiente captura de pantalla es un ejemplo extremo de este caso.
Tus opciones:
- Asigna la memoria por adelantado y vuelve a usarla siempre que sea posible.
- Usa diferentes patrones de diseño basados en
SharedArrayBuffer. Si bien 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 inestable 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 de tu sistema. Si el sistema operativo o su subsistema de audio no pueden garantizar una sincronización de devolución de llamada sólida, 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.
Tus opciones:
- Aumenta el tamaño del búfer de devolución de llamada de audio del sistema ajustando la
latencyHintopción. - Si encuentras un problema, informa un error en crbug.com con los datos de seguimiento.
Usa la extensión de Web Audio DevTools
También puedes usar la extensión de DevTools diseñada específicamente para la API de Web Audio. A diferencia de la herramienta de seguimiento, esta proporciona inspección en tiempo real de gráficos y métricas de rendimiento.
Esta extensión debe instalarse desde el Chrome Web Store.
Después de la instalación, para acceder al panel, abre las Herramientas para desarrolladores de Chrome y haz clic en "Web Audio" en el menú superior.
El panel de Web Audio tiene cuatro componentes: selector de contexto, inspector de propiedades, visualizador de gráficos y supervisor 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 papelera de la izquierda.
Inspector de propiedades
El panel lateral muestra varias propiedades de un contexto o AudioNode seleccionado por el usuario. No se admite la inspección de valores dinámicos en AudioParam.
Visualizador de gráficos
En esta vista, se 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. Si 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
es un AudioContext, que se ejecuta en tiempo real. Esta barra muestra la calidad instantánea de la transmisión de audio de un AudioContext seleccionado y se actualiza cada segundo. Proporciona la siguiente información:
Intervalo de devolución de llamada (ms): Muestra la media ponderada o la varianza del intervalo de devolución de llamada. Idealmente, la media debería ser estable y la varianza debería estar cerca de cero. Si ves una varianza grande, 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 calidad de transmisión de audio deficiente. (Consulta el ejemplo 3).
Capacidad de renderización (porcentaje): Cuando la capacidad se acerca al 100%, significa que el renderizador está haciendo demasiado para un presupuesto de renderización determinado, por lo que deberías considerar hacer menos (p.ej., usar menos objetos
AudioNodesen el gráfico).
Para activar manualmente un recolector de elementos no utilizados, haz clic en el ícono de papelera.
Panel de WebAudio DevTools heredado
La extensión ahora es un método recomendado por el equipo de Web Audio de Chrome, pero también está disponible el panel de WebAudio DevTools heredado. Para acceder a este panel, haz clic en el menú de "tres puntos" en la esquina superior derecha de DevTools, luego ve a Más herramientas y, luego, a WebAudio.
Conclusión
Depurar audio es difícil. Depurar audio en el navegador es aún más difícil. Sin embargo, estas herramientas pueden aliviar el dolor, ya que te brindan 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. Informa un error en crbug.com o en la Herramienta de seguimiento de errores de la extensión.