liufeigit/audion

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.

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.

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

• Node.js version 6 or above.
• Java SE Development Kit version 7 or above if necessary.

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.

• 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.

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.

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