@grame/faust-web-component 0.4.5 → 0.5.0

package/README.md

@@ -82,7 +82,7 @@ The HTML [index.html](./index.html) example page can be copied and tested in `di
 
 ## NPM package 
 
- A [npm package](https://www.npmjs.com/package/@grame/faust-web-component) can be used with the CDN link: https://cdn.jsdelivr.net/npm/@grame/faust-web-component@0.4.5/dist/faust-web-component.js (possibly update the version number).
+ A [npm package](https://www.npmjs.com/package/@grame/faust-web-component) can be used with the CDN link: https://cdn.jsdelivr.net/npm/@grame/faust-web-component@0.5.0/dist/faust-web-component.js (possibly update the version number).
  
  Here is an HTML example using this model:
  
@@ -101,7 +101,7 @@ process = vgroup("Oscillator", os.osc(freq1) * vol, os.osc(freq2) * vol);
 -->
 </faust-editor>
 
-<script src="https://cdn.jsdelivr.net/npm/@grame/faust-web-component@0.4.5/dist/faust-web-component.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@grame/faust-web-component@0.5.0/dist/faust-web-component.js"></script>
 ```
 
 ## Demo

package/dist/faust-web-component.js

@@ -41,7 +41,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     if ("object" != typeof t2 || !t2) return t2;
     var e = t2[Symbol.toPrimitive];
     if (void 0 !== e) {
-      var i2 = e.call(t2, r2 || "default");
+      var i2 = e.call(t2, r2);
       if ("object" != typeof i2) return i2;
       throw new TypeError("@@toPrimitive must return a primitive value.");
     }
@@ -128,7 +128,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
   }, A = {
     GROUP: "duotone-group",
-    SWAP_OPACITY: "swap-opacity",
     PRIMARY: "primary",
     SECONDARY: "secondary"
   }, P = ["fa-classic", "fa-duotone", "fa-sharp", "fa-sharp-duotone"];
@@ -262,17 +261,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   var Ct = {
     kit: {
       "fa-kit": "fak"
-    },
-    "kit-duotone": {
-      "fa-kit-duotone": "fakd"
     }
   };
   var Lt = ["fak", "fakd"], Wt = {
     kit: {
       fak: "fa-kit"
-    },
-    "kit-duotone": {
-      fakd: "fa-kit-duotone"
     }
   };
   var Et = {
@@ -1557,7 +1550,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
     return new Promise((resolve, reject) => {
       if (givenPrefix === "fa") {
-        const shim = byOldName(iconName);
+        const shim = byOldName(iconName) || {};
         iconName = shim.iconName || iconName;
         prefix = shim.prefix || prefix;
       }
@@ -9429,6 +9422,14 @@ export default ${(_b = jsCode.match(jsCodeHead)) == null ? void 0 : _b[1]};
             this.pitchWheel(msg.data[0], msg.data[1]);
             break;
           }
+          case "keyOn": {
+            this.keyOn(msg.data[0], msg.data[1], msg.data[2]);
+            break;
+          }
+          case "keyOff": {
+            this.keyOff(msg.data[0], msg.data[1], msg.data[2]);
+            break;
+          }
           case "param": {
             this.setParamValue(msg.data.path, msg.data.value);
             break;
@@ -9473,6 +9474,12 @@ export default ${(_b = jsCode.match(jsCodeHead)) == null ? void 0 : _b[1]};
       pitchWheel(channel, wheel) {
         this.fDSPCode.pitchWheel(channel, wheel);
       }
+      keyOn(channel, pitch, velocity) {
+        this.fDSPCode.keyOn(channel, pitch, velocity);
+      }
+      keyOff(channel, pitch, velocity) {
+        this.fDSPCode.keyOff(channel, pitch, velocity);
+      }
       propagateAcc(accelerationIncludingGravity, invert = false) {
         this.fDSPCode.propagateAcc(accelerationIncludingGravity, invert);
       }
@@ -11313,6 +11320,9 @@ export default ${(_b = jsCode.match(jsCodeHead)) == null ? void 0 : _b[1]};
       this.fSoundfileBuffers = {};
       this.fPitchwheelLabel = [];
       this.fCtrlLabel = new Array(128).fill(null).map(() => []);
+      this.fMidiKeyLabel = new Array(128).fill(null).map(() => []);
+      this.fMidiKeyOnLabel = new Array(128).fill(null).map(() => []);
+      this.fMidiKeyOffLabel = new Array(128).fill(null).map(() => []);
       this.fPathTable = {};
       this.fUICallback = (item) => {
         if (item.type === "hbargraph" || item.type === "vbargraph") {
@@ -11325,6 +11335,7 @@ export default ${(_b = jsCode.match(jsCodeHead)) == null ? void 0 : _b[1]};
           if (!item.meta)
             return;
           item.meta.forEach((meta2) => {
+            var _a2, _b, _c, _d, _e, _f;
             const { midi, acc, gyr } = meta2;
             if (midi) {
               const strMidi = midi.trim();
@@ -11338,10 +11349,25 @@ export default ${(_b = jsCode.match(jsCodeHead)) == null ? void 0 : _b[1]};
               } else {
                 const matched2 = strMidi.match(/^ctrl\s(\d+)\s(\d+)/);
                 const matched1 = strMidi.match(/^ctrl\s(\d+)/);
+                const matchedKey = strMidi.match(/^key\s+(\d+)(?:\s+(\d+))?$/);
+                const matchedKeyOn = strMidi.match(/^keyon\s+(\d+)(?:\s+(\d+))?$/);
+                const matchedKeyOff = strMidi.match(/^keyoff\s+(\d+)(?:\s+(\d+))?$/);
                 if (matched2) {
                   this.fCtrlLabel[parseInt(matched2[1])].push({ path: item.address, chan: parseInt(matched2[2]), min: item.min, max: item.max });
                 } else if (matched1) {
                   this.fCtrlLabel[parseInt(matched1[1])].push({ path: item.address, chan: 0, min: item.min, max: item.max });
+                } else if (matchedKey) {
+                  const note = parseInt(matchedKey[1]);
+                  const channel = matchedKey[2] ? parseInt(matchedKey[2]) : 0;
+                  this.fMidiKeyLabel[note].push({ path: item.address, chan: channel, min: (_a2 = item.min) != null ? _a2 : 0, max: (_b = item.max) != null ? _b : 1 });
+                } else if (matchedKeyOn) {
+                  const note = parseInt(matchedKeyOn[1]);
+                  const channel = matchedKeyOn[2] ? parseInt(matchedKeyOn[2]) : 0;
+                  this.fMidiKeyOnLabel[note].push({ path: item.address, chan: channel, min: (_c = item.min) != null ? _c : 0, max: (_d = item.max) != null ? _d : 1 });
+                } else if (matchedKeyOff) {
+                  const note = parseInt(matchedKeyOff[1]);
+                  const channel = matchedKeyOff[2] ? parseInt(matchedKeyOff[2]) : 0;
+                  this.fMidiKeyOffLabel[note].push({ path: item.address, chan: channel, min: (_e = item.min) != null ? _e : 0, max: (_f = item.max) != null ? _f : 1 });
                 }
               }
             }
@@ -11601,6 +11627,15 @@ export default ${(_b = jsCode.match(jsCodeHead)) == null ? void 0 : _b[1]};
         return this.ctrlChange(channel, data1, data2);
       if (cmd2 === 14)
         return this.pitchWheel(channel, data2 * 128 + data1);
+      if (cmd2 === 9) {
+        if (data2 > 0)
+          return this.keyOn(channel, data1, data2);
+        else
+          return this.keyOff(channel, data1, data2);
+      }
+      if (cmd2 === 8) {
+        return this.keyOff(channel, data1, data2);
+      }
     }
     ctrlChange(channel, ctrl, value) {
       if (this.fPlotHandler)
@@ -11616,6 +11651,46 @@ export default ${(_b = jsCode.match(jsCodeHead)) == null ? void 0 : _b[1]};
         });
       }
     }
+    keyOn(channel, pitch, velocity) {
+      if (this.fPlotHandler)
+        this.fCachedEvents.push({ type: "keyOn", data: [channel, pitch, velocity] });
+      this.fMidiKeyOnLabel[pitch].forEach((key) => {
+        const { path, chan } = key;
+        if (chan === 0 || channel === chan - 1) {
+          this.setParamValue(path, _FaustBaseWebAudioDsp.remap(velocity, 0, 127, key.min, key.max));
+          if (this.fOutputHandler)
+            this.fOutputHandler(path, this.getParamValue(path));
+        }
+      });
+      this.fMidiKeyLabel[pitch].forEach((key) => {
+        const { path, chan } = key;
+        if (chan === 0 || channel === chan - 1) {
+          this.setParamValue(path, _FaustBaseWebAudioDsp.remap(velocity, 0, 127, key.min, key.max));
+          if (this.fOutputHandler)
+            this.fOutputHandler(path, this.getParamValue(path));
+        }
+      });
+    }
+    keyOff(channel, pitch, velocity) {
+      if (this.fPlotHandler)
+        this.fCachedEvents.push({ type: "keyOff", data: [channel, pitch, velocity] });
+      this.fMidiKeyOffLabel[pitch].forEach((key) => {
+        const { path, chan } = key;
+        if (chan === 0 || channel === chan - 1) {
+          this.setParamValue(path, _FaustBaseWebAudioDsp.remap(velocity, 0, 127, key.min, key.max));
+          if (this.fOutputHandler)
+            this.fOutputHandler(path, this.getParamValue(path));
+        }
+      });
+      this.fMidiKeyLabel[pitch].forEach((key) => {
+        const { path, chan } = key;
+        if (chan === 0 || channel === chan - 1) {
+          this.setParamValue(path, 0);
+          if (this.fOutputHandler)
+            this.fOutputHandler(path, this.getParamValue(path));
+        }
+      });
+    }
     pitchWheel(channel, wheel) {
       if (this.fPlotHandler)
         this.fCachedEvents.push({ type: "pitchWheel", data: [channel, wheel] });
@@ -12248,6 +12323,12 @@ export default ${(_b = jsCode.match(jsCodeHead)) == null ? void 0 : _b[1]};
     pitchWheel(chan, value) {
       this.fDSPCode.pitchWheel(chan, value);
     }
+    keyOn(channel, pitch, velocity) {
+      this.fDSPCode.keyOn(channel, pitch, velocity);
+    }
+    keyOff(channel, pitch, velocity) {
+      this.fDSPCode.keyOff(channel, pitch, velocity);
+    }
     setParamValue(path, value) {
       this.fDSPCode.setParamValue(path, value);
     }
@@ -12792,6 +12873,10 @@ export default ${(_b = jsCode.match(jsCodeHead)) == null ? void 0 : _b[1]};
         this.ctrlChange(channel, data1, data2);
       else if (cmd2 === 14)
         this.pitchWheel(channel, data2 * 128 + data1);
+      if (cmd2 === 8 || cmd2 === 9 && data2 === 0)
+        this.keyOff(channel, data1, data2);
+      else if (cmd2 === 9)
+        this.keyOn(channel, data1, data2);
       else
         this.port.postMessage({ type: "midi", data });
     }
@@ -12803,6 +12888,14 @@ export default ${(_b = jsCode.match(jsCodeHead)) == null ? void 0 : _b[1]};
       const e = { type: "pitchWheel", data: [channel, wheel] };
       this.port.postMessage(e);
     }
+    keyOn(channel, pitch, velocity) {
+      const e = { type: "keyOn", data: [channel, pitch, velocity] };
+      this.port.postMessage(e);
+    }
+    keyOff(channel, pitch, velocity) {
+      const e = { type: "keyOff", data: [channel, pitch, velocity] };
+      this.port.postMessage(e);
+    }
     get hasAccInput() {
       return __privateGet(this, _hasAccInput);
     }
@@ -12964,42 +13057,14 @@ export default ${(_b = jsCode.match(jsCodeHead)) == null ? void 0 : _b[1]};
     async startSensors() {
       if (this.hasAccInput) {
         if (window.DeviceMotionEvent) {
-          if (typeof window.DeviceMotionEvent.requestPermission === "function") {
-            try {
-              const response = await window.DeviceMotionEvent.requestPermission();
-              if (response === "granted") {
-                window.addEventListener("devicemotion", this.handleDeviceMotion, true);
-              } else if (response === "denied") {
-                alert("You have denied access to motion and orientation data. To enable it, go to Settings > Safari > Motion & Orientation Access.");
-                throw new Error("Unable to access the accelerometer.");
-              }
-            } catch (error) {
-              console.error(error);
-            }
-          } else {
-            window.addEventListener("devicemotion", this.handleDeviceMotion, true);
-          }
+          window.addEventListener("devicemotion", this.handleDeviceMotion, true);
         } else {
           console.log("Cannot set the accelerometer handler.");
         }
       }
       if (this.hasGyrInput) {
         if (window.DeviceMotionEvent) {
-          if (typeof window.DeviceOrientationEvent.requestPermission === "function") {
-            try {
-              const response = await window.DeviceOrientationEvent.requestPermission();
-              if (response === "granted") {
-                window.addEventListener("deviceorientation", this.handleDeviceOrientation, true);
-              } else if (response === "denied") {
-                alert("You have denied access to motion and orientation data. To enable it, go to Settings > Safari > Motion & Orientation Access.");
-                throw new Error("Unable to access the gyroscope.");
-              }
-            } catch (error) {
-              console.error(error);
-            }
-          } else {
-            window.addEventListener("deviceorientation", this.handleDeviceOrientation, true);
-          }
+          window.addEventListener("deviceorientation", this.handleDeviceOrientation, true);
         } else {
           console.log("Cannot set the gyroscope handler.");
         }
@@ -13052,6 +13117,12 @@ export default ${(_b = jsCode.match(jsCodeHead)) == null ? void 0 : _b[1]};
     pitchWheel(chan, value) {
       this.fDSPCode.pitchWheel(chan, value);
     }
+    keyOn(channel, pitch, velocity) {
+      this.fDSPCode.keyOn(channel, pitch, velocity);
+    }
+    keyOff(channel, pitch, velocity) {
+      this.fDSPCode.keyOff(channel, pitch, velocity);
+    }
     setParamValue(path, value) {
       this.fDSPCode.setParamValue(path, value);
     }
@@ -13635,7 +13706,19 @@ const dependencies = {
     iconName: "angles-left",
     icon: [512, 512, [171, "angle-double-left"], "f100", "M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160zm352-160l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256 438.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z"]
   };
-  for (const icon2 of [faPlay, faStop, faUpRightFromSquare, faSquareCaretLeft, faAnglesLeft, faAnglesRight, faSliders, faDiagramProject, faWaveSquare, faChartLine, faPowerOff]) {
+  for (const icon2 of [
+    faPlay,
+    faStop,
+    faUpRightFromSquare,
+    faSquareCaretLeft,
+    faAnglesLeft,
+    faAnglesRight,
+    faSliders,
+    faDiagramProject,
+    faWaveSquare,
+    faChartLine,
+    faPowerOff
+  ]) {
     library$1.add(icon2);
   }
   let compiler;
@@ -13668,7 +13751,7 @@ const dependencies = {
   }
   let getInputDevicesPromise;
   async function getInputDevices() {
-    if (getInputDevicesPromise === void 0) {
+    if (!getInputDevicesPromise) {
       getInputDevicesPromise = _getInputDevices();
     }
     await getInputDevicesPromise;
@@ -13679,8 +13762,8 @@ const dependencies = {
       if (navigator.requestMIDIAccess) {
         navigator.requestMIDIAccess().then((midiAccess) => {
           const inputDevices = midiAccess.inputs.values();
-          for (const midiInput2 of inputDevices) {
-            midiInput2.onmidimessage = (event) => {
+          for (const midiInput of inputDevices) {
+            midiInput.onmidimessage = (event) => {
               onMIDIMessage(event.data);
             };
             resolve();
@@ -13700,14 +13783,14 @@ const dependencies = {
   };
   function extractMidiAndNvoices(jsonData) {
     const optionsMetadata = jsonData.meta.find((meta2) => meta2.options);
-    if (optionsMetadata) {
+    if (optionsMetadata && optionsMetadata.options) {
       const options = optionsMetadata.options;
       const midiRegex = /\[midi:(on|off)\]/;
       const nvoicesRegex = /\[nvoices:(\d+)\]/;
       const midiMatch = options.match(midiRegex);
       const nvoicesMatch = options.match(nvoicesRegex);
       const midi = midiMatch ? midiMatch[1] === "on" : false;
-      const nvoices = nvoicesMatch ? parseInt(nvoicesMatch[1]) : -1;
+      const nvoices = nvoicesMatch ? parseInt(nvoicesMatch[1], 10) : -1;
       return { midi, nvoices };
     } else {
       return { midi: false, nvoices: -1 };
@@ -15414,6 +15497,11 @@ const dependencies = {
           return 1;
         },
         reconfigure: (state, oldState) => {
+          let init = state.facet(initField), oldInit = oldState.facet(initField), reInit;
+          if ((reInit = init.find((i2) => i2.field == this)) && reInit != oldInit.find((i2) => i2.field == this)) {
+            state.values[idx] = reInit.create(state);
+            return 1;
+          }
           if (oldState.config.address[this.id] != null) {
             state.values[idx] = oldState.field(this);
             return 0;
@@ -30315,7 +30403,7 @@ const dependencies = {
   }
   function delimitedStrategy(context, align, units, closing2, closedAt) {
     let after = context.textAfter, space = after.match(/^\s*/)[0].length;
-    let closed = closedAt == context.pos + space;
+    let closed = closing2 && after.slice(space, space + closing2.length) == closing2 || closedAt == context.pos + space;
     let aligned = bracketedAligned(context);
     if (aligned)
       return closed ? context.column(aligned.from) : context.column(aligned.to);
@@ -31208,8 +31296,7 @@ const dependencies = {
   }
   ({
     rtl: /* @__PURE__ */ Decoration.mark({ class: "cm-iso", inclusive: true, attributes: { dir: "rtl" }, bidiIsolate: Direction.RTL }),
-    ltr: /* @__PURE__ */ Decoration.mark({ class: "cm-iso", inclusive: true, attributes: { dir: "ltr" }, bidiIsolate: Direction.LTR }),
-    auto: /* @__PURE__ */ Decoration.mark({ class: "cm-iso", inclusive: true, attributes: { dir: "auto" }, bidiIsolate: null })
+    ltr: /* @__PURE__ */ Decoration.mark({ class: "cm-iso", inclusive: true, attributes: { dir: "ltr" }, bidiIsolate: Direction.LTR })
   });
   const toggleComment = (target) => {
     let { state } = target, line = state.doc.lineAt(state.selection.main.from), config2 = getConfig(target.state, line.from);
@@ -32930,7 +33017,18 @@ const dependencies = {
       return this.prevMatchInRange(state, 0, curFrom) || this.prevMatchInRange(state, curTo, state.doc.length);
     }
     getReplacement(result) {
-      return this.spec.unquote(this.spec.replace).replace(/\$([$&\d+])/g, (m, i2) => i2 == "$" ? "$" : i2 == "&" ? result.match[0] : i2 != "0" && +i2 < result.match.length ? result.match[i2] : m);
+      return this.spec.unquote(this.spec.replace).replace(/\$([$&]|\d+)/g, (m, i2) => {
+        if (i2 == "&")
+          return result.match[0];
+        if (i2 == "$")
+          return "$";
+        for (let l = i2.length; l > 0; l--) {
+          let n = +i2.slice(0, l);
+          if (n > 0 && n < result.match.length)
+            return result.match[n] + i2.slice(l);
+        }
+        return m;
+      });
     }
     matchAll(state, limit) {
       let cursor = regexpCursor(this.spec, state, 0, state.doc.length), ranges = [];
@@ -33915,8 +34013,8 @@ const dependencies = {
       let selRect = sel.getBoundingClientRect();
       let space = this.space;
       if (!space) {
-        let win = this.dom.ownerDocument.defaultView || window;
-        space = { left: 0, top: 0, right: win.innerWidth, bottom: win.innerHeight };
+        let docElt = this.dom.ownerDocument.documentElement;
+        space = { left: 0, top: 0, right: docElt.clientWidth, bottom: docElt.clientHeight };
       }
       if (selRect.top > Math.min(space.bottom, listRect.bottom) - 10 || selRect.bottom < Math.max(space.top, listRect.top) + 10)
         return null;
@@ -33939,6 +34037,10 @@ const dependencies = {
       ul.setAttribute("role", "listbox");
       ul.setAttribute("aria-expanded", "true");
       ul.setAttribute("aria-label", this.view.state.phrase("Completions"));
+      ul.addEventListener("mousedown", (e) => {
+        if (e.target == ul)
+          e.preventDefault();
+      });
       let curSection = null;
       for (let i2 = range.from; i2 < range.to; i2++) {
         let { completion, match } = options[i2], { section } = completion;
@@ -34699,7 +34801,7 @@ const dependencies = {
   function closeBrackets() {
     return [inputHandler, bracketState];
   }
-  const definedClosing = "()[]{}<>";
+  const definedClosing = "()[]{}<>«»»«［］｛｝";
   function closing(ch) {
     for (let i2 = 0; i2 < definedClosing.length; i2 += 2)
       if (definedClosing.charCodeAt(i2) == ch)
@@ -35979,7 +36081,6 @@ const dependencies = {
       /* package java.lang */
       "Boolean Byte Character CharSequence Class ClassLoader Cloneable Comparable Compiler Double Exception Float Integer Long Math Number Object Package Pair Process Runtime Runnable SecurityManager Short StackTraceElement StrictMath String StringBuffer System Thread ThreadGroup ThreadLocal Throwable Triple Void Annotation Any BooleanArray ByteArray Char CharArray DeprecationLevel DoubleArray Enum FloatArray Function Int IntArray Lazy LazyThreadSafetyMode LongArray Nothing ShortArray Unit"
     ),
-    intendSwitch: false,
     indentStatements: false,
     multiLineStrings: true,
     number: /^(?:0x[a-f\d_]+|0b[01_]+|(?:[\d_]+(\.\d+)?|\.\d+)(?:e[-+]?[\d_]+)?)(u|ll?|l|f)?/i,
@@ -36747,7 +36848,7 @@ const dependencies = {
       let spectrum;
       let gmidi = false;
       let gnvoices = -1;
-      let sourceNode = void 0;
+      let sourceNode;
       runButton.onclick = async () => {
         if (audioCtx.state === "suspended") {
           await audioCtx.resume();
@@ -37040,7 +37141,7 @@ const dependencies = {
       let input;
       let faustUI;
       let generator;
-      let sourceNode = void 0;
+      let sourceNode;
       const setup = async () => {
         await faustPromise;
         await default_generator.compile(compiler, "main", code2, "-ftz 2");

package/index.html

@@ -14,6 +14,7 @@ declare license "MIT";
 declare copyright "(c)Mike Olsen, CCRMA (Stanford University)";
 
 import("stdfaust.lib");
+declare options "[midi:on][nvoices:12]";
 
 process = pm.SFFormantModelFofSmooth_ui_MIDI <: _,_;
 -->

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@grame/faust-web-component",
     "description": "Web component embedding the Faust Compiler",
-    "version": "0.4.5",
+    "version": "0.5.0",
     "module": "dist/faust-web-component.js",
     "files": [
         "src/",
@@ -42,7 +42,7 @@
         "@codemirror/legacy-modes": "^6.3.3",
         "@fortawesome/fontawesome-svg-core": "^6.4.2",
         "@fortawesome/free-solid-svg-icons": "^6.4.2",
-        "@grame/faustwasm": "^0.8.2",
+        "@grame/faustwasm": "^0.9.1",
         "@shren/faust-ui": "^1.1.16",
         "codemirror": "^6.0.1",
         "split.js": "^1.6.5"

package/src/common.ts

@@ -1,58 +1,107 @@
-import { IFaustMonoWebAudioNode, IFaustPolyWebAudioNode, FaustCompiler, FaustMonoDspGenerator, FaustPolyDspGenerator, FaustSvgDiagrams, LibFaust, instantiateFaustModuleFromFile } from "@grame/faustwasm"
-import jsURL from "@grame/faustwasm/libfaust-wasm/libfaust-wasm.js?url"
-import dataURL from "@grame/faustwasm/libfaust-wasm/libfaust-wasm.data?url"
-import wasmURL from "@grame/faustwasm/libfaust-wasm/libfaust-wasm.wasm?url"
-import { library } from "@fortawesome/fontawesome-svg-core"
-import { faPlay, faStop, faUpRightFromSquare, faSquareCaretLeft, faAnglesLeft, faAnglesRight, faSliders, faDiagramProject, faWaveSquare, faChartLine, faPowerOff } from "@fortawesome/free-solid-svg-icons"
-
-for (const icon of [faPlay, faStop, faUpRightFromSquare, faSquareCaretLeft, faAnglesLeft, faAnglesRight, faSliders, faDiagramProject, faWaveSquare, faChartLine, faPowerOff]) {
-    library.add(icon)
+// Import Faust Web Audio API
+import {
+    IFaustMonoWebAudioNode,
+    IFaustPolyWebAudioNode,
+    FaustCompiler,
+    FaustMonoDspGenerator,
+    FaustPolyDspGenerator,
+    FaustSvgDiagrams,
+    LibFaust,
+    instantiateFaustModuleFromFile
+} from "@grame/faustwasm";
+
+// Import Faust module URLs
+import jsURL from "@grame/faustwasm/libfaust-wasm/libfaust-wasm.js?url";
+import dataURL from "@grame/faustwasm/libfaust-wasm/libfaust-wasm.data?url";
+import wasmURL from "@grame/faustwasm/libfaust-wasm/libfaust-wasm.wasm?url";
+
+// Import FontAwesome icons
+import { library } from "@fortawesome/fontawesome-svg-core";
+import {
+    faPlay,
+    faStop,
+    faUpRightFromSquare,
+    faSquareCaretLeft,
+    faAnglesLeft,
+    faAnglesRight,
+    faSliders,
+    faDiagramProject,
+    faWaveSquare,
+    faChartLine,
+    faPowerOff
+} from "@fortawesome/free-solid-svg-icons";
+
+// Add icons to FontAwesome library
+for (const icon of [
+    faPlay,
+    faStop,
+    faUpRightFromSquare,
+    faSquareCaretLeft,
+    faAnglesLeft,
+    faAnglesRight,
+    faSliders,
+    faDiagramProject,
+    faWaveSquare,
+    faChartLine,
+    faPowerOff
+]) {
+    library.add(icon);
 }
 
-export let compiler: FaustCompiler
-export let svgDiagrams: FaustSvgDiagrams
-export const default_generator = new FaustMonoDspGenerator()
-export const get_mono_generator = () => new FaustMonoDspGenerator()
-export const get_poly_generator = () => new FaustPolyDspGenerator()
+// Global variables for Faust
+export let compiler: FaustCompiler;
+export let svgDiagrams: FaustSvgDiagrams;
+export const default_generator = new FaustMonoDspGenerator();
+export const get_mono_generator = (): FaustMonoDspGenerator => new FaustMonoDspGenerator();
+export const get_poly_generator = (): FaustPolyDspGenerator => new FaustPolyDspGenerator();
 
-async function loadFaust() {
+// Load Faust module
+async function loadFaust(): Promise<void> {
     // Setup Faust
-    const module = await instantiateFaustModuleFromFile(jsURL, dataURL, wasmURL)
-    const libFaust = new LibFaust(module)
-    compiler = new FaustCompiler(libFaust)
-    svgDiagrams = new FaustSvgDiagrams(compiler)
+    const module = await instantiateFaustModuleFromFile(jsURL, dataURL, wasmURL);
+    const libFaust = new LibFaust(module);
+    compiler = new FaustCompiler(libFaust);
+    svgDiagrams = new FaustSvgDiagrams(compiler);
 }
 
-export const faustPromise = loadFaust()
-export const audioCtx = new AudioContext({ latencyHint: 0.00001 })
+// Initialize Faust
+export const faustPromise: Promise<void> = loadFaust();
+
+// Create an AudioContext
+export const audioCtx: AudioContext = new AudioContext({ latencyHint: 0.00001 });
 audioCtx.destination.channelInterpretation = "discrete";
 
-export const deviceUpdateCallbacks: ((d: MediaDeviceInfo[]) => void)[] = []
-let devices: MediaDeviceInfo[] = []
-async function _getInputDevices() {
+export const deviceUpdateCallbacks: Array<(devices: MediaDeviceInfo[]) => void> = [];
+let devices: MediaDeviceInfo[] = [];
+
+// Get input devices
+async function _getInputDevices(): Promise<void> {
     if (navigator.mediaDevices) {
-        navigator.mediaDevices.ondevicechange = _getInputDevices
+        navigator.mediaDevices.ondevicechange = _getInputDevices;
         try {
-            await navigator.mediaDevices.getUserMedia({ audio: true })
-        } catch (e) { }
-        devices = await navigator.mediaDevices.enumerateDevices()
+            await navigator.mediaDevices.getUserMedia({ audio: true });
+        } catch (e) {
+            // Ignore permission errors
+        }
+        devices = await navigator.mediaDevices.enumerateDevices();
         for (const callback of deviceUpdateCallbacks) {
-            callback(devices)
+            callback(devices);
         }
     }
 }
 
-let getInputDevicesPromise: Promise<void> | undefined
-export async function getInputDevices() {
-    if (getInputDevicesPromise === undefined) {
-        getInputDevicesPromise = _getInputDevices()
+let getInputDevicesPromise: Promise<void> | undefined;
+export async function getInputDevices(): Promise<MediaDeviceInfo[]> {
+    if (!getInputDevicesPromise) {
+        getInputDevicesPromise = _getInputDevices();
     }
-    await getInputDevicesPromise
-    return devices
+    await getInputDevicesPromise;
+    return devices;
 }
 
+// Access MIDI device
 export async function accessMIDIDevice(
-    onMIDIMessage: (data) => void
+    onMIDIMessage: (data: Uint8Array) => void
 ): Promise<void> {
     return new Promise<void>((resolve, reject) => {
         if (navigator.requestMIDIAccess) {
@@ -60,7 +109,6 @@ export async function accessMIDIDevice(
                 .requestMIDIAccess()
                 .then((midiAccess) => {
                     const inputDevices = midiAccess.inputs.values();
-                    let midiInput: WebMidi.MIDIInput | null = null;
                     for (const midiInput of inputDevices) {
                         midiInput.onmidimessage = (event) => {
                             onMIDIMessage(event.data);
@@ -78,14 +126,23 @@ export async function accessMIDIDevice(
 }
 
 // Set up MIDI input callback
-export const midiInputCallback = (node: IFaustMonoWebAudioNode | IFaustPolyWebAudioNode) => {
-    return (data) => { node.midiMessage(data); }
+export const midiInputCallback = (node: IFaustMonoWebAudioNode | IFaustPolyWebAudioNode)
+    : ((data: Uint8Array) => void) => {
+    return (data: Uint8Array) => {
+        node.midiMessage(data);
+    };
+};
+
+// Define type for JSON data with metadata
+interface JSONData {
+    meta: Array<{ options?: string; }>;
 }
 
-// Analyze the metadata of a Faust JSON file extract the [midi:on] and [nvoices:n] options
-export function extractMidiAndNvoices(jsonData: JSONData): { midi: boolean, nvoices: number } {
-    const optionsMetadata = jsonData.meta.find(meta => meta.options);
-    if (optionsMetadata) {
+// Analyze the metadata of a Faust JSON file and extract the [midi:on] and [nvoices:n] options
+export function extractMidiAndNvoices(jsonData: JSONData)
+    : { midi: boolean; nvoices: number } {
+    const optionsMetadata = jsonData.meta.find((meta) => meta.options);
+    if (optionsMetadata && optionsMetadata.options) {
         const options = optionsMetadata.options;
 
         const midiRegex = /\[midi:(on|off)\]/;
@@ -95,10 +152,10 @@ export function extractMidiAndNvoices(jsonData: JSONData): { midi: boolean, nvoi
         const nvoicesMatch = options.match(nvoicesRegex);
 
         const midi = midiMatch ? midiMatch[1] === "on" : false;
-        const nvoices = nvoicesMatch ? parseInt(nvoicesMatch[1]) : -1;
+        const nvoices = nvoicesMatch ? parseInt(nvoicesMatch[1], 10) : -1;
 
         return { midi, nvoices };
     } else {
         return { midi: false, nvoices: -1 };
     }
-}
+}

package/src/faust-editor.ts

@@ -10,7 +10,6 @@ import {
     compiler,
     svgDiagrams,
     default_generator,
-    get_mono_generator,
     get_poly_generator,
     getInputDevices,
     deviceUpdateCallbacks,
@@ -230,34 +229,34 @@ template.innerHTML = `
 // FaustEditor Web Component
 export default class FaustEditor extends HTMLElement {
     constructor() {
-        super()
+        super();
     }
 
     connectedCallback() {
         // Initial setup when the component is attached to the DOM
-        const code = this.innerHTML.replace("<!--", "").replace("-->", "").trim()
-        this.attachShadow({ mode: "open" }).appendChild(template.content.cloneNode(true))
+        const code = this.innerHTML.replace("<!--", "").replace("-->", "").trim();
+        this.attachShadow({ mode: "open" }).appendChild(template.content.cloneNode(true));
 
         // Set up links, buttons, and editor
-        const ideLink = this.shadowRoot!.querySelector("#ide") as HTMLAnchorElement
-        const editorEl = this.shadowRoot!.querySelector("#editor") as HTMLDivElement
-        const editor = createEditor(editorEl, code)
+        const ideLink = this.shadowRoot!.querySelector("#ide") as HTMLAnchorElement;
+        const editorEl = this.shadowRoot!.querySelector("#editor") as HTMLDivElement;
+        const editor = createEditor(editorEl, code);
 
         ideLink.onfocus = () => {
             // Open current contents of editor in IDE
-            const urlParams = new URLSearchParams()
-            urlParams.set("inline", btoa(editor.state.doc.toString()).replace("+", "-").replace("/", "_"))
-            ideLink.href = `https://faustide.grame.fr/?${urlParams.toString()}`
+            const urlParams = new URLSearchParams();
+            urlParams.set("inline", btoa(editor.state.doc.toString()).replace("+", "-").replace("/", "_"));
+            ideLink.href = `https://faustide.grame.fr/?${urlParams.toString()}`;
         }
 
-        const runButton = this.shadowRoot!.querySelector("#run") as HTMLButtonElement
-        const stopButton = this.shadowRoot!.querySelector("#stop") as HTMLButtonElement
-        const faustUIRoot = this.shadowRoot!.querySelector("#faust-ui") as HTMLDivElement
-        const faustDiagram = this.shadowRoot!.querySelector("#faust-diagram") as HTMLDivElement
-        const sidebar = this.shadowRoot!.querySelector("#sidebar") as HTMLDivElement
-        const sidebarContent = this.shadowRoot!.querySelector("#sidebar-content") as HTMLDivElement
-        const tabButtons = [...this.shadowRoot!.querySelectorAll(".tab")] as HTMLButtonElement[]
-        const tabContents = [...sidebarContent.querySelectorAll("div")] as HTMLDivElement[]
+        const runButton = this.shadowRoot!.querySelector("#run") as HTMLButtonElement;
+        const stopButton = this.shadowRoot!.querySelector("#stop") as HTMLButtonElement;
+        const faustUIRoot = this.shadowRoot!.querySelector("#faust-ui") as HTMLDivElement;
+        const faustDiagram = this.shadowRoot!.querySelector("#faust-diagram") as HTMLDivElement;
+        const sidebar = this.shadowRoot!.querySelector("#sidebar") as HTMLDivElement;
+        const sidebarContent = this.shadowRoot!.querySelector("#sidebar-content") as HTMLDivElement;
+        const tabButtons = [...this.shadowRoot!.querySelectorAll(".tab")] as HTMLButtonElement[];
+        const tabContents = [...sidebarContent.querySelectorAll("div")] as HTMLDivElement[];
 
         // Initialize split.js for resizable editor and sidebar
         const split = Split([editorEl, sidebar], {
@@ -268,44 +267,44 @@ export default class FaustEditor extends HTMLElement {
             onDragEnd: () => { scope?.onResize(); spectrum?.onResize() },
         })
 
-        faustPromise.then(() => runButton.disabled = false)
+        faustPromise.then(() => runButton.disabled = false);
 
         // Default sizes for sidebar
-        const defaultSizes = [70, 30]
-        let sidebarOpen = false
+        const defaultSizes = [70, 30];
+        let sidebarOpen = false;
 
         // Function to open the sidebar with predefined sizes
         const openSidebar = () => {
             if (!sidebarOpen) {
-                split.setSizes(defaultSizes)
+                split.setSizes(defaultSizes);
             }
-            sidebarOpen = true
+            sidebarOpen = true;
         }
 
         // Variables for audio and visualization nodes
-        let node: IFaustMonoWebAudioNode | undefined
-        let input: MediaStreamAudioSourceNode | undefined
-        let analyser: AnalyserNode | undefined
-        let scope: Scope | undefined
-        let spectrum: Scope | undefined
-        let gmidi = false
-        let gnvoices = -1
-        let sourceNode: AudioBufferSourceNode = undefined;
+        let node: IFaustMonoWebAudioNode | undefined;
+        let input: MediaStreamAudioSourceNode | undefined;
+        let analyser: AnalyserNode | undefined;
+        let scope: Scope | undefined;
+        let spectrum: Scope | undefined;
+        let gmidi = false;
+        let gnvoices = -1;
+        let sourceNode: AudioBufferSourceNode | undefined;
 
         // Event handler for the run button
         runButton.onclick = async () => {
             if (audioCtx.state === "suspended") {
-                await audioCtx.resume()
+                await audioCtx.resume();
             }
-            await faustPromise
+            await faustPromise;
 
             // Compile Faust code
-            const code = editor.state.doc.toString()
-            let generator = null
+            const code = editor.state.doc.toString();
+            let generator = null;
             try {
                 // Compile Faust code to access JSON metadata
-                await default_generator.compile(compiler, "main", code, "-ftz 2")
-                const json = default_generator.getMeta()
+                await default_generator.compile(compiler, "main", code, "-ftz 2");
+                const json = default_generator.getMeta();
                 let { midi, nvoices } = extractMidiAndNvoices(json);
                 gmidi = midi;
                 gnvoices = nvoices;
@@ -315,34 +314,34 @@ export default class FaustEditor extends HTMLElement {
                 await generator.compile(compiler, "main", code, "-ftz 2");
 
             } catch (e: any) {
-                setError(editor, e)
+                setError(editor, e);
                 return
             }
 
             // Clear any old errors
-            clearError(editor)
+            clearError(editor);
 
             // Create an audio node from compiled Faust
-            if (node !== undefined) node.disconnect()
+            if (node !== undefined) node.disconnect();
             if (gnvoices > 0) {
-                node = (await (generator as FaustPolyDspGenerator).createNode(audioCtx, gnvoices))!
+                node = (await (generator as FaustPolyDspGenerator).createNode(audioCtx, gnvoices))!;
             } else {
-                node = (await (generator as FaustMonoDspGenerator).createNode(audioCtx))!
+                node = (await (generator as FaustMonoDspGenerator).createNode(audioCtx))!;
             }
 
             // Set up audio input if necessary
             if (node.numberOfInputs > 0) {
-                audioInputSelector.disabled = false
-                updateInputDevices(await getInputDevices())
-                await connectInput()
+                audioInputSelector.disabled = false;
+                updateInputDevices(await getInputDevices());
+                await connectInput();
             } else {
-                audioInputSelector.disabled = true
-                audioInputSelector.innerHTML = "<option>Audio input</option>"
+                audioInputSelector.disabled = true;
+                audioInputSelector.innerHTML = "<option>Audio input</option>";
             }
-            node.connect(audioCtx.destination)
-            stopButton.disabled = false
+            node.connect(audioCtx.destination);
+            stopButton.disabled = false;
             for (const tabButton of tabButtons) {
-                tabButton.disabled = false
+                tabButton.disabled = false;
             }
 
             // Start sensors if available
@@ -359,50 +358,50 @@ export default class FaustEditor extends HTMLElement {
                     });
             }
 
-            openSidebar()
+            openSidebar();
 
             // Clear old tab contents
             for (const tab of tabContents) {
-                while (tab.lastChild) tab.lastChild.remove()
+                while (tab.lastChild) tab.lastChild.remove();
             }
             // Create scope & spectrum plots
             analyser = new AnalyserNode(audioCtx, {
                 fftSize: Math.pow(2, 11), minDecibels: -96, maxDecibels: 0, smoothingTimeConstant: 0.85
-            })
-            node.connect(analyser)
-            scope = new Scope(tabContents[2])
-            spectrum = new Scope(tabContents[3])
+            });
+            node.connect(analyser);
+            scope = new Scope(tabContents[2]);
+            spectrum = new Scope(tabContents[3]);
 
             // If there are UI elements, open Faust UI (controls tab); otherwise open spectrum analyzer.
-            const ui = node.getUI()
-            openTab(ui.length > 1 || ui[0].items.length > 0 ? 0 : 3)
+            const ui = node.getUI();
+            openTab(ui.length > 1 || ui[0].items.length > 0 ? 0 : 3);
 
             // Create controls via Faust UI
-            const faustUI = new FaustUI({ ui, root: faustUIRoot })
-            faustUI.paramChangeByUI = (path, value) => node?.setParamValue(path, value)
-            node.setOutputParamHandler((path, value) => faustUI.paramChangeByDSP(path, value))
+            const faustUI = new FaustUI({ ui, root: faustUIRoot });
+            faustUI.paramChangeByUI = (path, value) => node?.setParamValue(path, value);
+            node.setOutputParamHandler((path, value) => faustUI.paramChangeByDSP(path, value));
 
             // Set editor size to fit UI size
             editorEl.style.height = `${Math.max(125, faustUI.minHeight)}px`;
-            faustUIRoot.style.width = faustUI.minWidth * 1.25 + "px"
-            faustUIRoot.style.height = faustUI.minHeight * 1.25 + "px"
+            faustUIRoot.style.width = faustUI.minWidth * 1.25 + "px";
+            faustUIRoot.style.height = faustUI.minHeight * 1.25 + "px";
         }
 
         // Function to set SVG in the block diagram tab
         const setSVG = (svgString: string) => {
-            faustDiagram.innerHTML = svgString
+            faustDiagram.innerHTML = svgString;
 
             for (const a of faustDiagram.querySelectorAll("a")) {
                 a.onclick = e => {
-                    e.preventDefault()
-                    const filename = (a.href as any as SVGAnimatedString).baseVal
-                    const svgString = compiler.fs().readFile("main-svg/" + filename, { encoding: "utf8" }) as string
-                    setSVG(svgString)
+                    e.preventDefault();
+                    const filename = (a.href as any as SVGAnimatedString).baseVal;
+                    const svgString = compiler.fs().readFile("main-svg/" + filename, { encoding: "utf8" }) as string;
+                    setSVG(svgString);
                 }
             }
         }
 
-        let animPlot: number | undefined
+        let animPlot: number | undefined;
 
         // Function to render the scope
         const drawScope = () => {
@@ -411,24 +410,24 @@ export default class FaustEditor extends HTMLElement {
                 style: "rgb(212, 100, 100)",
                 edgeThreshold: 0.09,
             }])
-            animPlot = requestAnimationFrame(drawScope)
+            animPlot = requestAnimationFrame(drawScope);
         }
 
         // Function to render the spectrum
         const drawSpectrum = () => {
-            spectrum!.renderSpectrum(analyser!)
-            animPlot = requestAnimationFrame(drawSpectrum)
+            spectrum!.renderSpectrum(analyser!);
+            animPlot = requestAnimationFrame(drawSpectrum);
         }
 
         // Function to switch between tabs
         const openTab = (i: number) => {
             for (const [j, tab] of tabButtons.entries()) {
                 if (i === j) {
-                    tab.classList.add("active")
-                    tabContents[j].classList.add("active")
+                    tab.classList.add("active");
+                    tabContents[j].classList.add("active");
                 } else {
-                    tab.classList.remove("active")
-                    tabContents[j].classList.remove("active")
+                    tab.classList.remove("active");
+                    tabContents[j].classList.remove("active");
                 }
             }
             // Check if the clicked tab is the "Block Diagram" tab (index 1)
@@ -445,22 +444,22 @@ export default class FaustEditor extends HTMLElement {
                     }, 0);
                 }
             } else if (i === 2) {
-                scope!.onResize()
-                if (animPlot !== undefined) cancelAnimationFrame(animPlot)
-                animPlot = requestAnimationFrame(drawScope)
+                scope!.onResize();
+                if (animPlot !== undefined) cancelAnimationFrame(animPlot);
+                animPlot = requestAnimationFrame(drawScope);
             } else if (i === 3) {
-                spectrum!.onResize()
-                if (animPlot !== undefined) cancelAnimationFrame(animPlot)
-                animPlot = requestAnimationFrame(drawSpectrum)
+                spectrum!.onResize();
+                if (animPlot !== undefined) cancelAnimationFrame(animPlot);
+                animPlot = requestAnimationFrame(drawSpectrum);
             } else if (animPlot !== undefined) {
-                cancelAnimationFrame(animPlot)
-                animPlot = undefined
+                cancelAnimationFrame(animPlot);
+                animPlot = undefined;
             }
         }
 
         // Attach event listeners to tab buttons
         for (const [i, tabButton] of tabButtons.entries()) {
-            tabButton.onclick = () => openTab(i)
+            tabButton.onclick = () => openTab(i);
         }
 
         // Event handler for the stop button
@@ -476,28 +475,28 @@ export default class FaustEditor extends HTMLElement {
         }
 
         // Audio input selector element
-        const audioInputSelector = this.shadowRoot!.querySelector("#audio-input") as HTMLSelectElement
+        const audioInputSelector = this.shadowRoot!.querySelector("#audio-input") as HTMLSelectElement;
 
         // Update the audio input device list
         const updateInputDevices = (devices: MediaDeviceInfo[]) => {
-            if (audioInputSelector.disabled) return
-            while (audioInputSelector.lastChild) audioInputSelector.lastChild.remove()
+            if (audioInputSelector.disabled) return;
+            while (audioInputSelector.lastChild) audioInputSelector.lastChild.remove();
             for (const device of devices) {
                 if (device.kind === "audioinput") {
-                    audioInputSelector.appendChild(new Option(device.label || device.deviceId, device.deviceId))
+                    audioInputSelector.appendChild(new Option(device.label || device.deviceId, device.deviceId));
                 }
             }
-            audioInputSelector.appendChild(new Option("Audio File", "Audio File"))
+            audioInputSelector.appendChild(new Option("Audio File", "Audio File"));
         }
-        deviceUpdateCallbacks.push(updateInputDevices)
+        deviceUpdateCallbacks.push(updateInputDevices);
 
         // Connect the selected audio input device
         const connectInput = async () => {
-            const deviceId = audioInputSelector.value
-            const stream = await navigator.mediaDevices.getUserMedia({ audio: { deviceId, echoCancellation: false, noiseSuppression: false, autoGainControl: false } })
+            const deviceId = audioInputSelector.value;
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: { deviceId, echoCancellation: false, noiseSuppression: false, autoGainControl: false } });
             if (input) {
-                input.disconnect()
-                input = undefined
+                input.disconnect();
+                input = undefined;
             }
             if (node && node.numberOfInputs > 0) {
                 if (deviceId == "Audio File") {
@@ -531,6 +530,6 @@ export default class FaustEditor extends HTMLElement {
             }
         }
 
-        audioInputSelector.onchange = connectInput
+        audioInputSelector.onchange = connectInput;
     }
 }

package/src/faust-widget.ts

@@ -12,7 +12,6 @@ import { FaustUI } from "@shren/faust-ui";
 import {
     faustPromise,
     audioCtx,
-    get_mono_generator,
     get_poly_generator,
     compiler,
     getInputDevices,
@@ -117,40 +116,40 @@ template.innerHTML = `
 // Define the FaustWidget web component
 export default class FaustWidget extends HTMLElement {
     constructor() {
-        super()
+        super();
     }
 
     // Called when the component is connected to the DOM
     connectedCallback() {
         // Extract the Faust code from the inner HTML
-        const code = this.innerHTML.replace("<!--", "").replace("-->", "").trim()
-        this.attachShadow({ mode: "open" }).appendChild(template.content.cloneNode(true))
+        const code = this.innerHTML.replace("<!--", "").replace("-->", "").trim();
+        this.attachShadow({ mode: "open" }).appendChild(template.content.cloneNode(true));
 
         // Query and initialize various elements in the shadow DOM
-        const powerButton = this.shadowRoot!.querySelector("#power") as HTMLButtonElement
-        const faustUIRoot = this.shadowRoot!.querySelector("#faust-ui") as HTMLDivElement
-        const audioInputSelector = this.shadowRoot!.querySelector("#audio-input") as HTMLSelectElement
+        const powerButton = this.shadowRoot!.querySelector("#power") as HTMLButtonElement;
+        const faustUIRoot = this.shadowRoot!.querySelector("#faust-ui") as HTMLDivElement;
+        const audioInputSelector = this.shadowRoot!.querySelector("#audio-input") as HTMLSelectElement;
 
         // Enable the power button once Faust is ready
-        faustPromise.then(() => powerButton.disabled = false)
+        faustPromise.then(() => powerButton.disabled = false);
 
         // State variables
-        let on = false
-        let gmidi = false
-        let gnvoices = -1
-        let node: IFaustMonoWebAudioNode | IFaustPolyWebAudioNode
-        let input: MediaStreamAudioSourceNode | undefined
-        let faustUI: FaustUI
-        let generator: FaustMonoDspGenerator | FaustPolyDspGenerator
-        let sourceNode: AudioBufferSourceNode = undefined;
+        let on = false;
+        let gmidi = false;
+        let gnvoices = -1;
+        let node: IFaustMonoWebAudioNode | IFaustPolyWebAudioNode;
+        let input: MediaStreamAudioSourceNode | undefined;
+        let faustUI: FaustUI;
+        let generator: FaustMonoDspGenerator | FaustPolyDspGenerator;
+        let sourceNode: AudioBufferSourceNode | undefined;
 
         // Function to setup the Faust environment
         const setup = async () => {
-            await faustPromise
+            await faustPromise;
 
             // Compile Faust code to access JSON metadata 
-            await default_generator.compile(compiler, "main", code, "-ftz 2")
-            const json = default_generator.getMeta()
+            await default_generator.compile(compiler, "main", code, "-ftz 2");
+            const json = default_generator.getMeta();
             let { midi, nvoices } = extractMidiAndNvoices(json);
             gmidi = midi;
             gnvoices = nvoices;
@@ -171,15 +170,15 @@ export default class FaustWidget extends HTMLElement {
         // Function to start the Faust node and audio context
         const start = async () => {
             if (audioCtx.state === "suspended") {
-                await audioCtx.resume()
+                await audioCtx.resume();
             }
 
             // Create an audio node from compiled Faust if not already created
             if (node === undefined) {
                 if (gnvoices > 0) {
-                    node = (await (generator as FaustPolyDspGenerator).createNode(audioCtx, gnvoices))!
+                    node = (await (generator as FaustPolyDspGenerator).createNode(audioCtx, gnvoices))!;
                 } else {
-                    node = (await (generator as FaustMonoDspGenerator).createNode(audioCtx))!
+                    node = (await (generator as FaustMonoDspGenerator).createNode(audioCtx))!;
                 }
             }
 
@@ -198,61 +197,61 @@ export default class FaustWidget extends HTMLElement {
             }
 
             // Set up parameter handling for Faust UI
-            faustUI.paramChangeByUI = (path, value) => node?.setParamValue(path, value)
-            node.setOutputParamHandler((path, value) => faustUI.paramChangeByDSP(path, value))
+            faustUI.paramChangeByUI = (path, value) => node?.setParamValue(path, value);
+            node.setOutputParamHandler((path, value) => faustUI.paramChangeByDSP(path, value));
 
             // Enable audio input if necessary
             if (node.numberOfInputs > 0) {
-                audioInputSelector.disabled = false
-                updateInputDevices(await getInputDevices())
-                await connectInput()
+                audioInputSelector.disabled = false;
+                updateInputDevices(await getInputDevices());
+                await connectInput();
             } else {
-                audioInputSelector.disabled = true
-                audioInputSelector.innerHTML = "<option>Audio input</option>"
+                audioInputSelector.disabled = true;
+                audioInputSelector.innerHTML = "<option>Audio input</option>";
             }
 
             // Connect Faust node to the audio context destination
-            node.connect(audioCtx.destination)
-            powerButton.style.color = "#ffa500"
+            node.connect(audioCtx.destination);
+            powerButton.style.color = "#ffa500";
         }
 
         // Function to stop the Faust node
         const stop = () => {
-            node?.disconnect()
+            node?.disconnect();
             node?.stopSensors();
-            powerButton.style.color = "#fff"
+            powerButton.style.color = "#fff";
         }
 
         // Toggle the Faust node on/off
         powerButton.onclick = () => {
             if (on) {
-                stop()
+                stop();
             } else {
-                start()
+                start();
             }
-            on = !on
+            on = !on;
         }
 
         // Function to update available audio input devices
         const updateInputDevices = (devices: MediaDeviceInfo[]) => {
-            if (audioInputSelector.disabled) return
-            while (audioInputSelector.lastChild) audioInputSelector.lastChild.remove()
+            if (audioInputSelector.disabled) return;
+            while (audioInputSelector.lastChild) audioInputSelector.lastChild.remove();
             for (const device of devices) {
                 if (device.kind === "audioinput") {
-                    audioInputSelector.appendChild(new Option(device.label || device.deviceId, device.deviceId))
+                    audioInputSelector.appendChild(new Option(device.label || device.deviceId, device.deviceId));
                 }
             }
-            audioInputSelector.appendChild(new Option("Audio File", "Audio File"))
+            audioInputSelector.appendChild(new Option("Audio File", "Audio File"));
         }
-        deviceUpdateCallbacks.push(updateInputDevices)
+        deviceUpdateCallbacks.push(updateInputDevices);
 
         // Function to connect selected audio input device
         const connectInput = async () => {
-            const deviceId = audioInputSelector.value
-            const stream = await navigator.mediaDevices.getUserMedia({ audio: { deviceId, echoCancellation: false, noiseSuppression: false, autoGainControl: false } })
+            const deviceId = audioInputSelector.value;
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: { deviceId, echoCancellation: false, noiseSuppression: false, autoGainControl: false } });
             if (input) {
-                input.disconnect()
-                input = undefined
+                input.disconnect();
+                input = undefined;
             }
             if (node && node.numberOfInputs > 0) {
                 if (deviceId == "Audio File") {
@@ -287,7 +286,7 @@ export default class FaustWidget extends HTMLElement {
         }
 
         // Set input change handler
-        audioInputSelector.onchange = connectInput
+        audioInputSelector.onchange = connectInput;
 
         // Initial setup
         setTimeout(() => {