feat(poc): Added amplitude modulation demo

the-monochord · Feb 23, 2019 · 8eda46f · 8eda46f
1 parent f291b62
commit 8eda46f
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 0 deletions.
diff --git a/poc/am/index.html b/poc/am/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>Amplitude modulation (AM)</title>
+</head>
+<body>
+  <nav>
+    <a href="/">demo index</a> » <b>am</b>
+  </nav>
+  <h2>play a sound with adjustable tremolo/ring modulator</h2>
+  <button id="toggle-sound">toggle sound</button><br />
+  Base: [100 <input id="base-frequency" type="range" min="100" max="1000" step="1" value="440" /> 1000] Hz<br />
+  AM: [0 <input id="am-frequency" type="range" min="0" max="1000" step="1" value="40" /> 1000] Hz<br />
+  <pre id="base-frequency-value">Base: 440 Hz</pre>
+  <pre id="am-frequency-value">AM: 40 Hz</pre>
+  <script src="//cdn.jsdelivr.net/npm/ramda@latest/dist/ramda.min.js"></script>
+  <script src="../common/virtual-webaudio.js"></script>
+  <script src="../common/helpers.js"></script>
+  <script src="./script.js"></script>
+  <script src="/reload/reload.js"></script>
+</body>
+</html>
diff --git a/poc/am/script.js b/poc/am/script.js
@@ -0,0 +1,82 @@
+/* global virtualWebaudio, AudioContext  */
+
+const { VirtualAudioContext, render, patch, diff } = virtualWebaudio
+
+let isSoundOn = false
+let baseFrequency = 440
+let amFrequency = 40
+
+const demo = () => {
+  const ctx = new VirtualAudioContext()
+
+  // ------------------
+
+  const osc = ctx.createOscillator()
+  osc.type = 'sine'
+  osc.frequency.value = baseFrequency
+
+  osc.start()
+
+  const gain = ctx.createGain()
+  gain.gain.value = 0
+
+  osc.connect(gain)
+  if (isSoundOn) {
+    gain.connect(ctx.destination)
+  }
+
+  // ------------------
+
+  const am = ctx.createOscillator()
+  am.type = 'sine'
+  am.frequency.value = amFrequency
+  am.start()
+
+  const amHeight = ctx.createGain()
+  amHeight.gain.value = 1
+
+  am.connect(amHeight)
+  amHeight.connect(gain.gain)
+
+  // ------------------
+
+  return ctx
+}
+
+let ctx = null
+let old = null
+
+const change = virtualCtx => {
+  if (!ctx) {
+    ctx = new AudioContext()
+  }
+
+  if (old === null) {
+    render(virtualCtx, ctx)
+  } else {
+    patch(diff(old, virtualCtx), ctx)
+  }
+
+  old = virtualCtx
+}
+
+const toggleIsSoundOn = () => {
+  isSoundOn = !isSoundOn
+  change(demo())
+}
+
+const setBaseFrequency = f => {
+  baseFrequency = f
+  document.getElementById('base-frequency-value').innerText = `Base: ${f} Hz sine`
+  change(demo())
+}
+
+const setAmFrequency = f => {
+  amFrequency = f
+  document.getElementById('am-frequency-value').innerText = `AM: ${f} Hz sine`
+  change(demo())
+}
+
+document.getElementById('toggle-sound').addEventListener('click', toggleIsSoundOn)
+document.getElementById('base-frequency').addEventListener('input', e => setBaseFrequency(e.target.value))
+document.getElementById('am-frequency').addEventListener('input', e => setAmFrequency(e.target.value))
diff --git a/poc/index.html b/poc/index.html
@@ -18,6 +18,7 @@ <h1>virtual-webaudio demos</h1>
     <li><a href="/timed-sequencing">timed sequencing</a></li>
     <li><a href="/polyphony">polyphony</a></li>
     <li><a href="/chord-progression">chord-progression</a></li>
+    <li><a href="/am">am</a></li>
   </ul>
   <script src="/reload/reload.js"></script>
 </body>