search

GoogleChrome / audion

Audion is a Chrome extension that adds a Web Audio panel to Developer Tools. This panel visualizes the web audio graph in real-time.
https://chrome.google.com/webstore/detail/web-audio-inspector/cmhomipkklckpomafalojobppmmidlgl
Apache License 2.0
367 stars 56 forks source link

Visualization breaks on dynamic changes #150

Open vneznaikin opened 2 years ago

vneznaikin commented 2 years ago

See Codepen example: https://cdpn.io/gradopetr/fullpage/BarqZjV [Edit: https://codepen.io/gradopetr/pen/BarqZjV]

Browser: Chrome 104.0.5112.81 Audion 3.0.5

If we use a Timeout of 10 seconds, to simulate dynamic changes, the visualization is not collected correctly

temp-2

braebo commented 2 years ago

I've been struggling with this issue in Brave Browser as well. It seems to create spaghetti once something updates (and I suspect it doesn't properly remove nodes from the graph after they're GC'd).

TenghuiZhang commented 1 year ago

Hi, @vneznaikin when I am running your code in my local browser, it seems works for me.

The reproduce steps:

  1. Open the page
  2. Left click the browser and click on the "inspect" button
  3. Click the "Web Audio" button in the dev tool to turn on "Audion"
  4. Refresh the page to load all web audio component event
  5. you can see the correct visualization and after 10s the graph changed dynamically. Dynamic graph change

Please let me know if I miss any steps relate to reproducing this error.

vneznaikin commented 1 year ago

@TenghuiZhang Yes, your result is correct. But I still get a broken tree. I don't know why.

TenghuiZhang commented 1 year ago

@vneznaikin Did you refresh your web page after opened Audion extension?

vneznaikin commented 1 year ago

@TenghuiZhang Of course. The result is consistently repeatable. Windows 10 Chrome 114.0.5735.90