Issues with remove() - Cannot read property 'getByteTimeDomainData' of undefined

Hi All-

Got a doozy here, really need some halps!

So in a nut shell my partner and I are working on a web based VJ app that lets the user pick different sketches to display. Everything was working ok until we tried to have a “master” canvas that displayed whatever sketch was picked by the user and a “cue” canvas that was able to be transitioned to from what was displayed on the “master”. This allows the user to see what sketch is coming next, adjust parameters on it first to get it ready then transition to the new sketch (cue takes over the master). We added a remove() to get rid of the sketch before adding a new one. Without remove() the page would get bogged down and become unusable.

So we seem to be getting this crazy error when using FFT sketches, apparently remove() is messing with the sound library and removing some things too, argh!!!

We have created a codepen with a basic model of what we are doing, once you click fft output to launch the master, then fft preview, any other preview sketch seems to get the error:

p5.sound.js:5688 Uncaught TypeError: Cannot read property ‘getByteTimeDomainData’ of undefined

Is there something wrong with where we are declaring variables? is our method way off? I will do just about anything to get this working so please let me know or hit me up privately, really frustrated here :frowning: Many thanks in advance!

We are just looking for a more robust way to be able to swap sketches on multiple canvas on one page.