JZZ test code

alda-lang · Jan 22, 2022 · 18649e2 · 18649e2
1 parent d27c988
commit 18649e2
Showing 1 changed file with 35 additions and 17 deletions.
diff --git a/player/test-page/index.html b/player/test-page/index.html
@@ -5,6 +5,23 @@
   <title>alda-player.js test page</title>
 </head>
 <body>
+  <p>IMPORTANT: For alda.wasm to work on this page:</p>
+  <ol>
+    <li>
+      <code>alda.wasm</code> must be present in the same directory.
+    </li>
+    <li>
+      You must view this page served on localhost, instead of viewing the HTML
+      file directly in your browser.
+    </li>
+  </ol>
+  <p>
+    The easiest way to get this test page working is to run the
+    <code>serve</code> script in this directory. The script will fetch the
+    latest version of <code>alda.wasm</code> and use the npm
+    <a href="https://www.npmjs.com/package/http-server">http-server</a> package
+    to serve the contents of this directory, including this page.
+  </p>
   <script src="wasm_exec.js"></script>
   <script>
   if (!WebAssembly.instantiateStreaming) { // polyfill
@@ -25,22 +42,23 @@
   });
   </script>
   <script src="alda-player.js"></script>
-  <p>IMPORTANT: For alda.wasm to work on this page:</p>
-  <ol>
-    <li>
-      <code>alda.wasm</code> must be present in the same directory.
-    </li>
-    <li>
-      You must view this page served on localhost, instead of viewing the HTML
-      file directly in your browser.
-    </li>
-  </ol>
-  <p>
-    The easiest way to get this test page working is to run the
-    <code>serve</code> script in this directory. The script will fetch the
-    latest version of <code>alda.wasm</code> and use the npm
-    <a href="https://www.npmjs.com/package/http-server">http-server</a> package
-    to serve the contents of this directory, including this page.
-  </p>
+
+  <!--
+    Temporary JZZ test code.
+    TODO: Bundle JZZ with alda-player.js?
+  -->
+  <script src="https://cdn.jsdelivr.net/npm/jzz"></script>
+  <script src="https://cdn.jsdelivr.net/npm/jzz-synth-tiny"></script>
+  <script>
+  function test_jzz() {
+    let tiny = JZZ.synth.Tiny();
+    const randomProgramNumber = Math.floor(Math.random() * 128);
+    tiny.program(0, randomProgramNumber).noteOn(0, 'C5', 127)
+      .wait(500).noteOn(0, 'E5', 127)
+      .wait(500).noteOn(0, 'G5', 127)
+      .wait(500).noteOff(0, 'C5').noteOff(0, 'E5').noteOff(0, 'G5');
+  }
+  </script>
+  <button onclick="test_jzz()">click me to make sound</button>
 </body>
 </html>