Web Audio DevTools Extension (graph visualizer)
What is Audion?
Audion is a handy Chrome extension designed for developers and sound engineers. As it integrates with Chrome's Developer Tools, it visualizes the web audio graph in real-time, presenting the structure of audio processing right in your browser. It's more than just an audio visualizer - it's a tool that supports understanding and debugging your web audio codes. To use it, all you need is to install the extension, locate it in the developer tools, and load a page that uses Web Audio API. Remember to check out this project on GitHub!
Extension stats
Users: 4,000+
Rating: 3.13
(38)
Creation date: 2017-04-21
Risk impact: High risk impact
Risk likelihood: Very low risk likelihood
Manifest version: 3
Permissions:
Size: 222.21K
Email: we*****@google.com
Ranking
# 15803
Other platforms
Not available on Firefox
Not available on Edge
Want to check extension ranking and stats more quickly for other Chrome extensions?
Install
Chrome-Stats extension
to view Chrome-Stats data as you browse the Chrome Web Store.
Extension summary
Audion is a Chrome extension that adds a Web Audio panel to Developer Tools. This panel visualizes the web audio graph in real-time.
How to use:
- Install the extension from Chrome Web Store.
- Open Chrome Developer Tools. You should be able to find “Web Audio” panel in the top. Select the panel.
- Visit or reload a page that uses Web Audio API. If the page is loaded before opening Developer Tools, you need to reload the page for the extension to work correctly.
- You can pan and zoom with the mouse and wheel. Click the “autofit” button to fit the graph within the panel.
Visit GitHub to follow this project, report issues, and contribute: https://github.com/GoogleChrome/audion
User reviews
Pros
- Brilliant tool for debugging audio web projects
- Helps identify audio issues quickly
- Shows more properties of audio nodes than competitors
Cons
- Bugs related to AudioBufferSourceNodes piling up
- Requires browser restart to function properly
- Struggles with a high number of audio nodes, leading to crashes
Most mentioned
- Had to restart the browser for it to work
- AudioBufferSourceNodes not being garbage collected
- Positive experiences in finding audio issues
Recent reviews
Added this as a required extension for debugging :D
//! use this extension to debug 07/11/23
//* https://chromewebstore.google.com/detail/audion/cmhomipkklckpomafalojobppmmidlgl
Had to restart the browser process to make it work. Previously just displayed a box with no audio nodes and I thought it was broken.
Ok, the tool is great but has some bugs, which I'll try to report. Basically it freaked out one of our testers when he installed it and discovered that AudioBufferSourceNodes were piling up and not going away. Indeed the plugin keeps references to all the nodes created and it appears to be impossible to get them to be garbage collected. I just spent several hours convincing myself that it wasn't our code.
Extension safety
Risk impact
Audion requires some sensitive permissions that could impact your browser and data security. Exercise caution before installing.
Risk likelihood
Audion has earned a good reputation and can be trusted.
Upgrade to see risk analysis details
Similar extensions
Here are some Chrome extensions that are similar to Audion:
Audio Analyser Extension Audio Pipes Spector.js Perfetto UI Shader Editor WebXR API Emulator DevTools Author Web Tracing Framework Refined GitHub Three.js Editor Extension Apollo Client Devtools OPFS Explorer
linuscedergren
4.70
2,000+
https://www.watchthatsound.nl
3.00
364
babylon.js
4.64
30,000+
https://perfetto.dev
4.00
5,000+
https://www.clicktorelease.com
4.29
5,000+
Mozilla Mixed Reality
4.30
30,000+
Mike King
3.92
7,000+
https://google.github.io/tracing-framework
3.64
4,000+
Sindre Sorhus
4.83
90,000+
https://www.clicktorelease.com
2.70
3,000+
https://www.apollographql.com
2.64
200,000+
https://tomayac.com
4.21
5,000+