@grame/faustwasm 0.0.48 → 0.0.50

package/README.md

@@ -40,20 +40,36 @@ You'll have to raise the package version number in `package.json` before `npm ru
 #### Generate WebAssembly version of a Faust DSP
 
 For example:
+
 ```bash
 rm -rf test/out # make sure you are under the faustwasm directory.
 node scripts/faust2wasm.js test/mono.dsp test/out
 ```
-or
+will create a set of files: `mono.js`, `mono.wasm`, `mono.json`, `mono.html` and the `faustwasm` folder.
+
+Polyphonic instrument with:
+
 ```bash
 rm -rf test/out # make sure you are under the faustwasm directory.
 node scripts/faust2wasm.js test/poly.dsp test/out -poly
 ```
-You can create standalone DSP on a web page using the same command line
+will create a set of files: `poly.js`, `poly.wasm`, `poly.json`, `poly.html` (and possibly `poly_effect.wasm`, `poly_effect.json`) and the `faustwasm` folder.
+
+You can create a standalone DSP on a web page using the same command line:
+
 ```bash
 rm -rf test/out # make sure you are under the faustwasm directory.
 node scripts/faust2wasm.js test/rev.dsp test/out -standalone
 ```
+will create a set of files: `rev.js`, `rev.wasm`, `rev.json`, `rev.html`, and the `faustwasm`, `faust-ui` folders.
+
+Or a standalone polyphonic DSP on a web page with:
+
+```bash
+rm -rf test/out # make sure you are under the faustwasm directory.
+node scripts/faust2wasm.js test/organ1.dsp test/out -standalone
+```
+will create a set of files: `organ1.js`, `organ1.wasm`, `organ1.json`, `organ1_effect.wasm`, `organ1_effect.json`, `organ1.html`, and the `faustwasm`, `faust-ui` folders.
 
 #### Generate SVG Diagrams of a Faust DSP
 
@@ -223,7 +239,6 @@ The package is used in the following projects:
 - [Misc. services](#misc)
 - [Important note](#note)
 
-
 ### Organisation of the API <a name="org"></a>
 
 The API is organised from low to high level as illustrated by the figure below.

package/assets/standalone/index-poly.js

@@ -0,0 +1,214 @@
+/**
+ * @typedef {import("./types").FaustDspDistribution} FaustDspDistribution
+ * @typedef {import("./faustwasm").FaustAudioWorkletNode} FaustAudioWorkletNode
+ * @typedef {import("./faustwasm").FaustDspMeta} FaustDspMeta
+ * @typedef {import("./faustwasm").FaustUIDescriptor} FaustUIDescriptor
+ * @typedef {import("./faustwasm").FaustUIGroup} FaustUIGroup
+ * @typedef {import("./faustwasm").FaustUIItem} FaustUIItem
+ */
+
+/** @type {HTMLSpanElement} */
+const $spanAudioInput = document.getElementById("audio-input");
+/** @type {HTMLSpanElement} */
+const $spanMidiInput = document.getElementById("midi-input");
+/** @type {HTMLSelectElement} */
+const $selectAudioInput = document.getElementById("select-audio-input");
+/** @type {HTMLSelectElement} */
+const $selectMidiInput = document.getElementById("select-midi-input");
+/** @type {HTMLSelectElement} */
+const $buttonDsp = document.getElementById("button-dsp");
+/** @type {HTMLDivElement} */
+const $divFaustUI = document.getElementById("div-faust-ui");
+
+/** @type {typeof AudioContext} */
+const AudioCtx = window.AudioContext || window.webkitAudioContext;
+const audioContext = new AudioCtx();
+audioContext.suspend();
+
+/**
+ * @param {FaustAudioWorkletNode} faustNode 
+ */
+const buildAudioDeviceMenu = async (faustNode) => {
+    /** @type {MediaStreamAudioSourceNode} */
+    let inputStreamNode;
+    const handleDeviceChange = async () => {
+        const devicesInfo = await navigator.mediaDevices.enumerateDevices();
+        $selectAudioInput.innerHTML = '';
+        devicesInfo.forEach((deviceInfo, i) => {
+            const { kind, deviceId, label } = deviceInfo;
+            if (kind === "audioinput") {
+                const option = new Option(label || `microphone ${i + 1}`, deviceId);
+                $selectAudioInput.add(option);
+            }
+        });
+    }
+    await handleDeviceChange();
+    navigator.mediaDevices.addEventListener("devicechange", handleDeviceChange)
+    $selectAudioInput.onchange = async () => {
+        const id = $selectAudioInput.value;
+        const constraints = {
+            audio: {
+                echoCancellation: false,
+                mozNoiseSuppression: false,
+                mozAutoGainControl: false,
+                deviceId: id ? { exact: id } : undefined,
+            },
+        };
+        const stream = await navigator.mediaDevices.getUserMedia(constraints);
+        if (inputStreamNode) inputStreamNode.disconnect();
+        inputStreamNode = audioContext.createMediaStreamSource(stream);
+        inputStreamNode.connect(faustNode);
+    };
+
+    const defaultConstraints = {
+        audio: {
+            echoCancellation: false,
+            mozNoiseSuppression: false,
+            mozAutoGainControl: false
+        }
+    };
+    const defaultStream = await navigator.mediaDevices.getUserMedia(defaultConstraints);
+    if (defaultStream) {
+        inputStreamNode = audioContext.createMediaStreamSource(defaultStream);
+        inputStreamNode.connect(faustNode);
+    }
+};
+
+/**
+ * @param {FaustAudioWorkletNode} faustNode 
+ */
+const buildMidiDeviceMenu = async (faustNode) => {
+    const midiAccess = await navigator.requestMIDIAccess();
+    /** @type {WebMidi.MIDIInput} */
+    let currentInput;
+    /**
+     * @param {WebMidi.MIDIMessageEvent} e
+     */
+    const handleMidiMessage = e => faustNode.midiMessage(e.data);
+    const handleStateChange = () => {
+        const { inputs } = midiAccess;
+        if ($selectMidiInput.options.length === inputs.size + 1) return;
+        if (currentInput) currentInput.removeEventListener("midimessage", handleMidiMessage);
+        $selectMidiInput.innerHTML = '<option value="-1" disabled selected>Select...</option>';
+        inputs.forEach((midiInput) => {
+            const { name, id } = midiInput;
+            const option = new Option(name, id);
+            $selectMidiInput.add(option);
+        });
+    };
+    handleStateChange();
+    midiAccess.addEventListener("statechange", handleStateChange);
+    $selectMidiInput.onchange = () => {
+        if (currentInput) currentInput.removeEventListener("midimessage", handleMidiMessage);
+        const id = $selectMidiInput.value;
+        currentInput = midiAccess.inputs.get(id);
+        currentInput.addEventListener("midimessage", handleMidiMessage);
+    };
+};
+
+$buttonDsp.disabled = true;
+$buttonDsp.onclick = () => {
+    if (audioContext.state === "running") {
+        $buttonDsp.textContent = "Suspended";
+        audioContext.suspend();
+    } else if (audioContext.state === "suspended") {
+        $buttonDsp.textContent = "Running";
+        audioContext.resume();
+    }
+}
+
+/**
+ * Creates a Faust audio node for use in the Web Audio API.
+ *
+ * @param {AudioContext} audioContext - The Web Audio API AudioContext to which the Faust audio node will be connected.
+ * @param {string} dspName - The name of the DSP to be loaded.
+ * @param {number} voices - The number of voices to be used for polyphonic DSPs.
+ * @returns {Object} - An object containing the Faust audio node and the DSP metadata.
+ */
+const createFaustNode = async (audioContext, dspName = "template", voices = 0) => {
+    // Import necessary Faust modules and data
+    const { FaustMonoDspGenerator, FaustPolyDspGenerator } = await import("./faustwasm/index.js");
+
+    // Load DSP metadata from JSON
+    /** @type {FaustDspMeta} */
+    const dspMeta = await (await fetch(`./${dspName}.json`)).json();
+
+    // Compile the DSP module from WebAssembly binary data
+    const dspModule = await WebAssembly.compileStreaming(await fetch(`./${dspName}.wasm`));
+
+    // Create an object representing Faust DSP with metadata and module
+    /** @type {FaustDspDistribution} */
+    const faustDsp = { dspMeta, dspModule };
+
+    // Try to load optional mixer and effect modules
+    try {
+        faustDsp.mixerModule = await WebAssembly.compileStreaming(await fetch("./mixerModule.wasm"));
+        faustDsp.effectMeta = await (await fetch(`./${dspName}_effect.json`)).json();
+        faustDsp.effectModule = await WebAssembly.compileStreaming(await fetch(`./${dspName}_effect.wasm`));
+    } catch (e) { }
+
+    /** @type {FaustAudioWorkletNode} */
+    let faustNode;
+
+    // Create either a polyphonic or monophonic Faust audio node based on the number of voices
+    if (voices > 0) {
+        const generator = new FaustPolyDspGenerator();
+        faustNode = await generator.createNode(
+            audioContext,
+            voices,
+            "FaustPolyDSP",
+            { module: faustDsp.dspModule, json: JSON.stringify(faustDsp.dspMeta) },
+            faustDsp.mixerModule,
+            faustDsp.effectModule ? { module: faustDsp.effectModule, json: JSON.stringify(faustDsp.effectMeta) } : undefined
+        );
+    } else {
+        const generator = new FaustMonoDspGenerator();
+        faustNode = await generator.createNode(
+            audioContext,
+            "FaustMonoDSP",
+            { module: faustDsp.dspModule, json: JSON.stringify(faustDsp.dspMeta) }
+        );
+    }
+
+    // Return an object with the Faust audio node and the DSP metadata
+    return { faustNode, dspMeta };
+}
+
+/**
+ * @param {FaustAudioWorkletNode} faustNode 
+ */
+const createFaustUI = async (faustNode) => {
+    const { FaustUI } = await import("./faust-ui/index.js");
+    const $container = document.createElement("div");
+    $container.style.margin = "0";
+    $container.style.position = "absolute";
+    $container.style.overflow = "auto";
+    $container.style.display = "flex";
+    $container.style.flexDirection = "column";
+    $container.style.width = "100%";
+    $container.style.height = "100%";
+    $divFaustUI.appendChild($container);
+    const faustUI = new FaustUI({
+        ui: faustNode.getUI(),
+        root: $container,
+        listenWindowMessage: false,
+        listenWindowResize: true,
+    });
+    faustUI.paramChangeByUI = (path, value) => faustNode.setParamValue(path, value);
+    faustNode.setOutputParamHandler((path, value) => faustUI.paramChangeByDSP(path, value));
+    $container.style.minWidth = `${faustUI.minWidth}px`;
+    $container.style.minHeight = `${faustUI.minHeight}px`;
+    faustUI.resize();
+};
+
+(async () => {
+    const { faustNode, dspMeta: { name } } = await createFaustNode(audioContext, "FAUST_DSP", 16);
+    await createFaustUI(faustNode);
+    faustNode.connect(audioContext.destination);
+    if (faustNode.numberOfInputs) await buildAudioDeviceMenu(faustNode);
+    else $spanAudioInput.hidden = true;
+    if (navigator.requestMIDIAccess) await buildMidiDeviceMenu(faustNode);
+    else $spanMidiInput.hidden = true;
+    $buttonDsp.disabled = false;
+    document.title = name;
+})();

package/assets/standalone/index.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -17,32 +18,40 @@
             margin: 0;
             position: absolute;
         }
+
         main {
             margin: 20px;
             display: flex;
             flex-direction: column;
             flex: 1 1 100%;
         }
+
         main span {
             position: relative;
             display: flex;
         }
+
         main span[hidden] {
             display: none;
         }
+
         main span span {
             margin: 0px 10px;
             flex: 1;
         }
+
         main span select {
             flex: 2;
         }
+
         #dsp-switch {
             margin: 20px auto;
         }
+
         #button-dsp {
             padding: 10px;
         }
+
         #div-faust-ui {
             flex: 1 1 auto;
             display: flex;
@@ -52,6 +61,7 @@
     </style>
     <link rel="stylesheet" href="./faust-ui/index.css">
 </head>
+
 <body>
     <main>
         <span id="audio-input">
@@ -68,6 +78,7 @@
         <div id="div-faust-ui">
         </div>
     </main>
-    <script src="./index.js"></script>
+    <script src="./FAUST_DSP.js"></script>
 </body>
+
 </html>

package/assets/standalone/index.js

@@ -121,18 +121,20 @@ $buttonDsp.onclick = () => {
  * Creates a Faust audio node for use in the Web Audio API.
  *
  * @param {AudioContext} audioContext - The Web Audio API AudioContext to which the Faust audio node will be connected.
- * @returns {Object} - An object containing the Faust audio node, the number of voices (if polyphonic), and the DSP metadata.
+ * @param {string} dspName - The name of the DSP to be loaded.
+ * @param {number} voices - The number of voices to be used for polyphonic DSPs.
+ * @returns {Object} - An object containing the Faust audio node and the DSP metadata.
  */
-const createFaustNode = async (audioContext) => {
+const createFaustNode = async (audioContext, dspName = "template", voices = 0) => {
     // Import necessary Faust modules and data
     const { FaustMonoDspGenerator, FaustPolyDspGenerator } = await import("./faustwasm/index.js");
 
     // Load DSP metadata from JSON
     /** @type {FaustDspMeta} */
-    const dspMeta = await (await fetch("./dspMeta.json")).json();
+    const dspMeta = await (await fetch(`./${dspName}.json`)).json();
 
     // Compile the DSP module from WebAssembly binary data
-    const dspModule = await WebAssembly.compileStreaming(await fetch("./dspModule.wasm"));
+    const dspModule = await WebAssembly.compileStreaming(await fetch(`./${dspName}.wasm`));
 
     // Create an object representing Faust DSP with metadata and module
     /** @type {FaustDspDistribution} */
@@ -141,18 +143,15 @@ const createFaustNode = async (audioContext) => {
     // Try to load optional mixer and effect modules
     try {
         faustDsp.mixerModule = await WebAssembly.compileStreaming(await fetch("./mixerModule.wasm"));
-        faustDsp.effectMeta = await (await fetch("./effectMeta.json")).json();
-        faustDsp.effectModule = await WebAssembly.compileStreaming(await fetch("./effectModule.wasm"));
+        faustDsp.effectMeta = await (await fetch(`./${dspName}_effect.json`)).json();
+        faustDsp.effectModule = await WebAssembly.compileStreaming(await fetch(`./${dspName}_effect.wasm`));
     } catch (e) { }
 
-    // Determine the number of voices based on the mixer module
-    const voices = faustDsp.mixerModule ? 64 : 0;
-
     /** @type {FaustAudioWorkletNode} */
     let faustNode;
 
     // Create either a polyphonic or monophonic Faust audio node based on the number of voices
-    if (voices) {
+    if (voices > 0) {
         const generator = new FaustPolyDspGenerator();
         faustNode = await generator.createNode(
             audioContext,
@@ -171,8 +170,8 @@ const createFaustNode = async (audioContext) => {
         );
     }
 
-    // Return an object with the Faust audio node, the number of voices, and the DSP metadata
-    return { faustNode, voices, dspMeta };
+    // Return an object with the Faust audio node and the DSP metadata
+    return { faustNode, dspMeta };
 }
 
 /**
@@ -203,12 +202,12 @@ const createFaustUI = async (faustNode) => {
 };
 
 (async () => {
-    const { faustNode, voices, dspMeta: { name } } = await createFaustNode(audioContext);
+    const { faustNode, dspMeta: { name } } = await createFaustNode(audioContext, "FAUST_DSP");
     await createFaustUI(faustNode);
     faustNode.connect(audioContext.destination);
     if (faustNode.numberOfInputs) await buildAudioDeviceMenu(faustNode);
     else $spanAudioInput.hidden = true;
-    if (voices && navigator.requestMIDIAccess) await buildMidiDeviceMenu(faustNode);
+    if (navigator.requestMIDIAccess) await buildMidiDeviceMenu(faustNode);
     else $spanMidiInput.hidden = true;
     $buttonDsp.disabled = false;
     document.title = name;

package/assets/standalone/template-poly.html

@@ -11,7 +11,7 @@
             <center><button id="button-dsp">Activate DSP</button></center>
         </span>
     </main>
-    <script src="./template.js"></script>
+    <script src="./FAUST_DSP.js"></script>
     <script>
         (async () => {
 
@@ -23,7 +23,7 @@
             // Create audio context activation button
             const $buttonDsp = document.getElementById("button-dsp");
 
-			// Play some notes in loop
+            // Play some notes in loop
             function play(node) {
                 node.keyOn(0, 60, 100);
                 setTimeout(() => node.keyOn(0, 64, 100), 1000);
@@ -46,7 +46,7 @@
             }
 
             // Create Faust node
-            const { faustNode, voices, dspMeta: { name } } = await createFaustNode(audioContext);
+            const { faustNode, dspMeta: { name } } = await createFaustNode(audioContext, "FAUST_DSP", 16);
 
             // Connect Faust node to audio context
             faustNode.connect(audioContext.destination);

package/assets/standalone/template.html

@@ -11,7 +11,7 @@
             <center><button id="button-dsp">Activate DSP</button></center>
         </span>
     </main>
-    <script src="./template.js"></script>
+    <script src="./FAUST_DSP.js"></script>
     <script>
         (async () => {
 
@@ -36,7 +36,7 @@
             }
 
             // Create Faust node
-            const { faustNode, voices, dspMeta: { name } } = await createFaustNode(audioContext);
+            const { faustNode, dspMeta: { name } } = await createFaustNode(audioContext, "FAUST_DSP");
 
             // Connect Faust node to audio context
             faustNode.connect(audioContext.destination);

package/assets/standalone/template.js

@@ -8,18 +8,20 @@
  * Creates a Faust audio node for use in the Web Audio API.
  *
  * @param {AudioContext} audioContext - The Web Audio API AudioContext to which the Faust audio node will be connected.
- * @returns {Object} - An object containing the Faust audio node, the number of voices (if polyphonic), and the DSP metadata.
+ * @param {string} dspName - The name of the DSP to be loaded.
+ * @param {number} voices - The number of voices to be used for polyphonic DSPs.
+ * @returns {Object} - An object containing the Faust audio node and the DSP metadata.
  */
-const createFaustNode = async (audioContext) => {
+const createFaustNode = async (audioContext, dspName = "template", voices = 0) => {
     // Import necessary Faust modules and data
     const { FaustMonoDspGenerator, FaustPolyDspGenerator } = await import("./faustwasm/index.js");
 
     // Load DSP metadata from JSON
     /** @type {FaustDspMeta} */
-    const dspMeta = await (await fetch("./dspMeta.json")).json();
+    const dspMeta = await (await fetch(`./${dspName}.json`)).json();
 
     // Compile the DSP module from WebAssembly binary data
-    const dspModule = await WebAssembly.compileStreaming(await fetch("./dspModule.wasm"));
+    const dspModule = await WebAssembly.compileStreaming(await fetch(`./${dspName}.wasm`));
 
     // Create an object representing Faust DSP with metadata and module
     /** @type {FaustDspDistribution} */
@@ -28,18 +30,15 @@ const createFaustNode = async (audioContext) => {
     // Try to load optional mixer and effect modules
     try {
         faustDsp.mixerModule = await WebAssembly.compileStreaming(await fetch("./mixerModule.wasm"));
-        faustDsp.effectMeta = await (await fetch("./effectMeta.json")).json();
-        faustDsp.effectModule = await WebAssembly.compileStreaming(await fetch("./effectModule.wasm"));
+        faustDsp.effectMeta = await (await fetch(`./${dspName}_effect.json`)).json();
+        faustDsp.effectModule = await WebAssembly.compileStreaming(await fetch(`./${dspName}_effect.wasm`));
     } catch (e) { }
 
-    // Determine the number of voices based on the mixer module
-    const voices = faustDsp.mixerModule ? 64 : 0;
-
     /** @type {FaustAudioWorkletNode} */
     let faustNode;
 
     // Create either a polyphonic or monophonic Faust audio node based on the number of voices
-    if (voices) {
+    if (voices > 0) {
         const generator = new FaustPolyDspGenerator();
         faustNode = await generator.createNode(
             audioContext,
@@ -58,6 +57,6 @@ const createFaustNode = async (audioContext) => {
         );
     }
 
-    // Return an object with the Faust audio node, the number of voices, and the DSP metadata
-    return { faustNode, voices, dspMeta };
+    // Return an object with the Faust audio node and the DSP metadata
+    return { faustNode, dspMeta };
 }