@grame/faustwasm 0.0.49 → 0.0.51

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,215 @@
+/**
+ * @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 };
+
+    /** @type {FaustAudioWorkletNode} */
+    let faustNode;
+
+    // Create either a polyphonic or monophonic Faust audio node based on the number of voices
+    if (voices > 0) {
+
+        // 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) { }
+
+        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,38 +121,38 @@ $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} */
     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("./effectMeta.json")).json();
-        faustDsp.effectModule = await WebAssembly.compileStreaming(await fetch("./effectModule.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) {
+
+        // 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) { }
+
         const generator = new FaustPolyDspGenerator();
         faustNode = await generator.createNode(
             audioContext,
@@ -171,8 +171,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 +203,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,38 +8,38 @@
  * 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} */
     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("./effectMeta.json")).json();
-        faustDsp.effectModule = await WebAssembly.compileStreaming(await fetch("./effectModule.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) {
+
+        // 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) { }
+
         const generator = new FaustPolyDspGenerator();
         faustNode = await generator.createNode(
             audioContext,
@@ -58,6 +58,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 };
 }

package/fileutils.js

@@ -11,8 +11,8 @@ const __filename = fileURLToPath(import.meta.url);
 */
 
 /**
- * @param {string} src
- * @param {string} dest
+ * @param {string} src - The source path.
+ * @param {string} dest - The destination path.
  */
 const cpSync = (src, dest) => {
     if (!fs.existsSync(src)) return;
@@ -25,7 +25,34 @@ const cpSync = (src, dest) => {
 };
 
 /**
- * @param {string} dir
+ * @param {string} src - The source path of the file to modify and copy.
+ * @param {string} dest - The destination path.
+ * @param {string} find - The string to find.
+ * @param {string} replace - The string to replace.
+ */
+const cpSyncModify = (src, dest, find, replace) => {
+    fs.readFile(src, 'utf8', function (err, data) {
+        if (err) {
+            console.error(err);
+            return;
+        }
+
+        // Create a regular expression from the 'find' string
+        const regex = new RegExp(find, 'g');
+
+        // Replace 'find' with 'replace'
+        let modifiedData = data.replace(regex, replace);
+
+        // Write the modified data to a new file
+        fs.writeFile(dest, modifiedData, 'utf8', function (err) {
+            if (err) {
+                console.error(err);
+            }
+        });
+    });
+}
+/**
+ * @param {string} dir - The directory to remove.
  */
 const rmSync = (dir) => {
     if (!fs.existsSync(dir)) return;
@@ -37,4 +64,4 @@ const rmSync = (dir) => {
     }
 };
 
-export { cpSync, rmSync };
+export { cpSync, cpSyncModify, rmSync };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grame/faustwasm",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "description": "WebAssembly version of Faust Compiler",
   "main": "dist/cjs/index.js",
   "types": "dist/esm/index.d.ts",

package/scripts/faust2wasm.js

@@ -2,7 +2,7 @@
 //@ts-check
 import * as process from "process";
 import faust2wasmFiles from "../src/faust2wasmFiles.js";
-import { copyWebStandaloneAssets, copyTemplate } from "../src/copyWebStandaloneAssets.js";
+import { copyWebStandaloneAssets, copyWebTemplateAssets } from "../src/copyWebStandaloneAssets.js";
 
 const argv = process.argv.slice(2);
 
@@ -23,12 +23,14 @@ const standalone = $standalone !== -1;
 if (standalone) argv.splice($standalone, 1);
 
 const [inputFile, outputDir, ...argvFaust] = argv;
+const fileName = inputFile.split('/').pop();
+const dspName = fileName.replace(/\.dsp$/, '');
 
 (async () => {
     await faust2wasmFiles(inputFile, outputDir, argvFaust, poly);
     if (standalone) {
-        copyWebStandaloneAssets(outputDir);
+        copyWebStandaloneAssets(outputDir, dspName, poly);
     } else {
-        copyTemplate(outputDir, poly);
+        copyWebTemplateAssets(outputDir, dspName, poly);
     }
 })();

package/src/copyWebStandaloneAssets.d.ts

@@ -1,4 +1,4 @@
-declare const copyWebStandaloneAssets: (outputDir: string) => void;
-declare const copyTemplate: (outputDir: string, poly: boolean) => void;
+declare const copyWebStandaloneAssets: (outputDir: string, dspName: string, poly: boolean) => void;
+declare const copyWebTemplateAssets: (outputDir: string, dspName: string, poly: boolean) => void;
 
-export { copyWebStandaloneAssets, copyTemplate };
+export { copyWebStandaloneAssets, copyWebTemplateAssets };

package/src/copyWebStandaloneAssets.js

@@ -1,41 +1,56 @@
 //@ts-check
 import * as fs from "fs";
 import * as path from "path";
-import { cpSync, rmSync } from "../fileutils.js";
+import { cpSync, cpSyncModify, rmSync } from "../fileutils.js";
 import { fileURLToPath } from "url";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const __filename = fileURLToPath(import.meta.url);
 
 /**
- * @param {string} outputDir
+ * @param {string} outputDir - The output directory.
+ * @param {string} dspName - The name of the DSP to be loaded.
+ * @param {boolean} [poly] - Whether the DSP is polyphonic.
  */
-const copyWebStandaloneAssets = (outputDir) => {
+const copyWebStandaloneAssets = (outputDir, dspName, poly = false) => {
     console.log(`Writing assets files.`)
     const assetsPath = path.join(__dirname, "../assets/standalone");
     if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir);
-    // Copy all files
-    cpSync(assetsPath, outputDir);
-    // Then remove template files
-    rmSync(path.join(outputDir, "/template.js"));
-    rmSync(path.join(outputDir, "/template.html"));
-    rmSync(path.join(outputDir, "/template-poly.html"));
+
+    // Copy some files
+    const templateJSPath = (poly) ? path.join(__dirname, "../assets/standalone/index-poly.js") : path.join(__dirname, "../assets/standalone/index.js");
+    cpSyncModify(templateJSPath, outputDir + `/${dspName}.js`, "FAUST_DSP", dspName);
+
+    const templateHTMLPath = path.join(__dirname, "../assets/standalone/index.html");
+    cpSyncModify(templateHTMLPath, outputDir + `/${dspName}.html`, "FAUST_DSP", dspName);
+
+    const faustwasmPath = path.join(__dirname, "../assets/standalone/faustwasm");
+    cpSync(faustwasmPath, outputDir + "/faustwasm");
+
+    const faustuiPath = path.join(__dirname, "../assets/standalone/faust-ui");
+    cpSync(faustuiPath, outputDir + "/faust-ui");
 };
 
 /**
- * @param {string} outputDir
+ * @param {string} outputDir - The output directory.
+ * @param {string} dspName - The name of the DSP to be loaded.
+ * @param {boolean} [poly] - Whether the DSP is polyphonic.
  */
-const copyTemplate = (outputDir, poly = false) => {
-    console.log(`Writing index file.`)
+const copyWebTemplateAssets = (outputDir, dspName, poly = false) => {
+
+    // Create output directory if it doesn't exist
     if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir);
+
     // Copy some files
     const templateJSPath = path.join(__dirname, "../assets/standalone/template.js");
+    cpSync(templateJSPath, outputDir + `/${dspName}.js`);
+
     const templateHTMLPath = (poly) ? path.join(__dirname, "../assets/standalone/template-poly.html") : path.join(__dirname, "../assets/standalone/template.html");
+    cpSyncModify(templateHTMLPath, outputDir + `/${dspName}.html`, "FAUST_DSP", dspName);
+
     const faustwasmPath = path.join(__dirname, "../assets/standalone/faustwasm");
-    cpSync(templateJSPath, outputDir + "/template.js");
-    cpSync(templateHTMLPath, outputDir + "/template.html");
     cpSync(faustwasmPath, outputDir + "/faustwasm");
 };
 
-export { copyWebStandaloneAssets, copyTemplate };
+export { copyWebStandaloneAssets, copyWebTemplateAssets };
 

package/src/faust2wasmFiles.js

@@ -27,11 +27,14 @@ const faust2wasmFiles = async (inputFile, outputDir, argv = [], poly = false) =>
     console.log(`Reading file ${inputFile}`);
     const code = fs.readFileSync(inputFile, { encoding: "utf8" });
 
+    const fileName = inputFile.split('/').pop();
+    const dspName = fileName.replace(/\.dsp$/, '');
+
     if (!argv.find(a => a === "-I")) argv.push("-I", "libraries/");
-    const dspModulePath = path.join(outputDir, "dspModule.wasm");
-    const dspMetaPath = path.join(outputDir, "dspMeta.json");
-    const effectModulePath = path.join(outputDir, "effectModule.wasm");
-    const effectMetaPath = path.join(outputDir, "effectMeta.json");
+    const dspModulePath = path.join(outputDir, `${dspName}.wasm`);
+    const dspMetaPath = path.join(outputDir, `${dspName}.json`);
+    const effectModulePath = path.join(outputDir, `${dspName}_effect.wasm`);
+    const effectMetaPath = path.join(outputDir, `${dspName}_effect.json`);
     const mixerModulePath = path.join(outputDir, "mixerModule.wasm");
     /** @type {Uint8Array} */
     let dspModule;

package/test/midi.dsp

@@ -0,0 +1,8 @@
+
+import("stdfaust.lib");
+
+process = os.osc(freq)*vol
+with {
+    freq = hslider("Freq[midi:ctrl 1 ]", 200, 200, 2000, 0.01);
+    vol = hslider("Volume[midi:ctrl 7 ]", 0.5, 0, 1, 0.01);
+};

package/test/organ1.dsp

@@ -1,6 +1,6 @@
 import("stdfaust.lib");
 timbre(f) = os.osc(f)*0.5 + os.osc(f*2)*0.25 + os.osc(f*3)*0.125;
-effect = _*(hslider("Left", 0.1, 0, 1, 0.01)), _*(hslider("Right", 0.0, 0, 1, 0.01));
+effect = _*(hslider("Left", 0.1, 0, 1, 0.01)), _*(hslider("Right", 0.1, 0, 1, 0.01));
 process = timbre(hslider("freq", 440, 20, 10000, 1))
 	* hslider("gain", 0.0, 0, 1, 0.01)
 	* (button("gate") : en.adsr(0.1,0.1,0.98,1.5));