![Dale St. Marthe](https://web.dev/images/authors/dalestmarthe.jpg) Dale St. Marthe [LinkedIn](https://www.linkedin.com/in/dale-st-marthe)

<br />

Use the **WebAudio** panel to view the [WebAudio API](https://developer.mozilla.org/docs/Web/API/Web_Audio_API) metrics.

## Overview

The **WebAudio** panel shows the [AudioContext](https://developer.mozilla.org/docs/Web/API/AudioContext) performance metrics for websites that use the WebAudio API.

> [!NOTE]
> **Note:** The Chrome WebAudio team also recommends downloading the DevTools [Web Audio extension](https://web.dev/articles/profiling-web-audio-apps-in-chrome#use_the_web_audio_devtools_extension) from the [Chrome Web Store](https://chromewebstore.google.com/detail/audion/cmhomipkklckpomafalojobppmmidlgl). This extension visualizes the web audio graph in real-time.

## Open the WebAudio panel

To open the **WebAudio** panel:

1. [Open DevTools](https://developer.chrome.com/docs/devtools/open.md.txt).
2. Open the **Command menu** by pressing:
   - macOS: <kbd>Command</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>
   - Windows, Linux, ChromeOS: <kbd>Control</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> ![Command Menu with](https://developer.chrome.com/static/docs/devtools/webaudio/image/command-menu-webaudio.png)
3. Start typing `WebAudio`, select **Show WebAudio** , and press <kbd>Enter</kbd>. DevTools displays the **WebAudio** panel at the bottom of your DevTools window.

Alternatively, in the top right corner, select **More options** \> **More tools** \> **WebAudio**.

![The WebAudio panel in DevTools](https://developer.chrome.com/static/docs/devtools/webaudio/image/devtools-webaudio.png)

## View the AudioContext metrics

In the action bar at the top of the **WebAudio** panel, select the AudioContext to see the following metrics for:

- **State** : Indicates the state of the current audio context. Can either be `closed`, `running`, or `suspended`.
- **Sample Rate** (Hz): The sampling rate per second as reported from AudioContext, converted to hertz.
- **Callback Buffer Size** (frames): The audio callback buffer size, specified in [sample frames](https://developer.mozilla.org/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#audio_buffers_frames_samples_and_channels), provided by the underlying system.
- **Max Output channels** (ch): The maximum number of audio channels available on the current audio output device.

And, in the status bar at the bottom:

- **Current Time** (s): A current timestamp in seconds reported from the AudioContext.
- **Callback Interval** (ms): The weighted average variance of time between callbacks.
- **Render Capacity** (percent): A percentage indicating how the web audio renderer is performing over a given render budget.

To collect garbage, click the corresponding button in the action bar.