Fix examples for Safari and add pre-fader example (#57)

esonderegger · Oct 31, 2024 · 896d984 · 896d984
1 parent 1a9e835
commit 896d984
Show file tree

Hide file tree

Showing 18 changed files with 383 additions and 150 deletions.
diff --git a/README.md b/README.md
@@ -7,6 +7,7 @@ Customizable peak meters, using the web audio API. It can measure peak or true p
 - [Single audio element](https://esonderegger.github.io/web-audio-peak-meter/examples/audio.html)
 - [Single video element](https://esonderegger.github.io/web-audio-peak-meter/examples/video.html)
 - [An oscillator node](https://esonderegger.github.io/web-audio-peak-meter/examples/osc.html)
+- [Pre-fader metering](https://esonderegger.github.io/web-audio-peak-meter/examples/pre-fader-video.html)
 - [Variations using configuration](https://esonderegger.github.io/web-audio-peak-meter/examples/variations.html)
 - [Dynamic creation and cleanup](https://esonderegger.github.io/web-audio-peak-meter/examples/cleanup.html)
 - [Usage without a DOM node](https://esonderegger.github.io/web-audio-peak-meter/examples/nodom.html)

diff --git a/docs/examples/audio.html b/docs/examples/audio.html
@@ -33,24 +33,27 @@ <h2>Javascript code</h2>
 const sourceNode = audioCtx.createMediaElementSource(audioElement);
 sourceNode.connect(audioCtx.destination);
 
+const ctxStatus = document.getElementById(&#039;ctx-status&#039;);
 const buttonElement = document.getElementById(&#039;ctx-button&#039;);
-buttonElement.addEventListener(&#039;click&#039;, () =&gt; {
-  if (audioCtx.state === &#039;suspended&#039;) {
-    audioCtx.resume();
-  } else {
-    audioCtx.suspend();
-  }
-});
 
-const ctxStatus = document.getElementById(&#039;ctx-status&#039;);
-setInterval(() =&gt; {
+function updateAudioCtxStatus() {
   ctxStatus.innerText = audioCtx.state;
   if (audioCtx.state === &#039;suspended&#039;) {
     buttonElement.innerText = &#039;Resume&#039;;
   } else {
     buttonElement.innerText = &#039;Suspend&#039;;
   }
-}, 100);
+}
+
+setInterval(updateAudioCtxStatus, 1000);
+
+buttonElement.addEventListener(&#039;click&#039;, () =&gt; {
+  if (audioCtx.state === &#039;suspended&#039;) {
+    audioCtx.resume().then(updateAudioCtxStatus);
+  } else {
+    audioCtx.suspend().then(updateAudioCtxStatus);
+  }
+});
 
 const test = new webAudioPeakMeter.WebAudioPeakMeter(sourceNode, meterElement);
 </code></pre>
@@ -63,24 +66,27 @@ <h2>Javascript code</h2>
 const sourceNode = audioCtx.createMediaElementSource(audioElement);
 sourceNode.connect(audioCtx.destination);
 
+const ctxStatus = document.getElementById('ctx-status');
 const buttonElement = document.getElementById('ctx-button');
-buttonElement.addEventListener('click', () => {
-  if (audioCtx.state === 'suspended') {
-    audioCtx.resume();
-  } else {
-    audioCtx.suspend();
-  }
-});
 
-const ctxStatus = document.getElementById('ctx-status');
-setInterval(() => {
+function updateAudioCtxStatus() {
   ctxStatus.innerText = audioCtx.state;
   if (audioCtx.state === 'suspended') {
     buttonElement.innerText = 'Resume';
   } else {
     buttonElement.innerText = 'Suspend';
   }
-}, 100);
+}
+
+setInterval(updateAudioCtxStatus, 1000);
+
+buttonElement.addEventListener('click', () => {
+  if (audioCtx.state === 'suspended') {
+    audioCtx.resume().then(updateAudioCtxStatus);
+  } else {
+    audioCtx.suspend().then(updateAudioCtxStatus);
+  }
+});
 
 const test = new webAudioPeakMeter.WebAudioPeakMeter(sourceNode, meterElement);
 

diff --git a/docs/examples/cleanup.html b/docs/examples/cleanup.html
@@ -46,24 +46,27 @@ <h2>Javascript code</h2>
 const sourceNode = audioCtx.createMediaElementSource(audioElement);
 sourceNode.connect(audioCtx.destination);
 
+const ctxStatus = document.getElementById(&#039;ctx-status&#039;);
 const buttonElement = document.getElementById(&#039;ctx-button&#039;);
-buttonElement.addEventListener(&#039;click&#039;, () =&gt; {
-  if (audioCtx.state === &#039;suspended&#039;) {
-    audioCtx.resume();
-  } else {
-    audioCtx.suspend();
-  }
-});
 
-const ctxStatus = document.getElementById(&#039;ctx-status&#039;);
-setInterval(() =&gt; {
+function updateAudioCtxStatus() {
   ctxStatus.innerText = audioCtx.state;
   if (audioCtx.state === &#039;suspended&#039;) {
     buttonElement.innerText = &#039;Resume&#039;;
   } else {
     buttonElement.innerText = &#039;Suspend&#039;;
   }
-}, 100);
+}
+
+setInterval(updateAudioCtxStatus, 1000);
+
+buttonElement.addEventListener(&#039;click&#039;, () =&gt; {
+  if (audioCtx.state === &#039;suspended&#039;) {
+    audioCtx.resume().then(updateAudioCtxStatus);
+  } else {
+    audioCtx.suspend().then(updateAudioCtxStatus);
+  }
+});
 
 let meterInstance = null;
 
@@ -88,24 +91,27 @@ <h2>Javascript code</h2>
 const sourceNode = audioCtx.createMediaElementSource(audioElement);
 sourceNode.connect(audioCtx.destination);
 
+const ctxStatus = document.getElementById('ctx-status');
 const buttonElement = document.getElementById('ctx-button');
-buttonElement.addEventListener('click', () => {
-  if (audioCtx.state === 'suspended') {
-    audioCtx.resume();
-  } else {
-    audioCtx.suspend();
-  }
-});
 
-const ctxStatus = document.getElementById('ctx-status');
-setInterval(() => {
+function updateAudioCtxStatus() {
   ctxStatus.innerText = audioCtx.state;
   if (audioCtx.state === 'suspended') {
     buttonElement.innerText = 'Resume';
   } else {
     buttonElement.innerText = 'Suspend';
   }
-}, 100);
+}
+
+setInterval(updateAudioCtxStatus, 1000);
+
+buttonElement.addEventListener('click', () => {
+  if (audioCtx.state === 'suspended') {
+    audioCtx.resume().then(updateAudioCtxStatus);
+  } else {
+    audioCtx.suspend().then(updateAudioCtxStatus);
+  }
+});
 
 let meterInstance = null;
 

diff --git a/docs/examples/nodom.html b/docs/examples/nodom.html
@@ -63,24 +63,27 @@ <h2>Javascript code</h2>
 const sourceNode = audioCtx.createMediaElementSource(audioElement);
 sourceNode.connect(audioCtx.destination);
 
+const ctxStatus = document.getElementById(&#039;ctx-status&#039;);
 const buttonElement = document.getElementById(&#039;ctx-button&#039;);
-buttonElement.addEventListener(&#039;click&#039;, () =&gt; {
-  if (audioCtx.state === &#039;suspended&#039;) {
-    audioCtx.resume();
-  } else {
-    audioCtx.suspend();
-  }
-});
 
-const ctxStatus = document.getElementById(&#039;ctx-status&#039;);
-setInterval(() =&gt; {
+function updateAudioCtxStatus() {
   ctxStatus.innerText = audioCtx.state;
   if (audioCtx.state === &#039;suspended&#039;) {
     buttonElement.innerText = &#039;Resume&#039;;
   } else {
     buttonElement.innerText = &#039;Suspend&#039;;
   }
-}, 100);
+}
+
+setInterval(updateAudioCtxStatus, 1000);
+
+buttonElement.addEventListener(&#039;click&#039;, () =&gt; {
+  if (audioCtx.state === &#039;suspended&#039;) {
+    audioCtx.resume().then(updateAudioCtxStatus);
+  } else {
+    audioCtx.suspend().then(updateAudioCtxStatus);
+  }
+});
 
 const meterInstance = new webAudioPeakMeter.WebAudioPeakMeter(sourceNode);
 
@@ -112,24 +115,27 @@ <h2>Javascript code</h2>
 const sourceNode = audioCtx.createMediaElementSource(audioElement);
 sourceNode.connect(audioCtx.destination);
 
+const ctxStatus = document.getElementById('ctx-status');
 const buttonElement = document.getElementById('ctx-button');
-buttonElement.addEventListener('click', () => {
-  if (audioCtx.state === 'suspended') {
-    audioCtx.resume();
-  } else {
-    audioCtx.suspend();
-  }
-});
 
-const ctxStatus = document.getElementById('ctx-status');
-setInterval(() => {
+function updateAudioCtxStatus() {
   ctxStatus.innerText = audioCtx.state;
   if (audioCtx.state === 'suspended') {
     buttonElement.innerText = 'Resume';
   } else {
     buttonElement.innerText = 'Suspend';
   }
-}, 100);
+}
+
+setInterval(updateAudioCtxStatus, 1000);
+
+buttonElement.addEventListener('click', () => {
+  if (audioCtx.state === 'suspended') {
+    audioCtx.resume().then(updateAudioCtxStatus);
+  } else {
+    audioCtx.suspend().then(updateAudioCtxStatus);
+  }
+});
 
 const meterInstance = new webAudioPeakMeter.WebAudioPeakMeter(sourceNode);
 

diff --git a/docs/examples/osc.html b/docs/examples/osc.html
@@ -39,21 +39,24 @@ <h2>Javascript code</h2>
 <pre class="code-block"><code>const audioCtx = new AudioContext();
 
 const ctxStatus = document.getElementById(&#039;ctx-status&#039;);
-setInterval(() =&gt; {
+const buttonElement = document.getElementById(&#039;ctx-button&#039;);
+
+function updateAudioCtxStatus() {
   ctxStatus.innerText = audioCtx.state;
   if (audioCtx.state === &#039;suspended&#039;) {
     buttonElement.innerText = &#039;Resume&#039;;
   } else {
     buttonElement.innerText = &#039;Suspend&#039;;
   }
-}, 100);
+}
+
+setInterval(updateAudioCtxStatus, 1000);
 
-const buttonElement = document.getElementById(&#039;ctx-button&#039;);
 buttonElement.addEventListener(&#039;click&#039;, () =&gt; {
   if (audioCtx.state === &#039;suspended&#039;) {
-    audioCtx.resume();
+    audioCtx.resume().then(updateAudioCtxStatus);
   } else {
-    audioCtx.suspend();
+    audioCtx.suspend().then(updateAudioCtxStatus);
   }
 });
 
@@ -90,21 +93,24 @@ <h2>Javascript code</h2>
 const audioCtx = new AudioContext();
 
 const ctxStatus = document.getElementById('ctx-status');
-setInterval(() => {
+const buttonElement = document.getElementById('ctx-button');
+
+function updateAudioCtxStatus() {
   ctxStatus.innerText = audioCtx.state;
   if (audioCtx.state === 'suspended') {
     buttonElement.innerText = 'Resume';
   } else {
     buttonElement.innerText = 'Suspend';
   }
-}, 100);
+}
+
+setInterval(updateAudioCtxStatus, 1000);
 
-const buttonElement = document.getElementById('ctx-button');
 buttonElement.addEventListener('click', () => {
   if (audioCtx.state === 'suspended') {
-    audioCtx.resume();
+    audioCtx.resume().then(updateAudioCtxStatus);
   } else {
-    audioCtx.suspend();
+    audioCtx.suspend().then(updateAudioCtxStatus);
   }
 });