@grame/faust-web-component 0.1.1 → 0.2.1

package/package.json

@@ -1,6 +1,8 @@
 {
     "name": "@grame/faust-web-component",
-    "version": "0.1.1",
+    "description": "Web component embedding the Faust Compiler",
+    "version": "0.2.1",
+    "module": "dist/faust-web-component.js",
     "type": "module",
     "scripts": {
         "dev": "vite",

package/src/common.ts

@@ -1,4 +1,4 @@
-import { FaustCompiler, FaustMonoDspGenerator, FaustPolyDspGenerator, FaustSvgDiagrams, LibFaust, instantiateFaustModuleFromFile } from "@grame/faustwasm"
+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"
@@ -75,7 +75,8 @@ export async function accessMIDIDevice(
     });
 }
 
-export const midiInputCallback = (node: IFaustPolyWebAudioNode | undefined) => {
+// Set up MIDI input callback
+export const midiInputCallback = (node: IFaustMonoWebAudioNode | IFaustPolyWebAudioNode) => {
     return (data) => {
 
         const cmd = data[0] >> 4;
@@ -89,4 +90,25 @@ export const midiInputCallback = (node: IFaustPolyWebAudioNode | undefined) => {
         else if (cmd === 11) node.ctrlChange(channel, data1, data2);
         else if (cmd === 14) node.pitchWheel(channel, (data2 * 128.0 + data1));
     }
+}
+
+// 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) {
+        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;
+
+        return { midi, nvoices };
+    } else {
+        return { midi: false, nvoices: -1 };
+    }
 }

package/src/faust-editor.ts

@@ -3,7 +3,7 @@ import { IFaustMonoWebAudioNode } from "@grame/faustwasm"
 import { FaustUI } from "@shren/faust-ui"
 import faustCSS from "@shren/faust-ui/dist/esm/index.css?inline"
 import Split from "split.js"
-import { faustPromise, audioCtx, compiler, svgDiagrams, mono_generator, getInputDevices, deviceUpdateCallbacks } from "./common"
+import { faustPromise, audioCtx, compiler, svgDiagrams, mono_generator, poly_generator, getInputDevices, deviceUpdateCallbacks, accessMIDIDevice, midiInputCallback, extractMidiAndNvoices } from "./common"
 import { createEditor, setError, clearError } from "./editor"
 import { Scope } from "./scope"
 import faustSvg from "./faustText.svg"
@@ -265,6 +265,9 @@ export default class FaustEditor extends HTMLElement {
         let analyser: AnalyserNode | undefined
         let scope: Scope | undefined
         let spectrum: Scope | undefined
+        let gmidi = false
+        let gnvoices = -1
+
 
         runButton.onclick = async () => {
             if (audioCtx.state === "suspended") {
@@ -273,8 +276,19 @@ export default class FaustEditor extends HTMLElement {
             await faustPromise
             // Compile Faust code
             const code = editor.state.doc.toString()
+            let generator = null
             try {
+                // Compile Faust code to access JSON metadata
                 await mono_generator.compile(compiler, "main", code, "")
+                const json = mono_generator.getMeta()
+                let { midi, nvoices } = extractMidiAndNvoices(json);
+                gmidi = midi;
+                gnvoices = nvoices;
+
+                // Build the generator
+                generator = nvoices > 0 ? poly_generator : mono_generator;
+                await generator.compile(compiler, "main", code, "");
+
             } catch (e: any) {
                 setError(editor, e)
                 return
@@ -284,7 +298,11 @@ export default class FaustEditor extends HTMLElement {
 
             // Create an audio node from compiled Faust
             if (node !== undefined) node.disconnect()
-            node = (await mono_generator.createNode(audioCtx))!
+            if (gnvoices > 0) {
+                node = (await poly_generator.createNode(audioCtx, gnvoices))!
+            } else {
+                node = (await mono_generator.createNode(audioCtx))!
+            }
             if (node.numberOfInputs > 0) {
                 audioInputSelector.disabled = false
                 updateInputDevices(await getInputDevices())
@@ -298,6 +316,18 @@ export default class FaustEditor extends HTMLElement {
             for (const tabButton of tabButtons) {
                 tabButton.disabled = false
             }
+
+            // Access MIDI device
+            if (gmidi) {
+                accessMIDIDevice(midiInputCallback(node))
+                    .then(() => {
+                        console.log('Successfully connected to the MIDI device.');
+                    })
+                    .catch((error) => {
+                        console.error('Error accessing MIDI device:', error.message);
+                    });
+            }
+
             openSidebar()
             // Clear old tab contents
             for (const tab of tabContents) {
@@ -310,13 +340,16 @@ export default class FaustEditor extends HTMLElement {
             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)
+
             // 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))
+
             // Create SVG block diagram
             setSVG(svgDiagrams.from("main", code, "")["process.svg"])
         }

package/src/faust-widget.ts

@@ -4,7 +4,7 @@ import faustSvg from "./faustText.svg"
 import { IFaustMonoWebAudioNode } from "@grame/faustwasm"
 import { IFaustPolyWebAudioNode } from "@grame/faustwasm"
 import { FaustUI } from "@shren/faust-ui"
-import { faustPromise, audioCtx, mono_generator, poly_generator, compiler, getInputDevices, deviceUpdateCallbacks, accessMIDIDevice, midiInputCallback } from "./common"
+import { faustPromise, audioCtx, mono_generator, poly_generator, compiler, getInputDevices, deviceUpdateCallbacks, accessMIDIDevice, midiInputCallback, extractMidiAndNvoices } from "./common"
 
 const template = document.createElement("template")
 template.innerHTML = `
@@ -111,33 +111,55 @@ export default class FaustWidget extends HTMLElement {
         faustPromise.then(() => powerButton.disabled = false)
 
         let on = false
-        //let node: IFaustMonoWebAudioNode | undefined
-        let node: IFaustPolyWebAudioNode | undefined
+        let gmidi = false
+        let gnvoices = -1
+        let node: IFaustMonoWebAudioNode | IFaustPolyWebAudioNode
         let input: MediaStreamAudioSourceNode | undefined
         let faustUI: FaustUI
 
         const setup = async () => {
             await faustPromise
-            // Compile Faust code
-            //await mono_generator.compile(compiler, "main", code, "")
-            await poly_generator.compile(compiler, "main", code, "")
-            // Create controls via Faust UI
-            //const ui = mono_generator.getUI()
-            const ui = poly_generator.getUI()
-            faustUI = new FaustUI({ ui, root: faustUIRoot })
-            faustUIRoot.style.width = faustUI.minWidth * 1.25 + "px"
-            faustUIRoot.style.height = faustUI.minHeight * 1.25 + "px"
-            faustUI.resize()
+            // Compile Faust code to access JSON metadata
+            await mono_generator.compile(compiler, "main", code, "")
+            const json = mono_generator.getMeta()
+            let { midi, nvoices } = extractMidiAndNvoices(json);
+            gmidi = midi;
+            gnvoices = nvoices;
+
+            // Build the generator and generate UI
+            const generator = nvoices > 0 ? poly_generator : mono_generator;
+            await generator.compile(compiler, "main", code, "");
+            const ui = generator.getUI();
+
+            faustUI = new FaustUI({ ui, root: faustUIRoot });
+            faustUIRoot.style.width = faustUI.minWidth * 1.25 + "px";
+            faustUIRoot.style.height = faustUI.minHeight * 1.25 + "px";
+            faustUI.resize();
         }
 
         const start = async () => {
             if (audioCtx.state === "suspended") {
                 await audioCtx.resume()
             }
+
             // Create an audio node from compiled Faust
             if (node === undefined) {
-                //node = (await mono_generator.createNode(audioCtx))!
-                node = (await poly_generator.createNode(audioCtx, 16))!
+                if (gnvoices > 0) {
+                    node = (await poly_generator.createNode(audioCtx, gnvoices))!
+                } else {
+                    node = (await mono_generator.createNode(audioCtx))!
+                }
+            }
+
+            // Access MIDI device
+            if (gmidi) {
+                accessMIDIDevice(midiInputCallback(node))
+                    .then(() => {
+                        console.log('Successfully connected to the MIDI device.');
+                    })
+                    .catch((error) => {
+                        console.error('Error accessing MIDI device:', error.message);
+                    });
             }
 
             faustUI.paramChangeByUI = (path, value) => node?.setParamValue(path, value)
@@ -152,14 +174,6 @@ export default class FaustWidget extends HTMLElement {
                 audioInputSelector.innerHTML = "<option>Audio input</option>"
             }
 
-            accessMIDIDevice(midiInputCallback(node))
-                .then(() => {
-                    console.log('Successfully connected to the MIDI device.');
-                })
-                .catch((error) => {
-                    console.error('Error accessing MIDI device:', error.message);
-                });
-
             node.connect(audioCtx.destination)
             powerButton.style.color = "#ffa500"
         }

package/src/faust-widget copie.ts

@@ -1,212 +0,0 @@
-import { icon } from "@fortawesome/fontawesome-svg-core"
-import faustCSS from "@shren/faust-ui/dist/esm/index.css?inline"
-import faustSvg from "./faustText.svg"
-import { IFaustMonoWebAudioNode } from "@grame/faustwasm"
-import { IFaustPolyWebAudioNode } from "@grame/faustwasm"
-import { FaustUI } from "@shren/faust-ui"
-import { faustPromise, audioCtx, mono_generator, poly_generator, compiler, getInputDevices, deviceUpdateCallbacks, accessMIDIDevice, midiInputCallback } from "./common"
-
-const template = document.createElement("template")
-template.innerHTML = `
-<div id="root">
-    <div id="controls">
-        <button title="On/off" class="button" id="power" disabled>${icon({ prefix: "fas", iconName: "power-off" }).html[0]}</button>
-        <select id="audio-input" class="dropdown" disabled>
-            <option>Audio input</option>
-        </select>
-        <!-- TODO: MIDI input
-        <select id="midi-input" class="dropdown" disabled>
-            <option>MIDI input</option>
-        </select>
-        -->
-        <!-- TODO: volume control? <input id="volume" type="range" min="0" max="100"> -->
-        <a title="Faust website" id="faust" href="https://faust.grame.fr/" target="_blank"><img src="${faustSvg}" height="15px" /></a>
-    </div>
-    <div id="faust-ui"></div>
-</div>
-<style>
-    #root {
-        border: 1px solid black;
-        border-radius: 5px;
-        box-sizing: border-box;
-        display: inline-block;
-        background-color: #384d64;
-    }
-
-    *, *:before, *:after {
-        box-sizing: inherit; 
-    }
-
-    #controls {
-        display: flex;
-        margin-bottom: -20px;
-        position: relative;
-        z-index: 1;
-    }
-
-    #faust {
-        margin-left: auto;
-        padding-left: 10px;
-        margin-right: 10px;
-        display: flex;
-        align-items: center;
-    }
-
-    a.button {
-        appearance: button;
-    }
-
-    .button {
-        background-color: #384d64;
-        border: 0;
-        padding: 5px;
-        width: 25px;
-        height: 25px;
-        color: #fff;
-    }
-
-    .button:hover {
-        background-color: #4b71a1;
-    }
-
-    .button:active {
-        background-color: #373736;
-    }
-
-    .button:disabled {
-        opacity: 0.65;
-        cursor: not-allowed;
-        pointer-events: none;
-    }
-
-    #controls > .button > svg {
-        width: 15px;
-        height: 15px;
-        vertical-align: top;
-    }
-
-    .dropdown {
-        height: 19px;
-        margin: 3px 0 3px 10px;
-        border: 0;
-        background: #fff;
-    }
-
-    ${faustCSS}
-</style>
-`
-
-export default class FaustWidget extends HTMLElement {
-    constructor() {
-        super()
-    }
-
-    connectedCallback() {
-        const code = this.innerHTML.replace("<!--", "").replace("-->", "").trim()
-        this.attachShadow({ mode: "open" }).appendChild(template.content.cloneNode(true))
-
-        const powerButton = this.shadowRoot!.querySelector("#power") as HTMLButtonElement
-        const faustUIRoot = this.shadowRoot!.querySelector("#faust-ui") as HTMLDivElement
-
-        faustPromise.then(() => powerButton.disabled = false)
-
-        let on = false
-        let node: IFaustMonoWebAudioNode | undefined
-        //let node: IFaustPolyWebAudioNode | undefined
-        let input: MediaStreamAudioSourceNode | undefined
-        let faustUI: FaustUI
-
-        const setup = async () => {
-            await faustPromise
-            // Compile Faust code
-            await mono_generator.compile(compiler, "main", code, "")
-            //await poly_generator.compile(compiler, "main", code, "")
-            // Create controls via Faust UI
-            const ui = mono_generator.getUI()
-            //const ui = poly_generator.getUI()
-            faustUI = new FaustUI({ ui, root: faustUIRoot })
-            faustUIRoot.style.width = faustUI.minWidth * 1.25 + "px"
-            faustUIRoot.style.height = faustUI.minHeight * 1.25 + "px"
-            faustUI.resize()
-        }
-
-        const start = async () => {
-            if (audioCtx.state === "suspended") {
-                await audioCtx.resume()
-            }
-            // Create an audio node from compiled Faust
-            if (node === undefined) {
-                node = (await mono_generator.createNode(audioCtx))!
-                //node = (await poly_generator.createNode(audioCtx, 16))!
-            }
-
-            faustUI.paramChangeByUI = (path, value) => node?.setParamValue(path, value)
-            node.setOutputParamHandler((path, value) => faustUI.paramChangeByDSP(path, value))
-
-            if (node.numberOfInputs > 0) {
-                audioInputSelector.disabled = false
-                updateInputDevices(await getInputDevices())
-                await connectInput()
-            } else {
-                audioInputSelector.disabled = true
-                audioInputSelector.innerHTML = "<option>Audio input</option>"
-            }
-
-            accessMIDIDevice(midiInputCallback(node))
-                .then(() => {
-                    console.log('Successfully connected to the MIDI device.');
-                })
-                .catch((error) => {
-                    console.error('Error accessing MIDI device:', error.message);
-                });
-
-            node.connect(audioCtx.destination)
-            powerButton.style.color = "#ffa500"
-        }
-
-        const stop = () => {
-            node?.disconnect()
-            powerButton.style.color = "#fff"
-        }
-
-        powerButton.onclick = () => {
-            if (on) {
-                stop()
-            } else {
-                start()
-            }
-            on = !on
-        }
-
-        const audioInputSelector = this.shadowRoot!.querySelector("#audio-input") as HTMLSelectElement
-
-        const updateInputDevices = (devices: MediaDeviceInfo[]) => {
-            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))
-                }
-            }
-        }
-        deviceUpdateCallbacks.push(updateInputDevices)
-
-        const connectInput = async () => {
-            const deviceId = audioInputSelector.value
-            const stream = await navigator.mediaDevices.getUserMedia({ audio: { deviceId, echoCancellation: false, noiseSuppression: false, autoGainControl: false } })
-            if (input) {
-                input.disconnect()
-                input = undefined
-            }
-            if (node && node.numberOfInputs > 0) {
-                input = audioCtx.createMediaStreamSource(stream)
-                input.connect(node!)
-            }
-        }
-
-        audioInputSelector.onchange = connectInput
-
-        setup()
-    }
-}
-