Fix: Implemented STOP button behavior to toggle audio playback

src/_data/build_info.json

@@ -1 +1 @@
-{"version":"3.1.0","revision":"7201485","lastUpdated":"2023-11-02","copyrightYear":2023}
+{"version":"3.1.0","revision":"0643084","lastUpdated":"2024-03-07","copyrightYear":2024}

src/audio-worklet/basic/audio-worklet-node-options/index.njk

@@ -35,7 +35,7 @@ to_root_dir: ../../../
     <input type="number" name="frequency" id="demo-input-frequency"
       class="p-1 rounded w-1/2 font-semibold" min="1" max="20000" value=440>
   </div>
-  <button id="button-start" disabled>START</button>
+  <button id="button-start" class="start-button">START</button>
   {% include "../../../_includes/example-source-code.njk" %}
 </div>
 

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

@@ -3,30 +3,44 @@
 // found in the LICENSE file.
 
 const audioContext = new AudioContext();
+let oscillatorProcessor;
 
 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,
-        }});
+  oscillatorProcessor =
+    new AudioWorkletNode(context, 'oscillator-processor', {
+      processorOptions: {
+        waveformType: options.waveformType,
+        frequency: options.frequency,
+      }
+    });
   oscillatorProcessor.connect(context.destination);
 };
 
-// A simplem onLoad handler. It also handles user gesture to unlock the audio
+const stopAudio = () => {
+  if (oscillatorProcessor) {
+    oscillatorProcessor.disconnect();
+    oscillatorProcessor = null;
+  }
+};
+
+// A simple 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 =
+    if (!oscillatorProcessor) { // If audio is not playing, start audio
+      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...';
+      const frequency = document.querySelector('#demo-input-frequency').value;
+      await startAudio(audioContext, { waveformType, frequency });
+      audioContext.resume();
+      buttonEl.textContent = 'STOP';
+    } else { // If audio is playing, stop audio
+      stopAudio();
+      buttonEl.textContent = 'START';
+    }
   }, false);
 });

src/audio-worklet/basic/hello-audio-worklet/index.njk

@@ -18,7 +18,7 @@ to_root_dir: ../../../
   Chrome Developers Article: Enter Audio Worklet</a> for more information.</p>
 
 <div class="demo-box">
-  <button id="button-start" disabled>START</button>
+  <button id="button-start" class="start-button">START</button>
   {% include "../../../_includes/example-source-code.njk" %}
 </div>
 

src/audio-worklet/basic/hello-audio-worklet/main.js

@@ -3,24 +3,54 @@
 // found in the LICENSE file.
 
 const audioContext = new AudioContext();
+let oscillator; 
+let isPlaying = false; 
 
 const startAudio = async (context) => {
   await context.audioWorklet.addModule('bypass-processor.js');
-  const oscillator = new OscillatorNode(context);
+  oscillator = new OscillatorNode(context);
   const bypasser = new AudioWorkletNode(context, 'bypass-processor');
   oscillator.connect(bypasser).connect(context.destination);
   oscillator.start();
 };
 
+const stopAudio = () => {
+  if (oscillator) {
+    oscillator.stop();
+    oscillator.disconnect();
+  }
+};
+
 // 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);
+      audioContext.resume();
+      isPlaying = true;
+      buttonEl.textContent = 'Playing...'; 
+      buttonEl.classList.remove('start-button');
+    } else { 
+      stopAudio();
+      isPlaying = false;
+      buttonEl.textContent = 'START';
+      buttonEl.classList.add('start-button'); 
+    }
+  });
+
+  buttonEl.addEventListener('mouseenter', () => {
+    if (isPlaying) { 
+      buttonEl.textContent = 'STOP';
+    }
+  });
+
+  buttonEl.addEventListener('mouseleave', () => {
+    if (isPlaying) { 
+      buttonEl.textContent = 'Playing...';
+    }
+  });
 });

src/audio-worklet/basic/noise-generator/index.njk

@@ -19,7 +19,7 @@ to_root_dir: ../../../
   Chrome Developers Article: Enter Audio Worklet</a> for more information.</p>
 
 <div class="demo-box">
-  <button id="button-start" disabled>START</button>
+  <button id="button-start" class="start-button">START</button>
   {% include "../../../_includes/example-source-code.njk" %}
 </div>
 

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

@@ -3,12 +3,14 @@
 // found in the LICENSE file.
 
 const audioContext = new AudioContext();
+let isPlaying = false;
+let noiseGenerator;
 
 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 = new AudioWorkletNode(context, 'noise-generator');
   noiseGenerator.connect(context.destination);
 
   // Connect the oscillator to 'amplitude' AudioParam.
@@ -20,15 +22,28 @@ const startAudio = async (context) => {
   modulator.start();
 };
 
-// A simplem onLoad handler. It also handles user gesture to unlock the audio
+const stopAudio = () => {
+  if (noiseGenerator) {
+    noiseGenerator.disconnect();
+    isPlaying = false;
+  }
+};
+
+// A simple 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) { // If not playing, start audio
+      await startAudio(audioContext);
+      audioContext.resume();
+      isPlaying = true;
+      buttonEl.textContent = 'Playing...';
+    } else { // If playing, stop audio
+      stopAudio();
+      buttonEl.textContent = 'START';
+    }
+  });
 });

src/audio-worklet/basic/one-pole-filter/index.njk

@@ -19,7 +19,7 @@ to_root_dir: ../../../
   Chrome Developers Article: Enter Audio Worklet</a> for more information.</p>
 
 <div class="demo-box">
-  <button id="button-start" disabled>START</button>
+  <button id="button-start" class="start-button">START</button>
   {% include "../../../_includes/example-source-code.njk" %}
 </div>
 

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

@@ -3,10 +3,12 @@
 // found in the LICENSE file.
 
 const audioContext = new AudioContext();
+let oscillator; 
+let isPlaying = false; 
 
 const startAudio = async (context) => {
   await context.audioWorklet.addModule('one-pole-processor.js');
-  const oscillator = new OscillatorNode(context);
+  oscillator = new OscillatorNode(context);
   const filter = new AudioWorkletNode(context, 'one-pole-processor');
   const frequencyParam = filter.parameters.get('frequency');
 
@@ -19,15 +21,45 @@ const startAudio = async (context) => {
       .exponentialRampToValueAtTime(0.01, 8.0);
 };
 
+const stopAudio = () => {
+  if (oscillator) {
+    oscillator.stop();
+    oscillator.disconnect();
+  }
+};
+
+
 // 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);
+      audioContext.resume();
+      isPlaying = true;
+      buttonEl.textContent = 'Playing...'; 
+      buttonEl.classList.remove('start-button');
+    } else { 
+      stopAudio();
+      isPlaying = false;
+      buttonEl.textContent = 'START';
+      buttonEl.classList.add('start-button'); 
+    }
+  });
+
+  buttonEl.addEventListener('mouseenter', () => {
+    if (isPlaying) { 
+      buttonEl.textContent = 'STOP';
+    }
+  });
+
+  buttonEl.addEventListener('mouseleave', () => {
+    if (isPlaying) { 
+      buttonEl.textContent = 'Playing...';
+    }
+  });
 });
+

src/audio-worklet/basic/volume-meter/index.njk

@@ -21,7 +21,7 @@ to_root_dir: ../../../
     <input id="volume-meter" class="w-full bg-white"
       type="range" min="0" max="100" value="0" step="1" disabled>
   </div>
-  <button id="button-start" disabled>START</button>
+  <button id="button-start" class="start-button">START</button>
   {% include "../../../_includes/example-source-code.njk" %}
 </div>
 

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

@@ -3,29 +3,47 @@
 // found in the LICENSE file.
 
 const audioContext = new AudioContext();
+let mediaStream;
+let volumeMeterNode;
 
 const startAudio = async (context, meterElement) => {
   await context.audioWorklet.addModule('volume-meter-processor.js');
-  const mediaStream = await navigator.mediaDevices.getUserMedia({audio: true});
+  mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
   const micNode = context.createMediaStreamSource(mediaStream);
-  const volumeMeterNode = new AudioWorkletNode(context, 'volume-meter');   
-  volumeMeterNode.port.onmessage = ({data}) => {
+  volumeMeterNode = new AudioWorkletNode(context, 'volume-meter');
+  volumeMeterNode.port.onmessage = ({ data }) => {
     meterElement.value = data * 500;
   };
   micNode.connect(volumeMeterNode).connect(context.destination);
 };
 
-// A simplem onLoad handler. It also handles user gesture to unlock the audio
+const stopAudio = () => {
+  if (mediaStream) {
+    mediaStream.getTracks().forEach(track => track.stop());
+    mediaStream = null;
+  }
+  if (volumeMeterNode) {
+    volumeMeterNode.disconnect();
+    volumeMeterNode = null;
+  }
+};
+
+// A simple 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...';
+    if (!mediaStream) { // If audio is not playing, start audio
+      await startAudio(audioContext, meterEl);
+      audioContext.resume();
+      buttonEl.textContent = 'STOP';
+    } else { // If audio is playing, stop audio
+      stopAudio();
+      buttonEl.textContent = 'START';
+    }
   }, false);
 });

src/styles/styles.css

@@ -28,6 +28,11 @@ button[disabled] {
   @apply cursor-not-allowed opacity-50;
 }
 
+/* CSS for stop button */
+#button-start:hover {
+  @apply bg-blue-600 opacity-50;
+}
+
 .inactive {
   @apply fill-blue-400;
 }