title: Web Audio Related React Problems
body: <p>This is my first stack overflow so I'm sorry in advance.</p>
  <p>This is a web audio API question, relating to React Hooks (specifically useContext/useReducer - the dream team).</p>
  <p>BASICALLY... I've been trying to use web audio API to create an oscillator and a slider to control it. So far, so good, and in vanilla JS I managed it by using setInterval() and listening for the changes:</p>
  <pre><code>    setInterval(() =&gt; {
      if (!osc) {
        console.log(&quot;Oscillator is stopped&quot;);
      } else {
        let freqSliderVal = document.getElementById(&quot;freq-slide&quot;).value;
        osc.frequency.value = freqSliderVal;
        osc.type = selectedWaveform;
        console.log(`Oscillator is playing. Frequency value is ${freqSliderVal}`);
      }
    }, 50);
  </code></pre>
  <p>I can change the frequency of the note and the waveform without the note stopping and everything's grand. You can probably see where this one's going. React basically hates this because every time you move the slider, as you can predict, it rerenders the page because the audio context is inside a useEffect. I'm aware that in the dependencies I have it re rendering every time the frequency changes, but that was the only way I could get it to actually register the change in frequency:</p>
  <pre><code>useEffect(() =&gt; {
  let audioContext = new AudioContext();
  let osc = audioContext.createOscillator();
  osc.type = waveform;
  osc.frequency.value = freq;
  
  osc.connect(audioContext.destination);
  osc.start(audioContext.currentTime);
  osc.stop(audioContext.currentTime + 3);
  
  audioContextRef.current = audioContext;
  audioContext.suspend();
  
  return () =&gt; osc.disconnect(audioContext.destination);
  }, [freq, waveform]);
  </code></pre>
  <p>How could I make it so that:</p>
  <p>a) I can move the fader in real time to control the frequency of the output?<br />
  2. I can change the waveform (controlled with a Context and linked to another component), also in real time?</p>
  <p>Any help you can provide would be absolutely wonderful, as I'm beginning to really hate React now after everything started so wonderfully.</p>
  <p>Thanks!</p>
  <p>Sam</p>