Example for cleanup

[luckydonald]

Hey there.
Thanks for all the nice examples.

Could you add an example for an <audio> element, how to unregister all the webaudio nodes, to get back to a normal audio element? Like to be able to register all that stuff again?

[luckydonald]

I prepared something working in this codepen:
https://codepen.io/luckydonald/pen/NEQLwR?editors=1011

[chrisdavidmills]

Hi there @luckydonald, thanks for the contribution!

This example is getting there, but it could use a bit of updating before we include it in the repo. Here's some feedback:

1. I think the OO code you've written is fairly elegant, but it is a bit overcomplex for what you are trying to show, and a little confusing. I'd either simplify it, or include some comments to explain what is going on.
2. Don't use inline event handler attributes, as they are arguably bad practice from a separation of content/behavior standpoint. Use addEventListener() instead
3. It is not very clear what the buttons do. Maybe make the labels a bit more descriptive, and disable them when it doesn't make sense to press them. Pressing them multiple times in a row seems to cause strange behavior. after a while, pressing stop no longer stops the music playing, which is what I'd expect.
4. Maybe hide the audio UI (don't include the controls attribute). Then it is a bit clearer that you ought to use the custom buttons to control the example, rather than just using the default audio UI
5. Analyzer is spelt "analyzer", not "analiser"
6. For the visualiser, maybe include it as a long bar that goes across the top of the UI, and also fix it so that it clears on every paint. This doesn't seem to work, and the box just fills up with a big red blob in Firefox, and doesn't seem to work at all in Chrome/Safari.

Refer also to our code example guidelines: https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines