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

Saiba como criar um perfil de performance de apps Web Audio no Chrome usando about://tracing e Audion (uma WebAudio extensão no Chrome DevTools).

Você provavelmente chegou a este documento porque está desenvolvendo um app que usa a API Web Audio e teve problemas inesperados, como ruídos na saída, ou ouviu algo inesperado. Talvez você já esteja envolvido em uma crbug.com e um engenheiro do Chrome pediu para você fazer o upload de "dados de rastreamento" ou analisar a visualização do gráfico.

Saiba como conseguir as informações relevantes para que possamos entender o problema e corrigir a questão subjacente.

Ferramentas de criação de perfil do Web Audio

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

Quando usar about://tracing?

Quando ocorrem "problemas" misteriosos. A criação de perfil do app com as ferramentas de rastreamento oferece insights sobre:

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

Geralmente, isso mostra prazos perdidos de callback de áudio ou uma grande coleta de lixo que pode causar problemas de áudio inesperados. Essas informações são úteis para entender um problema subjacente. Por isso, os engenheiros do Chromium costumam pedir isso, principalmente quando a reprodução local não é viável. Confira nossas instruções gerais para rastreamento.

Quando usar a extensão Web Audio DevTools?

Quando você quiser visualizar o gráfico de áudio e monitorar a performance 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 design. A API Web Audio não tem recursos para introspecção de nó/gráfico. Algumas mudanças acontecem no gráfico e agora você ouve silêncio. Então é hora de depurar ouvindo. Isso 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ê a visualizar o gráfico.

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

Usar about://tracing

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 outras versões de diferentes canais de lançamento (por exemplo, Beta ou Canary). Depois de preparar o navegador:

1. Abra o 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 Nenhum nas seções Categorias de registro e Categorias desativadas por padrão.
5. Na seção Categorias de registro, selecione o seguinte:
   • audio
   • blink_gc
   • media
   • v8.execute (se você estiver interessado na performance do código JS AudioWorklet)
   • webaudio
6. Na seção Categorias desativadas por padrão, selecione o seguinte:
   • audio-worklet (se você estiver interessado em onde a linha de execução AudioWorklet começa)
   • webaudio.audionode (se você precisar do rastreamento detalhado de cada AudioNode)
7. Pressione o botão Gravar na parte de baixo.
8. Volte à guia do aplicativo e refaça as etapas que acionaram o problema.
9. Quando você tiver dados de rastreamento suficientes, volte à guia de rastreamento e pressione Parar.

10. A guia de rastreamento vai visualizar o resultado.

    

11. Pressione Salvar para salvar os dados de rastreamento.

Como analisar dados de rastreamento

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

Modo do sistema operacional

No modo do sistema operacional, a linha de execução AudioOutputDevice executa todo o código de áudio da Web. O AudioOutputDevice é uma linha de execução de prioridade em tempo real originada do serviço de áudio do navegador, que é controlado pelo relógio de hardware de áudio. Se você notar irregularidades nos dados de rastreamento nessa faixa, isso significa que o tempo de callback do dispositivo pode ser instável. A combinação de Linux e Pulse Audio é conhecida por ter esse problema.

Consulte os seguintes problemas do Chromium para mais detalhes: #825823, #864463.

Modo Worklet

No modo Worklet, que é caracterizado por um salto de linha de execução de AudioOutputDevice para a linha de execução AudioWorkletthread, você verá rastreamentos bem alinhados em duas faixas de linha de execução. 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 é uma prioridade em tempo real.

A irregularidade comum aqui é um grande bloco causado pela coleta de lixo ou por prazos de renderização perdidos. Ambos os casos levam a problemas no stream de áudio.

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

Aprender com exemplos reais

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 leva muito tempo e excede um determinado orçamento de renderização. O tempo de callback é bem-sucedido, mas a chamada de função de processamento de áudio da API Web Audio não conseguiu concluir 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 código no AudioWorkletProcessor.
• Aumente a latência base do AudioContext.

Exemplo 2: coleta de lixo significativa na linha de execução do 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 do worklet. Isso significa que, se o código fizer alocação/desalocação de memória (por exemplo, novas matrizes), ele acabará acionando uma coleta de lixo que bloqueia a linha de execução de forma síncrona. Se a carga de trabalho das operações de áudio da Web e da coleta de lixo for maior que um determinado orçamento de renderização, isso resultará em problemas no stream de áudio. A captura de tela a seguir é um exemplo extremo desse caso.

Suas opções:

• Alocar a memória antecipadamente e reutilizá-la sempre que possível.
• Use padrões de design diferentes 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 Audio Worklet

Exemplo 3: callback de dispositivo de áudio instável de AudioOutputDevice

O tempo preciso do callback de áudio é o mais importante para o áudio da Web. Esse deve ser o relógio mais preciso do seu sistema. Se o sistema operacional ou o subsistema de áudio não puder garantir um tempo de callback sólido, 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 de callback de áudio do sistema ajustando a latencyHint opção.
• Se você encontrar um problema, registre um problema no crbug.com com os dados de rastreamento.

Usar a extensão Web Audio DevTools

Também é possível usar a extensão DevTools projetada 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 performance.

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 Web Audio tem quatro componentes: seletor de contexto, inspetor de propriedades, visualizador de gráficos e monitor de performance.

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 ou AudioNode selecionado pelo usuário. A inspeção de valores dinâmicos em AudioParam não é aceita.

Visualizador de gráficos

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.

Monitor de performance

A barra de status na parte de baixo só fica ativa quando o BaseAudioContext é um AudioContext, que é 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 ponderada ou a variância do intervalo de callback. O ideal é que a média seja estável e a variância seja próxima de zero. Se você notar uma grande variância, isso significa que a função de callback de áudio no nível do sistema tem um tempo instável que pode levar a uma qualidade ruim do stream de áudio. (Consulte o exemplo 3).

• Capacidade de renderização (porcentagem): quando a capacidade chega perto de 100%, isso significa que o renderizador está fazendo muito para 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 WebAudio DevTools legado

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

Conclusão

A depuração de áudio é difícil. A depuração de áudio no navegador é ainda mais difícil. No entanto, essas ferramentas podem facilitar o processo, fornecendo insights úteis sobre como o código de áudio da Web funciona. Em alguns casos, no entanto, você pode encontrar problemas no Chrome ou na extensão. Registre um bug no crbug.com ou no Issue Tracker da extensão.