Need help with audion?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

238 Stars 32 Forks Other 216 Commits 24 Opened issues


Audion (Web Audio Inspector) is a Chrome extension that adds a Web Audio panel to Developer Tools. This panel visualizes the web audio graph in real-time and lets users inspect nodes.

Services available


Need anything else?

Contributors list

# 70,360
157 commits
# 81,981
13 commits
# 54,987
2 commits
# 69,648
1 commit

Web Audio Inspector

Web Audio Inspector is a Chrome extension that adds a "Web Audio" panel to Developer Tools. This panel visualizes the

graph generated by Web Audio API JavaScript. Install the extension from its Chrome Web Store page.

Web Audio Inspector

The wiki details how to use Web Audio Inspector.

No Support for ES6 Classes at the Moment

This extension breaks ES6 classes that extend subclasses of

. See issue #73. Web Audio Inspector's logic for overriding
constructors disallows classes from
ing those constructors. We are trying to resolve this issue.


Build Dependencies


We welcome contributions. See the issues list, or suggest ideas. For starters, we currently have some usability and visualization issues that need owners.

  1. Review Note that Google requires contributors to sign a Contributors License Agreement.
  2. Set up 2-factor authentication for Github (as Google requires).
  3. Clone the repository with the
    [email protected]
    address. The
    address does not work with 2-factor authentication.

Build and run

Run the following commands in the project root directory.

npm install   # Install Node modules
gulp          # Build the extension

Then load the

directory as an unpacked Chrome extension.

Code Layout

This project uses the Google Closure JavaScript library and Google's JavaScript style guide.

The extension comprises of several scripts. Each script corresponds to a Closure entry point (JS file) within

  • tracing.js: The tracing code is run before any scripts of a web page run. It adds tracking code to functions of the Web Audio API.
  • inject-tracing.js: This script injects the tracing code (above) into a web page. It is a content script.
  • background.js: The background script routes messages to and from various scripts. For instance, web audio updates from content scripts are routed to the corresponding dev tools scripts.
  • dev-tools.js: The dev tools script is run when the user opens Chrome Developer Tools. The script adds a
    Web Audio
    panel to Developer Tools. It routes messages to logic within the panel.
  • panel.js: This script manages the UI for the panel within Developer Tools. It uses JointJS for rendering graphs and dagre for layout.
  • tab-page-changed.js: This simple script detects when the URL within a tab changes.


Tests reside in the

directory and use Closure's jsunit library. Tests run in a web browser. Each test has a
file (which sets up DOM elements required by the test) and a
file (which contains the bulk testing logic). To run all tests at once,
  1. Run
    npm install
    to update dependencies if you have not done so.
  2. Run
    gulp test
    to start a static server. This command also uses your default browser (preferably Google Chrome) to open a web page (pictured below) for running all tests at once.

Web Audio Inspector

To run tests individually, you can use that UI as well, or you could visit the path to that test's


We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.