Узнайте, как профилировать производительность приложений веб-аудио в Chrome с помощью about://tracing и Audion (расширение WebAudio в Chrome DevTools).
Вы попали на эту статью, вероятно, потому, что разрабатываете приложение, использующее API веб-аудио , и столкнулись с неожиданными сбоями, такими как треск на выходе, или вы слышите что-то неожиданное. Возможно, вы уже участвовали в обсуждении на crbug.com , и инженер Chrome попросил вас загрузить «данные трассировки» или просмотреть визуализацию графика. В этой статье показано, как получить соответствующую информацию, чтобы мы могли понять проблему и в конечном итоге устранить основную проблему.
Инструменты профилирования веб-аудио
Есть два инструмента, которые помогут вам при профилировании веб-аудио: about://tracing и расширение WebAudio в Chrome DevTools.
Когда вы используете about://tracing ?
Когда случаются загадочные «глюки». Профилирование приложения с помощью инструментов трассировки дает вам представление о:
- Временные интервалы, затраченные на вызовы определенных функций в разных потоках
- Время обратного аудиовызова на временной шкале
Обычно он показывает пропущенные сроки обратного вызова аудио или большую сборку мусора, которая может вызвать неожиданные сбои звука. Эта информация полезна для понимания основной проблемы, поэтому инженеры Chromium часто задают ее, особенно когда локальное воспроизведение невозможно. Общие инструкции по отслеживанию доступны здесь .
Когда вы используете расширение Web Audio DevTools?
Если вы хотите визуализировать аудиографик и отслеживать работу средства рендеринга звука в режиме реального времени. Аудиограф, сеть объектов AudioNode для генерации и синтеза аудиопотока, часто становится сложной, но топология графа непрозрачна по своей конструкции. (API веб-аудио не имеет функций для самоанализа узлов/графов.) В вашем графе происходят некоторые изменения, и теперь вы слышите тишину. Затем пришло время отладки путем прослушивания. Это никогда не бывает легко, и становится сложнее, когда у вас есть большой аудиограф. Расширение Web Audio DevTools может помочь вам визуализировать график.
С помощью этого расширения вы можете отслеживать текущую оценку мощности рендеринга, которая показывает, как работает веб-рендеринг аудио в рамках заданного бюджета рендеринга (например, примерно 2,67 мс при 48 кГц). Если мощность приближается к 100 процентам, это означает, что ваше приложение, скорее всего, будет вызывать сбои, поскольку средство рендеринга не может завершить работу в рамках заданного бюджета.
Используйте about://tracing
Как собирать данные отслеживания
Инструкции, приведенные ниже, предназначены для Chrome 80 и более поздних версий.
Для достижения наилучших результатов закройте все остальные вкладки и окна и отключите расширения. Альтернативно вы можете либо запустить новый экземпляр Chrome , либо использовать другие сборки из разных каналов выпуска (например, бета-версию или Canary). Подготовив браузер, выполните следующие действия:
- Откройте свое приложение (веб-страницу) на вкладке.
- Откройте другую вкладку и перейдите по
about://tracing. - Нажмите кнопку «Запись» и выберите «Выбрать настройки вручную» .
- Нажмите кнопки «Нет» в разделах «Категории записи » и «Отключено категориями по умолчанию» .
- В разделе «Категории записей» выберите следующее:
-
audio -
blink_gc -
media -
v8.execute(если вас интересует производительность JS-кодаAudioWorklet) -
webaudio
-
- В разделе «Отключено по категориям по умолчанию» выберите следующее:
-
audio-worklet(если вам интересно, где начинается потокAudioWorklet) -
webaudio.audionode(если вам нужна подробная трассировка для каждогоAudioNode)
-
- Нажмите кнопку записи внизу.
- Вернитесь на вкладку приложения и повторите действия, вызвавшие проблему.
- Когда у вас будет достаточно данных трассировки, вернитесь на вкладку трассировки и нажмите «Стоп» .
Вкладка трассировки позволит визуализировать результат.
Нажмите «Сохранить» , чтобы сохранить данные трассировки.
Как анализировать данные отслеживания
Данные трассировки визуализируют, как механизм веб-аудио Chrome визуализирует звук. Средство рендеринга имеет два разных режима рендеринга: режим операционной системы и режим Worklet . В каждом режиме используется своя модель потоков, поэтому результаты трассировки также различаются.
Режим операционной системы
В режиме операционной системы поток AudioOutputDevice запускает весь код веб-аудио. AudioOutputDevice — это приоритетный поток реального времени, исходящий из службы аудио браузера и управляемый аппаратными часами аудио. Если вы видите неравномерность данных трассировки на этой полосе, это означает, что время обратного вызова от устройства может быть нестабильным. Известно, что комбинация Linux и Pulse Audio имеет эту проблему. Дополнительные сведения см. в следующих проблемах Chromium: #825823 , #864463 .
Рабочий режим
В режиме Worklet, который характеризуется одним переходом потока от AudioOutputDevice к потоку AudioWorklet , вы должны увидеть хорошо выровненные трассировки в двух дорожках потока, как показано ниже. Когда ворлет активирован, все операции веб-аудио обрабатываются потоком AudioWorklet . Этот поток в настоящее время не является приоритетным в режиме реального времени. Распространенной ошибкой здесь является большой блок, вызванный сборкой мусора или пропущенными сроками рендеринга. Оба случая приводят к сбоям в аудиопотоке.
В обоих случаях идеальные данные трассировки характеризуются хорошо согласованными вызовами обратного вызова аудиоустройства и задачами рендеринга, которые выполняются в пределах заданного бюджета рендеринга. Два скриншота выше — отличные примеры идеальных данных трассировки.
Обучение на реальных примерах
Пример 1. Задачи рендеринга, выходящие за рамки бюджета рендеринга
Снимок экрана ниже ( проблема Chromium #796330 ) — типичный пример того, когда код в AudioWorkletProcessor занимает слишком много времени и выходит за рамки заданного бюджета рендеринга. Время обратного вызова организовано правильно, но вызов функции обработки звука API веб-аудио не смог завершить работу до следующего обратного вызова устройства.
Ваши варианты:
- Уменьшите нагрузку на аудиограф, используя меньшее количество экземпляров
AudioNode. - Уменьшите нагрузку на свой код в
AudioWorkletProcessor. - Увеличьте базовую задержку
AudioContext.
Пример 2. Значительная сборка мусора в потоке рабочего листа.
В отличие от потока рендеринга звука операционной системы, сбор мусора управляется в потоке ворлета. Это означает, что если ваш код выполняет выделение/освобождение памяти (например, новые массивы), он в конечном итоге запускает сборку мусора, которая синхронно блокирует поток. Если рабочая нагрузка операций веб-аудио и сбора мусора превышает заданный бюджет рендеринга, это приводит к сбоям в аудиопотоке. Следующий снимок экрана является крайним примером этого случая.
Ваши варианты:
- Выделите память заранее и используйте ее повторно, когда это возможно.
- Используйте различные шаблоны проектирования на основе
SharedArrayBuffer. Хотя это не идеальное решение, несколько веб-аудиоприложений используют аналогичный шаблон сSharedArrayBufferдля запуска интенсивного аудиокода. Примеры:
Пример 3. Обратный вызов аудиоустройства с дрожанием от AudioOutputDevice
Точное время обратного аудио-обратного вызова — самое важное для веб-аудио. Это должны быть самые точные часы в вашей системе. Если операционная система или ее аудиоподсистема не могут гарантировать четкое время обратного вызова, это повлияет на все последующие операции. На следующем изображении показан пример нервного обратного вызова звука. По сравнению с двумя предыдущими изображениями интервал между каждым обратным вызовом значительно различается.
Ваши варианты:
- Увеличьте размер буфера обратного вызова системного аудио, настроив параметр
latencyHint. - Если вы обнаружите проблему, сообщите о ней на crbug.com , указав данные трассировки.
Используйте расширение Web Audio DevTools.
Вы также можете использовать расширение DevTools, специально разработанное для API веб-аудио. В отличие от инструмента трассировки, он обеспечивает проверку графиков и показателей производительности в реальном времени.
Это расширение необходимо установить из Интернет-магазина Chrome .
После установки вы получите доступ к панели, открыв Chrome DevTools и нажав «Веб-аудио» в верхнем меню.
Панель веб-аудио состоит из четырех компонентов: селектор контекста, инспектор свойств, визуализатор графиков и монитор производительности.
Выбор контекста
Поскольку на странице может быть несколько объектов BaseAudioContext , это раскрывающееся меню позволяет выбрать контекст, который вы хотите проверить. Вы также можете вручную запустить сбор мусора, щелкнув значок корзины слева.
Инспектор недвижимости
На боковой панели показаны различные свойства выбранного пользователем контекста или AudioNode . Проверка динамических значений в AudioParam не поддерживается.
Визуализатор графиков
Это представление отображает текущую топологию графа выбранного пользователем контекста. Эта визуализация динамически меняется в реальном времени. Щелкнув элемент в визуализации, вы можете просмотреть подробную информацию в инспекторе свойств.
Монитор производительности
Строка состояния внизу активна только в том случае, если выбранный BaseAudioContext является AudioContext и работает в режиме реального времени. Эта панель показывает мгновенное качество аудиопотока выбранного AudioContext и обновляется каждую секунду. Он предоставляет следующую информацию:
Интервал обратного вызова (мс): отображает средневзвешенное/дисперсию интервала обратного вызова. В идеале среднее значение должно быть стабильным, а дисперсия должна быть близка к нулю. Если вы видите большое отклонение, это означает, что функция обратного вызова аудио на системном уровне имеет нестабильную синхронизацию, что может привести к ухудшению качества аудиопотока. (См. пример 3 выше.)
Мощность рендеринга (в процентах). Когда мощность приближается к 100 процентам, это означает, что средство рендеринга делает слишком много для данного бюджета рендеринга, поэтому вам следует подумать о том, чтобы делать меньше (например, использовать меньшее количество объектов
AudioNodesна графике).
Вы можете вручную запустить сборщик мусора, щелкнув значок корзины.
Устаревшая панель WebAudio DevTools
Расширение теперь является рекомендуемым методом командой Chrome Web Audio, но также доступна устаревшая панель WebAudio DevTools. Вы можете получить доступ к этой панели, щелкнув меню «три точки» в правом верхнем углу DevTools, затем перейдя в «Дополнительные инструменты» , а затем в «WebAudio» .
Заключение
Отладка звука сложна. Отладка звука в браузере еще сложнее. Однако эти инструменты могут облегчить задачу, предоставив вам полезную информацию о том, как работает код веб-аудио. Однако в некоторых случаях вы можете столкнуться с проблемами в Chrome или расширении. Тогда не бойтесь сообщать об ошибке на crbug.com или в систему отслеживания ошибок расширений .
Фото Джонатана Веласкеса на Unsplash