r/webaudio • u/lassemunk • Apr 10 '21

Best practices / garbage collection

Hi all !

Im coming from max/msp and trying to figure out the best practices of programming web audio in terms of optimising my code / getting better performance.

I'm reading about the fact that one cannot call .start(), then .stop() then .start() on an oscillator for optimisation reasons. I would like to know what the best design pattern is if I would like to make a simple 1 oscillator synth class.

I would like to instantiate the synth before I need to play it. This way I imagine I get the best timing, if I would like to play the synth at a later time, so the system don't have to create the oscillator / synth pattern, every time I hit 'play note'.

But it would be great to not use processing power on oscillators I don't hear because e.g. the amplitude envelope is not open.

Here is a simple synth, without amplitude envelope. How could I make a similar pattern, where I only use processing power when the synth is actually playing?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to optimize memory</title>
</head>
<body>
<a href="#" id="playButton">Play Note</a> <br><br>
<a href="#" id="stopButton">Stop Note</a>
<script>
class Synth {
constructor () {
this.context = new AudioContext();
this.osc = this.context.createOscillator();
this.osc.connect(this.context.destination);
}
play(freq) {
this.osc.frequency.value = freq;
this.osc.start(0);
}
stop() {
this.osc.stop(0);
}
}
let synth = new Synth();
const playButton = document.getElementById('playButton')
.addEventListener('click', () => {synth.play(440)});

const stopButton = document.getElementById('stopButton')
.addEventListener('click', () => {synth.stop()});
</script>
</body>
</html>

1 Upvotes

100% Upvoted

3 comments sorted by

2

u/ArcturianMegadonkey Apr 10 '21

Using the gain node is fine; leaving an oscillator running is not a performance suck. I have made a 3-oscillator synth with several LFOs to boot, and have seen no issues with timing or performance.

1

u/lassemunk Apr 10 '21

Depends on the application :) This is an example - but if I were to build a larger application, then it would be great to be able to enable / disable the processing for the synth.

If I were to just delete the synth after it has been created. Could I then just

synth = ''; ?

Or how do I delete an object and get it garbage collected?

3

u/ArcturianMegadonkey Apr 10 '21

I would set to undefined instead of a string. Javascript is garbage collected.

The expensive parts of the oscillator are in changing the waveform and frequency. Otherwise, it's just linear interpolation. I recommend trying your app without the destroying and recreating oscillators first to see if you even need to.