Web Audio Inspector

Web Audio Inspector is a Chrome extension that adds a “Web Audio” panel to Developer Tools. This panel visualizes the AudioNode 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 AudioNode. See issue #73. Web Audio Inspector’s logic for overriding AudioNode constructors disallows classes from extending those constructors. We are trying to resolve this issue.

Development

Build Dependencies

Contribution

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 CONTRIBUTING.md. 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 git@ address. The https 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 build 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 js/entry-points.

Testing

Tests reside in the tests directory and use Closure’s jsunit library. Tests run in a web browser. Each test has a _test.html file (which sets up DOM elements required by the test) and a _test.js 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 _test.html file.