Профилирование приложений веб-аудио в Chrome

Узнайте, как профилировать производительность веб-аудиоприложений в Chrome с помощью about://tracing и Audion (расширение WebAudio в инструментах разработчика Chrome).

Вероятно, вы попали на этот документ, потому что разрабатываете приложение, использующее Web Audio API , и столкнулись с неожиданными сбоями, такими как щелчки в выводе звука или вы слышите что-то неожиданное. Возможно, вы уже участвуете в обсуждении на crbug.com , и инженер Chrome попросил вас загрузить «данные трассировки» или изучить визуализацию графа.

Научитесь получать необходимую информацию, чтобы мы могли понять проблему и в конечном итоге устранить ее первопричину.

Инструменты веб-профилирования аудио

Для профилирования веб-аудио вам помогут два инструмента: about://tracing и расширение WebAudio в инструментах разработчика Chrome.

Когда следует использовать about://tracing ?

Когда происходят загадочные «сбои». Анализ приложения с помощью инструментов отслеживания позволяет получить информацию о:

• Временные интервалы, затраченные на выполнение конкретных вызовов функций в разных потоках.
• Время воспроизведения аудиосигнала в режиме временной шкалы

Обычно это указывает на пропущенные сроки выполнения обратных вызовов аудио или на масштабную сборку мусора, которые могут вызывать неожиданные сбои в работе звука. Эта информация полезна для понимания основной проблемы, поэтому инженеры Chromium часто запрашивают её, особенно когда локальное воспроизведение невозможно. Ознакомьтесь с нашими общими инструкциями по трассировке .

В каких случаях следует использовать расширение Web Audio DevTools?

Когда вам нужно визуализировать аудиограф и отслеживать работу аудиорендера в реальном времени, возникает необходимость в следующем: аудиограф, представляющий собой сеть объектов AudioNode для генерации и синтеза аудиопотока, часто бывает сложным, но топология графа по своей природе непрозрачна (Web Audio API не имеет функций для интроспекции узлов/графов). В вашем графе происходят изменения, и вы слышите тишину. Тогда настаёт время отладки путём прослушивания. Это никогда не бывает легко, и становится ещё сложнее, когда у вас большой аудиограф. Расширение Web Audio DevTools может помочь вам, визуализируя граф.

С помощью этого расширения вы можете отслеживать текущую оценку производительности рендеринга, которая показывает, как веб-аудиорендерер работает в рамках заданного бюджета рендеринга (например, приблизительно 2,67 мс при 48 кГц). Если производительность приближается к 100 процентам, это означает, что ваше приложение, вероятно, будет выдавать сбои, поскольку рендерер не успевает завершить работу в рамках заданного бюджета.

Используйте about://tracing

Для достижения наилучших результатов закройте все остальные вкладки и окна и отключите расширения. В качестве альтернативы вы можете запустить новый экземпляр Chrome или использовать другие сборки из разных каналов выпуска (например, Beta или Canary). После того, как браузер будет готов:

1. Откройте ваше приложение (веб-страницу) во вкладке.
2. Откройте другую вкладку и перейдите по about://tracing .
3. Нажмите кнопку «Запись» и выберите «Настройки вручную» .
4. Нажмите кнопки «Нет» в разделах « Категории записей» и «Категории, отключенные по умолчанию» .
5. В разделе «Категории записей» выберите следующее:
   • audio
   • blink_gc
   • media
   • v8.execute (если вас интересует производительность кода AudioWorklet на JavaScript)
   • webaudio
6. В разделе «Категории, отключенные по умолчанию» выберите следующее:
   • audio-worklet (если вам интересно, с чего начинается обсуждение AudioWorklet )
   • webaudio.audionode (если вам нужна подробная трассировка для каждого AudioNode )
7. Нажмите кнопку «Запись» внизу.
8. Вернитесь на вкладку приложения и повторите действия, которые вызвали проблему.
9. Когда у вас будет достаточно данных трассировки, вернитесь на вкладку трассировки и нажмите «Стоп» .

10. Вкладка «Трассировка» позволит визуализировать результат.

    

11. Нажмите «Сохранить» , чтобы сохранить данные трассировки.

Как анализировать данные трассировки

Данные трассировки визуализируют, как веб-аудиодвижок Chrome обрабатывает звук. Рендерер имеет два разных режима: режим операционной системы и режим Worklet . Каждый режим использует свою модель многопоточности, поэтому результаты трассировки также различаются.

режим операционной системы

В режиме операционной системы поток AudioOutputDevice выполняет весь код обработки веб-аудио. AudioOutputDevice — это поток с приоритетом реального времени, инициируемый аудиослужбой браузера и управляемый аппаратным тактовым генератором аудио. Если вы видите отклонения в данных трассировки в этом потоке, это означает, что время обратного вызова от устройства может быть нестабильным. Известно, что сочетание Linux и Pulse Audio имеет эту проблему.

Более подробную информацию можно найти в следующих проблемах Chromium: #825823 , #864463 .

Режим рабочего блока

В режиме Worklet, который характеризуется одним переходом потока от AudioOutputDevice к потоку AudioWorklet , вы должны увидеть хорошо выровненные трассировки в двух потоковых дорожках. Когда Worklet активирован, все операции с веб-аудио выполняются потоком AudioWorklet . Этот поток не имеет приоритета реального времени.

Распространённой проблемой здесь является большой блок, вызванный сборкой мусора или срывом сроков рендеринга. В обоих случаях это приводит к сбоям в аудиопотоке.

В обоих случаях идеальные данные для трассировки характеризуются хорошо согласованными вызовами обратных вызовов аудиоустройств и выполнением задач рендеринга в рамках заданного бюджета рендеринга. Два скриншота являются отличными примерами идеальных данных для трассировки.

Учимся на примерах из реальной жизни.

Пример 1: Задачи рендеринга выходят за рамки бюджета рендеринга.

Приведённый ниже скриншот ( проблема Chromium #796330 ) — типичный пример того, как код в AudioWorkletProcessor выполняется слишком долго и выходит за рамки заданного бюджета рендеринга. Время выполнения обратного вызова ведёт себя корректно, но вызов функции обработки звука из Web Audio API не успевает завершить работу до следующего вызова устройства.

Ваши варианты:

• Снизьте нагрузку на аудиограф, используя меньшее количество экземпляров AudioNode .
• Уменьшите нагрузку на ваш код в AudioWorkletProcessor .
• Увеличьте базовую задержку AudioContext .

Пример 2: Значительная сборка мусора в потоке рабочего процесса.

В отличие от потока рендеринга звука в операционной системе, сборка мусора осуществляется в потоке рабочего блока. Это означает, что если ваш код выполняет выделение/освобождение памяти (например, создание новых массивов), это в конечном итоге запускает сборку мусора, которая синхронно блокирует поток. Если нагрузка на операции веб-аудио и сборку мусора превышает заданный бюджет рендеринга, это приводит к сбоям в аудиопотоке. Следующий скриншот является крайним примером этого случая.

Ваши варианты:

• Выделяйте память заранее и используйте ее повторно при каждой возможности.
• Используйте различные шаблоны проектирования на основе SharedArrayBuffer . Хотя это и не идеальное решение, несколько веб-приложений, работающих с аудио, используют аналогичный шаблон с SharedArrayBuffer для выполнения ресурсоемкого аудиокода. Примеры:
  • Шаблон проектирования аудиоворкета

Пример 3: Обратный вызов функции AudioOutputDevice для обработки прерываний звука.

Точное время выполнения обратного вызова аудиосигнала — важнейший аспект веб-аудио. Это должны быть самые точные часы в вашей системе. Если операционная система или её аудиоподсистема не могут гарантировать стабильное время обратного вызова, это повлияет на все последующие операции. На следующем изображении показан пример нестабильного обратного вызова аудиосигнала. По сравнению с двумя предыдущими изображениями, интервал между каждым обратным вызовом значительно варьируется.

Ваши варианты:

• Увеличьте размер буфера обратного вызова системного звука, изменив параметр latencyHint .
• Если вы обнаружите проблему, создайте заявку на crbug.com, приложив данные трассировки.

Используйте расширение Web Audio DevTools.

Также можно использовать расширение DevTools, специально разработанное для Web Audio API. В отличие от инструмента трассировки, оно обеспечивает просмотр графиков и показателей производительности в реальном времени.

Это расширение необходимо установить из интернет-магазина Chrome .

После установки доступ к панели осуществляется через инструменты разработчика Chrome, где в верхнем меню выберите пункт «Веб-аудио».

Панель Web Audio состоит из четырех компонентов: селектора контекста, инспектора свойств, визуализатора графиков и монитора производительности.

Селектор контекста

Поскольку страница может содержать несколько объектов BaseAudioContext , это выпадающее меню позволяет выбрать контекст, который вы хотите проверить. Вы также можете вручную запустить сборку мусора, щелкнув значок корзины слева.

Инспектор недвижимости

На боковой панели отображаются различные свойства выбранного пользователем контекста или AudioNode . Просмотр динамических значений в AudioParam не поддерживается.

Визуализатор графиков

В этом представлении отображается текущая топология графа в выбранном пользователем контексте. Эта визуализация динамически изменяется в реальном времени. Щелкнув по элементу визуализации, вы можете просмотреть подробную информацию в инспекторе свойств.

Монитор производительности

Строка состояния внизу активна только тогда, когда выбранный BaseAudioContext является AudioContext , работающим в режиме реального времени. Эта строка отображает текущее качество аудиопотока выбранного AudioContext и обновляется каждую секунду. Она предоставляет следующую информацию:

• Интервал обратного вызова (мс): Отображает взвешенное среднее или дисперсию интервала обратного вызова. В идеале среднее значение должно быть стабильным, а дисперсия — близкой к нулю. Если вы видите большую дисперсию, это означает, что функция обратного вызова аудио на системном уровне имеет нестабильную синхронизацию, что может привести к низкому качеству аудиопотока. (См. пример 3).

• Производительность рендеринга (в процентах): Когда производительность приближается к 100 процентам, это означает, что рендерер выполняет слишком много работы при заданном бюджете рендеринга, поэтому следует рассмотреть возможность уменьшения нагрузки (например, использовать меньше объектов AudioNodes в графе).

Вы можете вручную запустить сборщик мусора, щелкнув значок корзины.

Устаревшая панель WebAudio DevTools

Расширение теперь является рекомендуемым методом командой Chrome Web Audio, но также доступна и старая панель инструментов разработчика WebAudio. Доступ к этой панели можно получить, щелкнув по меню с тремя точками в правом верхнем углу инструментов разработчика, затем перейдя в раздел «Дополнительные инструменты », а затем — WebAudio .

Заключение

Отладка звука — сложная задача. Отладка звука в браузере — ещё сложнее. Однако эти инструменты могут облегчить задачу, предоставив полезную информацию о работе веб-аудиокода. В некоторых случаях, однако, вы можете обнаружить проблемы в Chrome или расширении. Сообщите об ошибке на crbug.com или в системе отслеживания ошибок расширения .