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":"e45e5d0","lastUpdated":"2024-08-07","copyrightYear":2024}

src/audio-worklet/basic/audio-worklet-node-options/main.js

@@ -3,30 +3,57 @@
 // found in the LICENSE file.
 
 const audioContext = new AudioContext();
+let isModuleLoaded = false;
+let isPlaying = false;
+let isGraphReady = false;
+let oscillatorProcessor = null;
 
-const startAudio = async (context, options) => {
-  await context.audioWorklet.addModule('oscillator-processor.js');
-  const oscillatorProcessor =
-      new AudioWorkletNode(context, 'oscillator-processor', {
-        processorOptions: {
-          waveformType: options.waveformType,
-          frequency: options.frequency,
-        }});
+const loadGraph = (context, options) => {
+  oscillatorProcessor = new AudioWorkletNode(context, 'oscillator-processor', {
+    processorOptions: {
+      waveformType: options.waveformType,
+      frequency: options.frequency,
+    }
+  });
   oscillatorProcessor.connect(context.destination);
 };
 
+const startAudio = async (context, options) => {
+  if (!isModuleLoaded) {
+    await context.audioWorklet.addModule('oscillator-processor.js');
+    isModuleLoaded = true;
+  }
+  if (!isGraphReady) {
+    loadGraph(context, options);
+    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 () => {
-    const waveformType =
-        document.querySelector('#demo-select-waveform-type').value;
-    const frequency = document.querySelector('#demo-input-frequency').value;
-    await startAudio(audioContext, {waveformType, frequency});
-    audioContext.resume();
-    buttonEl.disabled = true;
-    buttonEl.textContent = 'Playing...';
-  }, false);
+    if (!isPlaying) {
+      const waveformType =
+          document.querySelector('#demo-select-waveform-type').value;
+      const frequency = document.querySelector('#demo-input-frequency').value;
+      isPlaying = true;
+      await startAudio(audioContext, {waveformType, frequency});
+      buttonEl.textContent = 'Playing...';
+      buttonEl.classList.remove('start-button');
+      audioContext.resume();
+      document.querySelector('#demo-select-waveform-type').disabled = true;
+      document.querySelector('#demo-input-frequency').disabled = true;
+    } else {
+      audioContext.suspend();
+      isPlaying = false;
+      buttonEl.textContent = 'START';
+      buttonEl.classList.add('start-button');
+      document.querySelector('#demo-select-waveform-type').disabled = false;
+      document.querySelector('#demo-input-frequency').disabled = false;
+    }
+  });
 });

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);
+}
+
+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');
+    }
+  });
 });

src/audio-worklet/basic/volume-meter/main.js

@@ -3,29 +3,68 @@
 // found in the LICENSE file.
 
 const audioContext = new AudioContext();
+let isModuleLoaded = false;
+let isPlaying = false;
+let isGraphReady = false;
+let micNode = null;
+let volumeMeterNode = null;
+let mediaStream = null;
 
-const startAudio = async (context, meterElement) => {
-  await context.audioWorklet.addModule('volume-meter-processor.js');
-  const mediaStream = await navigator.mediaDevices.getUserMedia({audio: true});
-  const micNode = context.createMediaStreamSource(mediaStream);
-  const volumeMeterNode = new AudioWorkletNode(context, 'volume-meter');   
+const loadGraph = async (context, meterElement) => {
+  mediaStream = await navigator.mediaDevices.getUserMedia({audio: true});
+  micNode = context.createMediaStreamSource(mediaStream);
+  volumeMeterNode = new AudioWorkletNode(context, 'volume-meter');
   volumeMeterNode.port.onmessage = ({data}) => {
     meterElement.value = data * 500;
   };
   micNode.connect(volumeMeterNode).connect(context.destination);
 };
 
+const startAudio = async (context, meterElement) => {
+  if (!isModuleLoaded) {
+    await context.audioWorklet.addModule('volume-meter-processor.js');
+    isModuleLoaded = true;
+  }
+  await loadGraph(context, meterElement);
+  isGraphReady = true;
+};
+
+// Stop the audio playback and release the resources.
+const stopAudio = () => {
+  if (mediaStream) {
+    mediaStream.getTracks().forEach(track => track.stop());
+  }
+  if (micNode) {
+    micNode.disconnect();
+  }
+  if (volumeMeterNode) {
+    volumeMeterNode.disconnect();
+  }
+  isGraphReady = false;
+};
+
 // A simplem onLoad handler. It also handles user gesture to unlock the audio
 // playback.
 window.addEventListener('load', async () => {
   const buttonEl = document.getElementById('button-start');
   const meterEl = document.getElementById('volume-meter');
   buttonEl.disabled = false;
   meterEl.disabled = false;
+
   buttonEl.addEventListener('click', async () => {
-    await startAudio(audioContext, meterEl);
-    audioContext.resume();
-    buttonEl.disabled = true;
-    buttonEl.textContent = 'Playing...';
-  }, false);
+    if (!isPlaying) {
+      await startAudio(audioContext, meterEl);
+      isPlaying = true;
+      buttonEl.textContent = 'Stop';
+      buttonEl.classList.remove('start-button');
+      audioContext.resume();
+    } else {
+      audioContext.suspend();
+      stopAudio();
+      isPlaying = false;
+      buttonEl.textContent = 'Start';
+      buttonEl.classList.add('start-button');
+      meterEl.value = 0;
+    }
+  });
 });