909 cymbals

felixroos · Jan 21, 2025 · 56b7764 · 56b7764
1 parent 1e78730
commit 56b7764
Show file tree

Hide file tree

Showing 10 changed files with 232 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -28,25 +28,29 @@
   <body>
     <h2>🌱 garten.salat.dev</h2>
     <ul>
+      <li>
+        047:
+        <a href="webaudio/909cy.html">webaudio 909 cymbals</a>
+      </li>
       <li>
         046:
-        <a href="webaudio/909cp.html">webaudio clap</a>
+        <a href="webaudio/909cp.html">webaudio 909 clap</a>
       </li>
       <li>
         045:
-        <a href="webaudio/909rim.html">webaudio rim shot</a>
+        <a href="webaudio/909rim.html">webaudio 909 rim shot</a>
       </li>
       <li>
         044:
-        <a href="webaudio/909toms.html">webaudio toms</a>
+        <a href="webaudio/909toms.html">webaudio 909 toms</a>
       </li>
       <li>
         043:
-        <a href="webaudio/909sd.html">webaudio snare drum</a>
+        <a href="webaudio/909sd.html">webaudio 909 snare drum</a>
       </li>
       <li>
         042:
-        <a href="webaudio/909bd.html">webaudio bass drum</a>
+        <a href="webaudio/909bd.html">webaudio 909 bass drum</a>
       </li>
       <li>
         041:

diff --git a/webaudio/909bd.html b/webaudio/909bd.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>🌱 web audio bass drum</title>
+    <title>🌱 web audio 909 bass drum</title>
     <style>
       body {
         background-color: #222;
@@ -40,7 +40,7 @@
     </style>
   </head>
   <body>
-    <h2>🌱 webaudio bass drum</h2>
+    <h2>🌱 webaudio 909 bass drum</h2>
     <script>
       // render codeblock from script tag
       let codeblock = (scriptElement, indent = 0) => {

diff --git a/webaudio/909cp.html b/webaudio/909cp.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>🌱 web audio clap</title>
+    <title>🌱 web audio 909 clap</title>
     <style>
       body {
         background-color: #222;
@@ -40,7 +40,7 @@
     </style>
   </head>
   <body>
-    <h2>🌱 webaudio clap</h2>
+    <h2>🌱 webaudio 909 clap</h2>
     <script>
       // render codeblock from script tag
       let codeblock = (scriptElement, indent = 0) => {

diff --git a/webaudio/909cy.html b/webaudio/909cy.html
@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>🌱 web 909 cymbals</title>
+    <style>
+      body {
+        background-color: #222;
+        max-width: 512px;
+        margin: auto;
+        font-family: serif;
+        font-size: 1.2em;
+        color: #edd;
+        text-align: left;
+        padding: 20px 8px;
+      }
+      @font-face {
+        font-family: "FontWithASyntaxHighlighter";
+        src: url("/fonts/FontWithASyntaxHighlighter-Regular.woff2")
+          format("woff2");
+      }
+      pre {
+        font-size: 12px;
+        font-family: "FontWithASyntaxHighlighter", monospace;
+        padding: 8px;
+        border: 0;
+        outline: none;
+        overflow: auto;
+        background-color: #44444490;
+        width: 100%;
+        margin: 0px 0;
+        color: white;
+        box-sizing: border-box;
+      }
+      a {
+        color: cyan;
+        font-size: 1em;
+      }
+    </style>
+  </head>
+  <body>
+    <h2>🌱 webaudio 909 cymbals</h2>
+    <script>
+      // render codeblock from script tag
+      let codeblock = (scriptElement, indent = 0) => {
+        const script = document.currentScript;
+        setTimeout(() => {
+          const pre = document.createElement("pre");
+          pre.textContent = getCode(scriptElement, indent);
+          script.after(pre);
+        }, 1);
+      };
+      function getCode(scriptElement, indent = 0) {
+        return scriptElement.innerText
+          .split("\n")
+          .map((line) => line.slice(indent))
+          .filter((x) => x && !x.startsWith("codeblock("))
+          .join("\n");
+      }
+    </script>
+    <p>
+      This is the 6th post about 909 style drum synthesis, based on
+      <a
+        href="https://extralifeinstruments.com/er-99/"
+        target="_blank"
+        style="color: yellow"
+        >ER-909</a
+      >. The last 4 sounds left are the cymbals: open hihat, closed hihat ride
+      cymbals, and crash cymbal. These are the only sounds that are sample
+      based, so they are relativey straightforward:
+    </p>
+
+    <script>
+      class Sample909 {
+        constructor(ac, config) {
+          const { sourceUrl, decay = 1000, volume = 0.5, pitch = 1.0 } = config;
+          this.ac = ac;
+          this.output = this.ac.createGain();
+          this.output.gain.value = 0.5;
+          this.sourceUrl = sourceUrl;
+          this.decay = decay;
+          this.volume = volume;
+          this.pitch = pitch;
+
+          this.ready = fetch(this.sourceUrl)
+            .then((res) => res.arrayBuffer())
+            .then((res) => ac.decodeAudioData(res))
+            .then((buffer) => (this.buffer = buffer));
+        }
+        get out() {
+          return this.output;
+        }
+        trigger(t = this.ac.currentTime, accent = false) {
+          if (this.sourceNode) this.sourceNode.stop();
+          const gain = this.output.gain;
+          gain.cancelScheduledValues(1.0);
+          gain.setValueAtTime(this.volume * (accent ? 2.0 : 1.0), t);
+          gain.exponentialRampToValueAtTime(0.00001, t + this.decay / 1000.0);
+
+          this.sourceNode = this.ac.createBufferSource();
+          this.sourceNode.playbackRate.value = this.pitch;
+          this.sourceNode.buffer = this.buffer;
+          this.sourceNode.connect(this.output);
+          this.sourceNode.start(t);
+        }
+      }
+      codeblock(document.currentScript, 6);
+    </script>
+    <div id="ui"></div>
+    <script>
+      const ac = new AudioContext();
+      document.addEventListener("click", () => ac.resume());
+      document.addEventListener("keydown", () => ac.resume());
+
+      let sounds = {
+        hh: {
+          sourceUrl: "samples/hh.wav",
+          decay: 300,
+          volume: 0.5,
+          key: 8,
+          controls: [
+            { key: "volume", min: 0, max: 1, step: 0.01 },
+            { key: "pitch", min: 0.2, max: 1.6, step: 0.01 },
+            { key: "decay", min: 20, max: 999, step: 1 },
+          ],
+        },
+        oh: {
+          sourceUrl: "samples/hh.wav",
+          decay: 2000,
+          volume: 0.5,
+          key: 9,
+          controls: [
+            { key: "volume", min: 0, max: 1, step: 0.01 },
+            { key: "pitch", min: 0.2, max: 1.6, step: 0.01 },
+            { key: "decay", min: 100, max: 3000, step: 1 },
+          ],
+        },
+        rd: {
+          sourceUrl: "samples/ride.wav",
+          decay: 2000,
+          volume: 0.2,
+          key: 0,
+          controls: [
+            { key: "volume", min: 0, max: 1, step: 0.01 },
+            { key: "pitch", min: 0.2, max: 1.6, step: 0.01 },
+            { key: "decay", min: 100, max: 3000, step: 1 },
+          ],
+        },
+        cr: {
+          sourceUrl: "samples/crash.wav",
+          decay: 2000,
+          volume: 0.3,
+          key: "p",
+          controls: [
+            { key: "volume", min: 0, max: 1, step: 0.01 },
+            { key: "pitch", min: 0.2, max: 1.6, step: 0.01 },
+            { key: "decay", min: 100, max: 3000, step: 1 },
+          ],
+        },
+      };
+
+      const ui = document.getElementById("ui");
+      Object.keys(sounds).forEach((id) => {
+        const config = sounds[id];
+        const sound = new Sample909(ac, config);
+        sound.out.connect(ac.destination);
+        document.addEventListener("keydown", (e) => {
+          e.key === config.key + "" && sound?.trigger();
+        });
+        // ui
+        const button = document.createElement("button");
+        button.style = "font-size:1.25em;margin-top:16px;margin-bottom:8px;";
+        button.innerText = `${id} (${config.key})`;
+        button.addEventListener("click", () => sound.trigger());
+        ui.appendChild(button);
+
+        config.controls.forEach(({ key, label, min, max, step }) => {
+          const inputId = `${id}-${key}`;
+          ui.insertAdjacentHTML(
+            "beforeend",
+            `<label style="display: flex; align-items: center; gap: 8px">
+      <input id="${inputId}" type="range" min="${min}" max="${max}" step="${step}" />
+      ${key}</label
+    >`
+          );
+          const slider = document.getElementById(inputId);
+          slider.oninput = (e) => (sound[key] = e.target.value);
+          slider.value = sound[key];
+        });
+      });
+    </script>
+    <p>
+      license:
+      <a
+        href="https://github.com/matthewcieplak/er-99/blob/main/LICENSE"
+        target="_blank"
+        >GPL-3.0</a
+      >
+    </p>
+    <!---->
+    <details>
+      <summary id="loc">show page source</summary>
+      <pre id="pre"></pre>
+    </details>
+    <br />
+    <a href="/">back to garten.salat</a>
+    <script type="module">
+      // render source code
+      const html = document.querySelector("html").outerHTML;
+      const loc = html.split("\n").length;
+      document.querySelector("#pre").textContent = html;
+      document.querySelector("#loc").textContent = `show source (${loc} loc)`;
+    </script>
+  </body>
+</html>
diff --git a/webaudio/909rim.html b/webaudio/909rim.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>🌱 web audio rim shot</title>
+    <title>🌱 web audio 909 rim shot</title>
     <style>
       body {
         background-color: #222;

diff --git a/webaudio/909sd.html b/webaudio/909sd.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>🌱 web audio snare drum</title>
+    <title>🌱 web audio 909 snare drum</title>
     <style>
       body {
         background-color: #222;

diff --git a/webaudio/909toms.html b/webaudio/909toms.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>🌱 web audio toms</title>
+    <title>🌱 web audio 909 toms</title>
     <style>
       body {
         background-color: #222;

diff --git a/webaudio/samples/crash.wav b/webaudio/samples/crash.wav
diff --git a/webaudio/samples/hh.wav b/webaudio/samples/hh.wav
diff --git a/webaudio/samples/ride.wav b/webaudio/samples/ride.wav