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

google
218 Stars 29 Forks Other 212 Commits 27 Opened issues

Description

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

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
extend
ing 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
    [email protected]
    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.

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.

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.