@grame/faustwasm 0.4.10 → 0.5.1

package/README.md

@@ -59,17 +59,34 @@ node scripts/faust2wasm.js test/poly.dsp test/out -poly
 ```
 will create a set of files: `index.js`, `dsp-module.wasm`, `dsp-meta.json`, `index.html` (and possibly `effect-module.wasm`, `effect-meta.json`) in the `out` folder.
 
-
-#### Creating a Progressive Web Application of a Faust DSP
+#### Creating a Progressive Web Application (PWA) of a Faust DSP
 
 You can create a standalone Progressive Web Application using the same command line:
 
+```bash
+node scripts/faust2wasm.js test/rev.dsp test/rev -pwa
+```
+will create a set of files: `icon.png`, `service-worker.js`, `manifest.json`, `index.js`, `dsp-module.wasm`, `dsp-meta.json`, `index.html`, and the `faustwasm`, `faust-ui` folders in the `rev` folder. 
+
+The folder contains the necessary ressources to deploy the Faust application as a PWA on a server, to be installed and used offline. Note that audio files used by the `soundfile` primitives in the DSP code will have to be mannually added in the folder. 
+
+A standalone polyphonic and MIDI standalone Progressive Web Application can be created with:
+
+```bash
+node scripts/faust2wasm.js test/organ1.dsp test/organ1 -poly -pwa
+```
+will create a set of files: `icon.png`, `service-worker.js`, `manifest.json`, `index.js`, `dsp-module.wasm`, `dsp-meta.json`, `effect-module.wasm`, `effect-meta.json`, `index.html`, and the `faustwasm`, `faust-ui` folders in the `organ1` folder.
+
+#### Creating a standalone version of a Faust DSP, with audio and MIDI devices selector
+
+You can create a standalone  using the same command line:
+
 ```bash
 node scripts/faust2wasm.js test/rev.dsp test/rev -standalone
 ```
 will create a set of files: `icon.png`, `service-worker.js`, `manifest.json`, `index.js`, `dsp-module.wasm`, `dsp-meta.json`, `index.html`, and the `faustwasm`, `faust-ui` folders in the `rev` folder. 
 
-The folder contains the necessary ressources to deploy the Faust application as a PWA on a server, to be installed and used offline. Note that audio files used by the `soundfile` primitives in the DSP code will have to be mannually added in the folder. To test, be sure to launch a local web server at the `test` folder level, then go inside `test\rev` folder. 
+The folder contains the necessary ressources to deploy the Faust application as a PWA on a server, to be installed and used offline. Note that audio files used by the `soundfile` primitives in the DSP code will have to be mannually added in the folder. 
 
 A standalone polyphonic and MIDI standalone Progressive Web Application can be created with:
 
@@ -78,8 +95,6 @@ node scripts/faust2wasm.js test/organ1.dsp test/organ1 -poly -standalone
 ```
 will create a set of files: `icon.png`, `service-worker.js`, `manifest.json`, `index.js`, `dsp-module.wasm`, `dsp-meta.json`, `effect-module.wasm`, `effect-meta.json`, `index.html`, and the `faustwasm`, `faust-ui` folders in the `organ1` folder.
 
-To test, be sure to launch a local web server at the `test` folder level, then go inside `test\organ1` folder. 
-
 #### Generate SVG Diagrams of a Faust DSP
 
 For example:

package/assets/standalone/create-node.js

@@ -75,4 +75,31 @@ const createFaustNode = async (audioContext, dspName = "template", voices = 0, s
     return { faustNode, dspMeta };
 }
 
-export default createFaustNode;
+/**
+ * Connects an audio input stream to a Faust audio node.
+ * 
+ * @param {AudioContext} audioContext - The Web Audio API AudioContext to which the Faust audio node is connected.
+ * @param {string} id - The ID of the audio input device to connect.
+ * @param {FaustNode} faustNode - The Faust audio node to which the audio input stream will be connected.
+ * @param {MediaStreamAudioSourceNode} inputStreamNode - The audio input stream node to be connected to the Faust audio node.
+ * @returns {Promise<MediaStreamAudioSourceNode>} - The audio input stream node connected to the Faust audio node.
+ */
+async function connectToAudioInput(audioContext, id, faustNode, inputStreamNode) {
+    const constraints = {
+        audio: {
+            echoCancellation: false,
+            noiseSuppression: false,
+            autoGainControl: false,
+            deviceId: id ? { exact: id } : undefined,
+        },
+    };
+    const stream = await navigator.mediaDevices.getUserMedia(constraints);
+    if (stream) {
+        if (inputStreamNode) inputStreamNode.disconnect();
+        inputStreamNode = audioContext.createMediaStreamSource(stream);
+        inputStreamNode.connect(faustNode);
+    }
+    return inputStreamNode;
+};
+
+export { createFaustNode, connectToAudioInput };

package/assets/standalone/index-pwa.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<link rel="manifest" href="./manifest.json">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Faust DSP</title>
+    <style>
+        body {
+            color: #b0b0b0;
+            background-color: #1f1f1f;
+            display: flex;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            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;
+            position: relative;
+            flex-direction: column;
+            color: black;
+        }
+    </style>
+    <link rel="stylesheet" href="./faust-ui/index.css">
+</head>
+
+<body>
+    <main>
+        <div id="div-faust-ui">
+        </div>
+    </main>
+    <script src="./index.js"></script>
+</body>
+
+</html>

package/assets/standalone/index-pwa.js

@@ -0,0 +1,139 @@
+// Set to > 0 if the DSP is polyphonic
+const FAUST_DSP_VOICES = 0;
+
+/**
+ * @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
+ */
+
+/**
+ * Registers the service worker.
+ */
+if ("serviceWorker" in navigator) {
+    window.addEventListener("load", () => {
+        navigator.serviceWorker.register("./service-worker.js")
+            .then(reg => console.log("Service Worker registered", reg))
+            .catch(err => console.log("Service Worker registration failed", err));
+    });
+}
+
+/** @type {HTMLDivElement} */
+const $divFaustUI = document.getElementById("div-faust-ui");
+
+/** @type {typeof AudioContext} */
+const AudioCtx = window.AudioContext || window.webkitAudioContext;
+const audioContext = new AudioCtx({ latencyHint: 0.00001 });
+audioContext.destination.channelInterpretation = "discrete";
+audioContext.suspend();
+
+/**
+ * @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 { createFaustNode } = await import("./create-node.js");
+
+    // To test the ScriptProcessorNode mode
+    // const { faustNode, dspMeta: { name } } = await createFaustNode(audioContext, "osc", FAUST_DSP_VOICES, true);
+    const { faustNode, dspMeta: { name } } = await createFaustNode(audioContext, "osc", FAUST_DSP_VOICES);
+    if (!faustNode) throw new Error("Faust DSP not compiled");
+
+    // Create the Faust UI
+    await createFaustUI(faustNode);
+
+    // Connect the Faust node to the audio output
+    faustNode.connect(audioContext.destination);
+
+    // Connect the Faust node to the audio input
+    if (faustNode.getNumInputs() > 0) {
+        const { connectToAudioInput } = await import("./create-node.js");
+        await connectToAudioInput(audioContext, null, faustNode, null);
+    }
+
+    // Activate sensor listeners
+    await faustNode.listenSensors();
+
+    // Function to initialize MIDI
+    function initMIDI() {
+        // Check if the browser supports the Web MIDI API
+        if (navigator.requestMIDIAccess) {
+            navigator.requestMIDIAccess()
+                .then(onMIDISuccess, onMIDIFailure);
+        } else {
+            console.log("Web MIDI API is not supported in this browser.");
+        }
+    }
+
+    // Success callback for requesting MIDI access
+    function onMIDISuccess(midiAccess) {
+        console.log("MIDI Access obtained.");
+        // Iterate through all available MIDI inputs
+        for (let input of midiAccess.inputs.values()) {
+            // Attach the event listener to each input
+            input.onmidimessage = handleMIDIMessage;
+            console.log(`Connected to input: ${input.name}`);
+        }
+    }
+
+    // Failure callback for requesting MIDI access
+    function onMIDIFailure() {
+        console.error("Failed to access MIDI devices.");
+    }
+
+    // Dummy event handler for MIDI messages
+    function handleMIDIMessage(event) {
+        faustNode.midiMessage(event.data);
+    }
+
+    // Initialize the MIDI setup
+    if (FAUST_DSP_VOICES > 0) {
+        initMIDI();
+    }
+
+})();
+
+// Function to resume AudioContext on user interaction
+function resumeAudioContext() {
+    if (audioContext.state === 'suspended') {
+        audioContext.resume();
+    }
+}
+
+// Add event listeners for user interactions
+window.addEventListener('click', resumeAudioContext);
+window.addEventListener('touchstart', resumeAudioContext);
+
+// Optional: Remove event listeners once the context is resumed
+audioContext.onstatechange = function () {
+    if (audioContext.state === 'running') {
+        window.removeEventListener('click', resumeAudioContext);
+        window.removeEventListener('touchstart', resumeAudioContext);
+    }
+};

package/assets/standalone/index-template.js

@@ -2,7 +2,7 @@
 const FAUST_DSP_VOICES = 0;
 
 (async () => {
-    const { default: createFaustNode } = await import("./create-node.js");
+    const { createFaustNode } = await import("./create-node.js");
 
     // Create audio context
     const AudioCtx = window.AudioContext || window.webkitAudioContext;
@@ -37,12 +37,18 @@ const FAUST_DSP_VOICES = 0;
     const { faustNode, dspMeta: { name } } = await createFaustNode(audioContext, "FAUST_DSP_NAME", FAUST_DSP_VOICES);
     if (!faustNode) throw new Error("Faust DSP not compiled");
 
-    // Connect Faust node to audio context
+    // Connect the Faust node to the audio output
     faustNode.connect(audioContext.destination);
 
+    // Connect the Faust node to the audio input
+    if (faustNode.getNumInputs() > 0) {
+        const { connectToAudioInput } = await import("./create-node.js");
+        await connectToAudioInput(audioContext, null, faustNode, null);
+    }
+
     // Create Faust node activation button
     $buttonDsp.disabled = false;
-    
+
     // Set page title to the DSP name
     document.title = name;
 })();

package/assets/standalone/index.js

@@ -44,8 +44,10 @@ $buttonDsp.disabled = true;
  * @param {FaustAudioWorkletNode} faustNode 
  */
 const buildAudioDeviceMenu = async (faustNode) => {
-    /** @type {MediaStreamAudioSourceNode} */
-    let inputStreamNode;
+
+    const { connectToAudioInput } = await import("./create-node.js");
+
+    let inputStreamNode = null;
     const handleDeviceChange = async () => {
         const devicesInfo = await navigator.mediaDevices.enumerateDevices();
         $selectAudioInput.innerHTML = "";
@@ -61,31 +63,14 @@ const buildAudioDeviceMenu = async (faustNode) => {
     navigator.mediaDevices.addEventListener("devicechange", handleDeviceChange)
     $selectAudioInput.onchange = async () => {
         const id = $selectAudioInput.value;
-        const constraints = {
-            audio: {
-                echoCancellation: false,
-                noiseSuppression: false,
-                autoGainControl: 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
+        if (faustNode.getNumInputs() > 0) {
+            inputStreamNode = await connectToAudioInput(audioContext, id, faustNode, inputStreamNode);
         }
     };
-    const defaultStream = await navigator.mediaDevices.getUserMedia(defaultConstraints);
-    if (defaultStream) {
-        inputStreamNode = audioContext.createMediaStreamSource(defaultStream);
-        inputStreamNode.connect(faustNode);
+
+    // Connect to the default audio input device
+    if (faustNode.getNumInputs() > 0) {
+        inputStreamNode = await connectToAudioInput(audioContext, null, faustNode, inputStreamNode);
     }
 };
 
@@ -149,7 +134,7 @@ const createFaustUI = async (faustNode) => {
 };
 
 (async () => {
-    const { default: createFaustNode } = await import("./create-node.js");
+    const { createFaustNode } = await import("./create-node.js");
     // To test the ScriptProcessorNode mode
     // const { faustNode, dspMeta: { name } } = await createFaustNode(audioContext, "FAUST_DSP_NAME", FAUST_DSP_VOICES, true);
     const { faustNode, dspMeta: { name } } = await createFaustNode(audioContext, "FAUST_DSP_NAME", FAUST_DSP_VOICES);

package/build

@@ -0,0 +1,25 @@
+node scripts/faust2wasm.js /Users/letz/Developpements/GameLAN/atomicro/atomicro.dsp /Users/letz/Developpements/sletz.github.io/atomicro -pwa 
+
+node scripts/faust2wasm.js /Users/letz/Developpements/GameLAN/attackey/attackey.dsp /Users/letz/Developpements/sletz.github.io/attackey -pwa 
+
+node scripts/faust2wasm.js /Users/letz/Developpements/GameLAN/baliphone/baliphone.dsp /Users/letz/Developpements/sletz.github.io/baliphone -pwa 
+
+node scripts/faust2wasm.js /Users/letz/Developpements/GameLAN/drone/drone.dsp /Users/letz/Developpements/sletz.github.io/drone -pwa 
+
+node scripts/faust2wasm.js /Users/letz/Developpements/GameLAN/sequenceur/sequenceur.dsp /Users/letz/Developpements/sletz.github.io/sequenceur -pwa 
+
+node scripts/faust2wasm.js /Users/letz/Developpements/GameLAN/shakerxy/shakerxy.dsp /Users/letz/Developpements/sletz.github.io/shakerxy -pwa 
+
+node scripts/faust2wasm.js /Users/letz/Developpements/GameLAN/sinusoide/sinusoide.dsp /Users/letz/Developpements/sletz.github.io/sinusoide -pwa 
+
+
+#node scripts/faust2wasm.js /Users/letz/Developpements/GameLAN/test.dsp /Users/letz/Developpements/sletz.github.io/out -standalone 
+#node scripts/faust2wasm.js test/organ.dsp /Users/letz/Developpements/sletz.github.io/organ -poly -standalone 
+
+#node scripts/faust2wasm.js test/organ1.dsp /Users/letz/Developpements/sletz.github.io/organ1 -poly -standalone 
+
+#node scripts/faust2wasm.js test/osc2.dsp /Users/letz/Developpements/sletz.github.io/osc2 -standalone 
+
+#node scripts/faust2wasm.js /Users/letz/Developpements/faust-sampler/sampler.dsp  /Users/letz/Developpements/sletz.github.io/sampler -poly -standalone 
+
+#node scripts/faust2wasm.js /Users/letz/Developpements/faust-sampler/piano.dsp  /Users/letz/Developpements/sletz.github.io/piano -poly -standalone 

package/package.json

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

package/scripts/faust2wasm.js

@@ -2,13 +2,13 @@
 //@ts-check
 import * as process from "process";
 import faust2wasmFiles from "../src/faust2wasmFiles.js";
-import { copyWebStandaloneAssets, copyWebTemplateAssets } from "../src/copyWebStandaloneAssets.js";
+import { copyWebStandaloneAssets, copyWebPWAAssets, copyWebTemplateAssets } from "../src/copyWebStandaloneAssets.js";
 
 const argv = process.argv.slice(2);
 
 if (argv[0] === "-help" || argv[0] === "-h") {
     console.log(`
-faust2wasm.js <file.dsp> <outputDir> [-poly] [-standalone] [-no-template]
+faust2wasm.js <file.dsp> <outputDir> [-poly] [-standalone] [-pwa] [-no-template]
 Generates WebAssembly and metadata JSON files of a given Faust DSP.
 `);
     process.exit();
@@ -22,6 +22,10 @@ const $standalone = argv.indexOf("-standalone");
 const standalone = $standalone !== -1;
 if (standalone) argv.splice($standalone, 1);
 
+const $pwa = argv.indexOf("-pwa");
+const pwa = $pwa !== -1;
+if (pwa) argv.splice($pwa, 1);
+
 const $noTemplate = argv.indexOf("-no-template");
 const noTemplate = $noTemplate !== -1;
 if (noTemplate) argv.splice($noTemplate, 1);
@@ -35,6 +39,8 @@ const dspName = fileName.replace(/\.dsp$/, '');
     const { dspMeta, effectMeta } = await faust2wasmFiles(inputFile, outputDir, argvFaust, poly);
     if (standalone) {
         copyWebStandaloneAssets(outputDir, dspName, poly, !!effectMeta);
+    } else if (pwa) {
+        copyWebPWAAssets(outputDir, dspName, poly, !!effectMeta);
     } else if (!noTemplate) {
         copyWebTemplateAssets(outputDir, dspName, poly, !!effectMeta);
     }

package/src/copyWebStandaloneAssets.d.ts

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

package/src/copyWebStandaloneAssets.js

@@ -15,7 +15,6 @@ const __filename = fileURLToPath(import.meta.url);
  */
 const copyWebStandaloneAssets = (outputDir, dspName, poly = false, effect = false) => {
     console.log(`Writing assets files.`)
-    const assetsPath = path.join(__dirname, "../assets/standalone");
     if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir);
 
     const findAndReplace = ["FAUST_DSP_NAME", dspName];
@@ -30,7 +29,6 @@ const copyWebStandaloneAssets = (outputDir, dspName, poly = false, effect = fals
     cpSyncModify(templateJSPath, outputDir + `/index.js`, ...findAndReplace);
 
     const templateHTMLPath = path.join(__dirname, "../assets/standalone/index.html");
-    //cpSyncModify(templateHTMLPath, outputDir + `/${dspName}.html`, "FAUST_DSP_NAME", dspName);
     cpSyncModify(templateHTMLPath, outputDir + `/index.html`, ...findAndReplace);
 
     const templateWorkerPath = path.join(__dirname, "../assets/standalone/service-worker.js");
@@ -49,6 +47,45 @@ const copyWebStandaloneAssets = (outputDir, dspName, poly = false, effect = fals
     cpSyncModify(templateManifestPath, outputDir + `/manifest.json`, ...findAndReplace);
 };
 
+/**
+ * @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.
+ * @param {boolean} [effect] - Whether the DSP has an effect module.
+ */
+const copyWebPWAAssets = (outputDir, dspName, poly = false, effect = false) => {
+    console.log(`Writing assets files.`)
+    if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir);
+
+    const findAndReplace = ["FAUST_DSP_NAME", dspName];
+    if (poly) findAndReplace.push("FAUST_DSP_VOICES = 0", "FAUST_DSP_VOICES = 16");
+    if (poly && effect) findAndReplace.push("FAUST_DSP_HAS_EFFECT = false", "FAUST_DSP_HAS_EFFECT = true");
+
+    // Copy some files
+    const createNodeJSPath = path.join(__dirname, "../assets/standalone/create-node.js");
+    cpSyncModify(createNodeJSPath, outputDir + `/create-node.js`, ...findAndReplace);
+
+    const templateJSPath = path.join(__dirname, "../assets/standalone/index-pwa.js");
+    cpSyncModify(templateJSPath, outputDir + `/index.js`, ...findAndReplace);
+
+    const templateHTMLPath = path.join(__dirname, "../assets/standalone/index-pwa.html");
+    cpSyncModify(templateHTMLPath, outputDir + `/index.html`, ...findAndReplace);
+
+    const templateWorkerPath = path.join(__dirname, "../assets/standalone/service-worker.js");
+    cpSyncModify(templateWorkerPath, outputDir + `/service-worker.js`, ...findAndReplace);
+
+    const templateIconPath = path.join(__dirname, "../assets/standalone/icon.png");
+    cpSync(templateIconPath, outputDir + `/icon.png`);
+
+    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");
+
+    const templateManifestPath = path.join(__dirname, "../assets/standalone/manifest.json");
+    cpSyncModify(templateManifestPath, outputDir + `/manifest.json`, ...findAndReplace);
+};
 /**
  * @param {string} outputDir - The output directory.
  * @param {string} dspName - The name of the DSP to be loaded.
@@ -78,5 +115,5 @@ const copyWebTemplateAssets = (outputDir, dspName, poly = false, effect = false)
     cpSync(faustwasmPath, outputDir + "/faustwasm");
 };
 
-export { copyWebStandaloneAssets, copyWebTemplateAssets };
+export { copyWebStandaloneAssets, copyWebPWAAssets, copyWebTemplateAssets };