WebAudio: View WebAudio API metrics
Stay organized with collections
Save and categorize content based on your preferences.
Use the WebAudio panel to view the WebAudio API metrics.
Overview
The WebAudio panel shows the AudioContext performance metrics for websites that use the WebAudio API.
Open the WebAudio panel
To open the WebAudio panel:
- Open DevTools.
- Open the Command menu by pressing:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- Start typing
WebAudio
, select Show WebAudio, and press Enter. DevTools displays the WebAudio panel at the bottom of your DevTools window.
Alternatively, in the top right corner, select more_vert More options > More tools > WebAudio.
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, 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 mop button in the action bar.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-04-18 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Missing the information I need"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Too complicated / too many steps"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Out of date"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Samples / code issue"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Other"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Easy to understand"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Solved my problem"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Other"
}]
{"lastModified": "Last updated 2024-04-18 UTC."}
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-04-18 UTC."],[],[]]