Como criar perfis de apps de áudio da Web no Chrome

Saiba como criar o perfil do desempenho de apps de áudio da Web no Chrome usando o about://tracing e o Audion, uma extensão WebAudio no Chrome DevTools.

Você chegou a este artigo provavelmente porque está desenvolvendo um app que usa a API Web Audio e encontrou falhas inesperadas, como ruídos de estalo na saída, ou ouve algo inesperado. Talvez você já esteja envolvido em uma discussão do crbug.com, e um engenheiro do Chrome pediu para você fazer upload de "dados de rastreamento" ou analisar a visualização de gráfico. Este artigo mostra como conseguir as informações relevantes para entender um problema e corrigir o problema subjacente.

Ferramentas de criação de perfil do Web Audio

Há duas ferramentas que ajudam a criar o perfil do Web Audio, about://tracing e a extensão WebAudio no Chrome DevTools.

Quando você usa o about://tracing?

Quando "falhas" misteriosas acontecerem. A criação de perfil do app com as ferramentas de rastreamento oferece insights sobre:

• Frações de tempo gasto por chamadas de função específicas em linhas de execução diferentes
• Tempo do callback de áudio na visualização da linha do tempo

Geralmente, ele mostra prazos de callback de áudio perdidos ou uma grande coleta de lixo que podem causar falhas inesperadas de áudio. Essas informações são úteis para entender um problema subjacente. Por isso, os engenheiros do Chromium fazem muitas perguntas, principalmente quando a reprodução local não é viável. As instruções gerais para rastreamento estão disponíveis aqui.

Quando você usa a extensão Web Audio DevTools?

Quando você quiser visualizar o gráfico de áudio e monitorar o desempenho do renderizador de áudio em tempo real. O gráfico de áudio, uma rede de objetos AudioNode para gerar e sintetizar um stream de áudio, geralmente fica complexo, mas a topologia do gráfico é opaca por padrão. A API Web Audio não tem recursos para introspecção de nó/gráfico. Algumas alterações acontecem no gráfico, e agora você ouve silêncio. Depois, é hora de depurar, ouvindo. Nunca é fácil e fica mais difícil quando você tem um gráfico de áudio maior. A extensão Web Audio DevTools pode ajudar você visualizando o gráfico.

Com essa extensão, é possível monitorar uma estimativa em execução da capacidade de renderização, que indica o desempenho do renderizador de áudio da Web em um determinado orçamento de renderização (por exemplo, aproximadamente 2,67 ms a 48 KHz). Se a capacidade estiver perto de 100%, isso significa que seu app provavelmente vai produzir falhas porque o renderizador não concluir o trabalho dentro do orçamento determinado.

Usar about://tracing

Como capturar dados de rastreamento

As instruções abaixo são para o Chrome 80 e versões mais recentes.

Para melhores resultados, feche todas as outras guias e janelas e desative as extensões. Como alternativa, você pode iniciar uma nova instância do Chrome ou usar outros builds de canais de lançamento diferentes (por exemplo, Beta ou Canary). Quando o navegador estiver pronto, siga as etapas abaixo:

1. Abra seu aplicativo (página da Web) em uma guia.
2. Abra outra guia e acesse about://tracing.
3. Pressione o botão Gravar e selecione Selecionar configurações manualmente.
4. Pressione os botões None nas seções Record Categories e Disabled by Default Categories.
5. Na seção Record Categories, selecione o seguinte:
   • audio
   • blink_gc
   • media
   • v8.execute (se você tiver interesse no desempenho do código JS AudioWorklet)
   • webaudio
6. Na seção Desativado por categorias padrão, selecione o seguinte:
   • audio-worklet (se você quiser saber onde a linha de execução AudioWorklet começa)
   • webaudio.audionode (se você precisar do rastro detalhado de cada AudioNode)
7. Pressione o botão Gravar na parte inferior.
8. Volte para a guia do aplicativo e refaça as etapas que acionaram o problema.
9. Quando você tiver dados de rastreamento suficientes, volte para a guia de rastreamento e pressione Stop.

10. A guia "Rastreamento" mostra o resultado.

    

11. Pressione Salvar para armazenar os dados de rastreamento.

Como analisar dados de rastreamento

Os dados de rastreamento mostram como o mecanismo de áudio da Web do Chrome renderiza o áudio. O renderizador tem dois modos de renderização diferentes: modo de sistema operacional e modo de Worklet. Cada modo usa um modelo de linha de execução diferente, então os resultados do rastreamento também são diferentes.

Modo de sistema operacional

No modo de sistema operacional, a linha de execução AudioOutputDevice executa todo o código de áudio da Web. O AudioOutputDevice é uma linha de execução prioritária em tempo real, originada do serviço de áudio do navegador, acionada pelo relógio do hardware de áudio. Se você perceber irregularidades nos dados de rastreamento nessa faixa, isso significa que o tempo do callback do dispositivo pode estar instável. A combinação de Linux e Pulse Audio é conhecida por ter esse problema. Consulte os seguintes problemas do Chromium para saber mais: #825823, #864463.

Modo Worklet

No modo Worklet, que é caracterizado por um salto de uma linha de execução de AudioOutputDevice para a linha de execução AudioWorklet, você ve rastros bem alinhados em duas faixas, conforme mostrado abaixo. Quando o worklet é ativado, todas as operações de áudio da Web são renderizadas pela linha de execução AudioWorklet. Essa linha de execução não tem prioridade em tempo real. A irregularidade comum aqui é um grande bloco causado pela coleta de lixo ou pelos prazos de renderização perdidos. Ambos os casos levam a falhas no stream de áudio.

Em ambos os casos, os dados de rastreamento ideais são caracterizados por invocações de callback de dispositivos de áudio bem alinhadas e tarefas de renderização concluídas dentro do orçamento de renderização especificado. As duas capturas de tela acima são ótimos exemplos dos dados de rastreamento ideais.

Aprender com exemplos do mundo real

Exemplo 1: tarefas de renderização que excedem o orçamento de renderização

A captura de tela abaixo (problema 796330 do Chromium) é um exemplo típico de quando o código em AudioWorkletProcessor demora muito e vai além de um determinado orçamento de renderização. O tempo do callback é adequado, mas a chamada da função de processamento de áudio da API Web Audio não concluiu o trabalho antes do próximo callback do dispositivo.

Suas opções:

• Reduza a carga de trabalho do gráfico de áudio usando menos instâncias AudioNode.
• Reduza a carga de trabalho do seu código no AudioWorkletProcessor.
• Aumente a latência base de AudioContext.

Exemplo 2: coleta de lixo significativa na linha de execução de worklet

Ao contrário da linha de execução de renderização de áudio do sistema operacional, a coleta de lixo é gerenciada na linha de execução de worklet. Isso significa que, se o código fizer alocação/desalocação de memória (por exemplo, novas matrizes), ele acionará uma coleta de lixo que bloqueia a linha de execução de maneira síncrona. Se a carga de trabalho das operações de áudio da Web e a coleta de lixo for maior do que um determinado orçamento de renderização, isso resultará em falhas no stream de áudio. A captura de tela a seguir é um exemplo extremo desse caso.

Suas opções:

• Aloque a memória antecipadamente e reutilize-a sempre que possível.
• Use diferentes padrões de design com base em SharedArrayBuffer. Embora essa não seja uma solução perfeita, vários apps de áudio da Web usam um padrão semelhante com SharedArrayBuffer para executar o código de áudio intensivo. Exemplos:
  • Padrão de design do Worklet de áudio

Exemplo 3: callback do dispositivo de áudio com instabilidade de AudioOutputDevice

O tempo exato do callback do áudio é o mais importante para o áudio da Web. Este será o relógio mais preciso do sistema. Se o sistema operacional ou o subsistema de áudio dele não puder garantir um tempo sólido de callback, todas as operações subsequentes serão afetadas. A imagem a seguir é um exemplo de callback de áudio instável. Em comparação com as duas imagens anteriores, o intervalo entre cada callback varia significativamente.

Suas opções:

• Aumente o tamanho do buffer do callback de áudio do sistema ajustando a opção latencyHint.
• Se encontrar um problema, registre um problema em crbug.com com os dados de rastreamento.

Usar a extensão Web Audio DevTools

Você também pode usar a extensão DevTools criada especificamente para a API Web Audio. Ao contrário da ferramenta de rastreamento, ela oferece inspeção em tempo real de gráficos e métricas de desempenho.

Essa extensão precisa ser instalada na Chrome Web Store.

Após a instalação, acesse o painel abrindo o Chrome DevTools e clicando em "Web Audio" no menu superior.

O painel "Áudio da Web" tem quatro componentes: seletor de contexto, inspetor de propriedades, Visualizador de gráfico e monitor de desempenho.

Seletor de contexto

Como uma página pode ter vários objetos BaseAudioContext, esse menu suspenso permite escolher o contexto que você quer inspecionar. Também é possível acionar manualmente a coleta de lixo clicando no ícone de lixeira à esquerda.

Inspetor de propriedades

O painel lateral mostra várias propriedades de um contexto selecionado pelo usuário ou AudioNode. A inspeção de valores dinâmicos em AudioParam não é compatível.

Visualizer de gráfico

Essa visualização renderiza a topologia do gráfico atual de um contexto selecionado pelo usuário. Essa visualização muda dinamicamente em tempo real. Ao clicar em um elemento na visualização, você pode inspecionar as informações detalhadas no inspetor de propriedades.

Monitoramento de desempenho

A barra de status na parte inferior só fica ativa quando o BaseAudioContext selecionado é um AudioContext, executado em tempo real. Essa barra mostra a qualidade instantânea do stream de áudio de um AudioContext selecionado e é atualizada a cada segundo. Ela fornece as seguintes informações:

• Intervalo de callback (ms): mostra a média ou variância ponderada do intervalo de callback. O ideal é que a média seja estável e a variância esteja próxima de zero. Se você perceber uma grande variação, isso significa que a função de callback de áudio no nível do sistema tem tempo instável que pode levar a uma qualidade de stream de áudio instável. (Veja o exemplo 3 acima.)

• Capacidade de renderização (porcentagem): quando a capacidade se aproxima de 100 por cento, isso significa que o renderizador está fazendo muito por um determinado orçamento de renderização. Portanto, considere fazer menos (por exemplo, usar menos objetos AudioNodes no gráfico).

É possível acionar manualmente um coletor de lixo clicando no ícone de lixeira.

Painel legado do WebAudio DevTools

A extensão agora é um método recomendado pela equipe do Chrome Web Audio, mas o painel legado do WebAudio DevTools também está disponível. Para acessar esse painel, clique no menu dos três pontos no canto superior direito do DevTools. Depois, acesse Mais ferramentas e WebAudio.

Conclusão

Depurar o áudio é difícil. Depurar o áudio no navegador é ainda mais difícil. No entanto, essas ferramentas podem facilitar o processo, fornecendo insights úteis sobre o desempenho do código de áudio da Web. Em alguns casos, no entanto, você pode encontrar problemas no Chrome ou na extensão. Então, não tenha medo de registrar um bug em crbug.com ou no Issue Tracker de extensão.

Foto de Jonathan Velasquez no Unsplash