add a new example

spessasus · Oct 31, 2024 · 236d87d · 236d87d
1 parent 098bc78
commit 236d87d
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 15 deletions.
diff --git a/examples/piano.html b/examples/piano.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang='en'>
+<head>
+    <meta charset='UTF-8'>
+    <meta content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'
+          name='viewport'>
+    <meta content='ie=edge' http-equiv='X-UA-Compatible'>
+    <link href='../src/website/favicon.ico' rel='icon'>
+    <link href='examples.css' rel='stylesheet'>
+    <title>SpessaSynth piano example</title>
+</head>
+<body>
+<h1>spessasynth_lib example: piano</h1>
+<a href='https://spessasus.github.io/SpessaSynth'>Main page</a>
+<a href='https://github.com/spessasus/SpessaSynth/wiki/'>Documentation</a>
+
+<div class='example_content'>
+    <label for='soundfont_input'>Upload the soundfont.</label>
+    <input accept='.sf2, .sf3, .dls' id='soundfont_input' type='file'>
+    <table>
+        <tr id='piano'>
+        </tr>
+    </table>
+    <!-- note the type="module" -->
+    <script src='piano.js' type='module'></script>
+</div>
+</body>
+</html>
diff --git a/examples/piano.js b/examples/piano.js
@@ -0,0 +1,47 @@
+// import the modules
+import { Synthetizer } from "../src/spessasynth_lib/synthetizer/synthetizer.js";
+import { WORKLET_URL_ABSOLUTE } from "../src/spessasynth_lib/synthetizer/worklet_url.js";
+
+document.getElementById("soundfont_input").onchange = async e =>
+{
+    // check if there's a file uploaded
+    if (!e.target.files[0])
+    {
+        return;
+    }
+    const file = e.target.files[0];
+    const soundFontBuffer = await file.arrayBuffer(); // convert to array buffer,
+    // create the context and add audio worklet
+    const context = new AudioContext();
+    await context.audioWorklet.addModule(new URL("../src/spessasynth_lib/" + WORKLET_URL_ABSOLUTE, import.meta.url));
+    const synth = new Synthetizer(context.destination, soundFontBuffer);     // create the synthesizer
+
+    // create a 36-key piano
+    const piano = document.getElementById("piano");
+    for (let i = 0; i < 36; i++)
+    {
+        /**
+         * @type {HTMLElement}
+         */
+        const key = document.createElement("td");
+        key.style.background = "white";
+        key.style.height = "10em";
+        key.style.width = "2em";
+        key.style.margin = "0.2em";
+        piano.appendChild(key);
+        // add mouse events
+        key.onpointerdown = () =>
+        {
+            // key press: play a note
+            synth.noteOn(0, 46 + i, 127);
+            key.style.background = "red";
+        };
+        key.onpointerup = () =>
+        {
+            // key release: stop a note
+            synth.noteOff(0, 46 + i);
+            key.style.background = "white";
+        };
+        key.onpointerleave = key.onpointerup;
+    }
+};
diff --git a/examples/simple_demo.html b/examples/simple_demo.html
@@ -2,23 +2,23 @@
 <html lang='en'>
 <head>
     <meta charset='UTF-8'>
-    <meta name='viewport'
-          content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'>
-    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
-    <link rel='icon' href='../src/website/favicon.ico'>
-    <link rel='stylesheet' href='examples.css'>
-    <title>spessasynth_lib simple example</title>
+    <meta content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'
+          name='viewport'>
+    <meta content='ie=edge' http-equiv='X-UA-Compatible'>
+    <link href='../src/website/favicon.ico' rel='icon'>
+    <link href='examples.css' rel='stylesheet'>
+    <title>SpessaSynth simple example</title>
 </head>
 <body>
-    <h1>spessasynth_lib example: simple demo</h1>
-    <a href='https://spessasus.github.io/SpessaSynth'>Main page</a>
-    <a href='https://github.com/spessasus/SpessaSynth/wiki/'>Documentation</a>
+<h1>spessasynth_lib example: simple demo</h1>
+<a href='https://spessasus.github.io/SpessaSynth'>Main page</a>
+<a href='https://github.com/spessasus/SpessaSynth/wiki/'>Documentation</a>
 
-    <div class='example_content'>
-        <p id="message">Please wait for the soundFont to load.</p>
-        <input type="file" id="midi_input" accept=".mid, .rmi">
-        <!-- note the type="module" -->
-        <script src='simple_demo.js' type="module"></script>
-    </div>
+<div class='example_content'>
+    <p id='message'>Please wait for the soundFont to load.</p>
+    <input accept='.mid, .rmi' id='midi_input' type='file'>
+    <!-- note the type="module" -->
+    <script src='simple_demo.js' type='module'></script>
+</div>
 </body>
 </html>