Fixes #362 - Implemented PR352: One-Pole Filter Audio Worklet, Updated Noise-Generator, Volume-Meter, and Audio-Worklet-Node-Options

src/_data/build_info.json

@@ -1,2 +1 @@
-{"version":"3.2.0","revision":"0c4b2ce","lastUpdated":"2024-07-22","copyrightYear":2024}
-
+{"version":"3.2.0","revision":"6ec3076","lastUpdated":"2024-08-03","copyrightYear":2024}

src/audio-worklet/basic/noise-generator/main.js

@@ -3,21 +3,38 @@
 // found in the LICENSE file.
 
 const audioContext = new AudioContext();
+let isModuleLoaded = false;
+let isPlaying = false;
+let isGraphReady = false;
+let modulatorNode = null;
+let modGainNode = null;
+let noiseGeneratorNode = null;
 
-const startAudio = async (context) => {
-  await context.audioWorklet.addModule('noise-generator.js');
-  const modulator = new OscillatorNode(context);
-  const modGain = new GainNode(context);
-  const noiseGenerator = new AudioWorkletNode(context, 'noise-generator');
-  noiseGenerator.connect(context.destination);
+const loadGraph = (context) => {
+  modulatorNode = new OscillatorNode(context);
+  modGainNode = new GainNode(context);
+  noiseGeneratorNode = new AudioWorkletNode(context, 'noise-generator');
+  noiseGeneratorNode.connect(context.destination);
 
   // Connect the oscillator to 'amplitude' AudioParam.
-  const paramAmp = noiseGenerator.parameters.get('amplitude');
-  modulator.connect(modGain).connect(paramAmp);
+  const paramAmp = noiseGeneratorNode.parameters.get('amplitude');
+  modulatorNode.connect(modGainNode).connect(paramAmp);
+
+  modulatorNode.frequency.value = 0.5;
+  modGainNode.gain.value = 0.75;
+  modulatorNode.start();
+};
 
-  modulator.frequency.value = 0.5;
-  modGain.gain.value = 0.75;
-  modulator.start();
+
+const startAudio = async (context) => {
+  if (!isModuleLoaded) {
+    await context.audioWorklet.addModule('noise-generator.js');
+    isModuleLoaded = true;
+  }
+  if (!isGraphReady) {
+    loadGraph(audioContext);
+    isGraphReady = true;
+  }
 };
 
 // A simplem onLoad handler. It also handles user gesture to unlock the audio
@@ -26,9 +43,17 @@ window.addEventListener('load', async () => {
   const buttonEl = document.getElementById('button-start');
   buttonEl.disabled = false;
   buttonEl.addEventListener('click', async () => {
-    await startAudio(audioContext);
-    audioContext.resume();
-    buttonEl.disabled = true;
-    buttonEl.textContent = 'Playing...';
-  }, false);
+    if (!isPlaying) {
+      await startAudio(audioContext);
+      isPlaying = true;
+      buttonEl.textContent = 'Playing...';
+      buttonEl.classList.remove('start-button');
+      audioContext.resume();
+    } else {
+      audioContext.suspend();
+      isPlaying = false;
+      buttonEl.textContent = 'START';
+      buttonEl.classList.add('start-button');
+    }
+  });
 });

src/audio-worklet/basic/one-pole-filter/main.js

@@ -3,31 +3,55 @@
 // found in the LICENSE file.
 
 const audioContext = new AudioContext();
+let isModuleLoaded = false;
+let isPlaying = false;
+let isGraphReady = false;
+let oscillatorNode = null;
+let filterNode = null;
 
-const startAudio = async (context) => {
-  await context.audioWorklet.addModule('one-pole-processor.js');
-  const oscillator = new OscillatorNode(context);
-  const filter = new AudioWorkletNode(context, 'one-pole-processor');
-  const frequencyParam = filter.parameters.get('frequency');
+const loadGraph = (context) => {
+  oscillatorNode = new OscillatorNode(context);
+  filterNode = new AudioWorkletNode(context, 'one-pole-processor');
+  const frequencyParam = filterNode.parameters.get('frequency');
 
-  oscillator.connect(filter).connect(context.destination);
-  oscillator.start();
+  oscillatorNode.connect(filterNode).connect(context.destination);
+  oscillatorNode.start();
 
   frequencyParam
-      .setValueAtTime(0.01, 0)
-      .exponentialRampToValueAtTime(context.sampleRate * 0.5, 4.0)
-      .exponentialRampToValueAtTime(0.01, 8.0);
+    .setValueAtTime(0.01, 0)
+    .exponentialRampToValueAtTime(context.sampleRate * 0.5, 4.0)
+    .exponentialRampToValueAtTime(0.01, 8.0);
+}
+
+const startAudio = async (context) => {
+  if(!isModuleLoaded) {
+    await context.audioWorklet.addModule('one-pole-processor.js');
+    isModuleLoaded = true;
+  }
+  if(!isGraphReady) {
+    loadGraph(audioContext);
+    isGraphReady = true;
+  }
 };
 
 // A simplem onLoad handler. It also handles user gesture to unlock the audio
 // playback.
 window.addEventListener('load', async () => {
   const buttonEl = document.getElementById('button-start');
   buttonEl.disabled = false;
+
   buttonEl.addEventListener('click', async () => {
-    await startAudio(audioContext);
-    audioContext.resume();
-    buttonEl.disabled = true;
-    buttonEl.textContent = 'Playing...';
-  }, false);
+    if (!isPlaying) {
+      await startAudio(audioContext);
+      isPlaying = true;
+      buttonEl.textContent = 'Playing...';
+      buttonEl.classList.remove('start-button');
+      audioContext.resume();
+    } else {
+      audioContext.suspend();
+      isPlaying = false;
+      buttonEl.textContent = 'START';
+      buttonEl.classList.add('start-button');
+    }
+  });
 });