Extension breaks otherwise working site
elialbert opened this issue · 10 comments
I'm working on a beat production app. You can see it in progress here:
http://bb.upchicago.org
I was really excited to try this chrome extension, but as you can see if you visit the site with the extension installed, you get a node connecting error of some sort:
Uncaught Error: error connecting to node: [object DynamicsCompressorNode]
Uninstall the extension and the site immediately works again.
Any ideas? Happy to change my code to make this work, just not sure where to begin.
Thanks!
Thanks for the report. That exception cloaks the underlying one:
DOMException: Failed to execute 'postMessage' on 'Window': An object could not be cloned.
at C (<anonymous>:1:305)
at GainNode.<anonymous> (<anonymous>:10:30)
at GainNode._nativeConnect (<anonymous>:9:56)
at GainNode.AudioNode.connect (http://bb.upchicago.org/static/js/app.891adfaa3720a4a3f3a3.js:7:1598)
at GainNode.AudioNode.connect (http://bb.upchicago.org/static/js/app.891adfaa3720a4a3f3a3.js:7:1540)
at t.Gain.n.connect (http://bb.upchicago.org/static/js/app.891adfaa3720a4a3f3a3.js:7:4231)
at t.Volume.n.connect (http://bb.upchicago.org/static/js/app.891adfaa3720a4a3f3a3.js:7:4231)
at t.MembraneSynth.n.connect (http://bb.upchicago.org/static/js/app.891adfaa3720a4a3f3a3.js:7:4231)
at new e (http://bb.upchicago.org/static/js/app.891adfaa3720a4a3f3a3.js:14:22232)
at R (http://bb.upchicago.org/static/js/app.891adfaa3720a4a3f3a3.js:14:6194)
WAI can't JSON-serialize a message (noting that a connection was made) being sent to the extension. That's because the 2nd argument to connect is a t.Distortion object (probably from tone JS) instead of a number. That may be a bug you want to fix.
That being said, the Web Audio API behaves gracefully in that case and defaults to 0, so I think WAI should too. This change prevents WAI from breaking your app.
7c9b3c9
I will tag a new release within this week.
Unfortunately, we still can't see the graph even after the fix because I think the app has a draw loop that is adding a bunch of nodes on every redraw - at a pace too fast for WAI to keep up with. Basically, the graph is expanding too rapidly, so the page freezes :(
Thanks for the quick and detailed response! there was indeed a Tone.js connect() that should have been a chain(); fixing that allows the extension to load, so that's cool. I'm glad we could each help each other find a bug :)
And you're right that when I load it up I see the graph, but then I run out of memory in chrome real quick. I didn't think my draw loop added nodes, but I'll have to do a deep dive and see what's going on - certainly once the app loads, no new nodes should be getting added for a while. This tells me there may be some significant performance improvements should I be able to fix this, which is potentially a very good thing - so audion is already helping :)
Yes! I am glad as well. Also, I think the Chrome timeline recordings (flame charts) are great for culling work that is scheduled by calls to requestAnimationFrame.
Keep us posted, and let me know any issues / feature requests!
@chihuahua in case you're curious, it looks like the problem we're seeing happens in tone.js, since it's easy to see in the tone.js examples as well, for instance here.
I'm going to investigate and get in touch with the maintainer if I can't figure it out.
cheers!
edit: altho I have a feeling I know what it is - tonejs probably does a ton of killing and creating nodes all the time in order to abstract over various immutable properties in the web audio api. At least as I understand it, there are plenty of things you can't change without recreating a node in web audio - and tonejs tries to make this easier. So behind the scenes it maybe makes sense that it'd be doing this fairly frequently. On the other hand, that shouldn't be happening in an animation loop...
Edit: even better it looks like he fixed this exact problem about a month ago:
Tonejs/Tone.js@29d6fdd
Updating to the latest version of tone nips this in the bud and I can see the graph load. Audion still freezes later on but I'm going to keep digging.
Thank you for delving deeper! We want to support popular libraries like Tone.js, so this is important to know. I can repro what you said. I can see the graph loading, but the panel freezes relatively soon.
Yeah Tone.js is just the coolest thing.
I think it plays hard and heavy with the web audio API tho - it's kind of like original jquery played pretty hard with javascript and the dom, and for a while browsers were struggling to keep up - in my experience, tone is rough with the web audio API even in modern chrome, and you can really start to see that when you try to eg graph the nodes.
I'm about to be funemployed for a while, and I'm very interested in getting involved with OSS web audio. I'll be opensourcing my little project as well.
So I'm happy to help in any way I can!
That is good to hear because we certainly have much work to do. I'll soon file a few substantive issues (varying in scope) that want help. Bear in mind that I am not sure how influential this project will ultimately be or where it is exactly heading. Feedback supports how this extension addresses a key need, but I think the extent of its impact is in the air. We'll do whatever we can to confer upon you due credit though.
I posted a few issues and marked them with "help wanted". Feel free of course to propose your own ideas as well!
cool. I will dive into the codebase a bit now but I won't really be free until next week.
Sure thing! No rush at all.