@grame/faust-web-component 0.3.9 → 0.4.1

package/index.html

@@ -8,11 +8,14 @@
 
     <faust-editor>
         <!--
+declare name "Vocal FOF MIDI";
+declare description "MIDI-controllable FOF vocal synthesizer.";
+declare license "MIT";
+declare copyright "(c)Mike Olsen, CCRMA (Stanford University)";
+
 import("stdfaust.lib");
-ctFreq = hslider("cutoffFrequency",500,50,10000,0.01);
-q = hslider("q",5,1,30,0.1);
-gain = hslider("gain",1,0,1,0.01);
-process = no.noise : fi.resonlp(ctFreq,q,gain);
+
+process = pm.SFFormantModelFofSmooth_ui_MIDI <: _,_;
 -->
     </faust-editor>
     <center>

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@grame/faust-web-component",
     "description": "Web component embedding the Faust Compiler",
-    "version": "0.3.9",
+    "version": "0.4.1",
     "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.5.4",
+        "@grame/faustwasm": "^0.7.0",
         "@shren/faust-ui": "^1.1.13",
         "codemirror": "^6.0.1",
         "split.js": "^1.6.5"

package/src/faust-editor.ts

@@ -1,13 +1,28 @@
-import { icon } from "@fortawesome/fontawesome-svg-core"
-import { FaustMonoDspGenerator, FaustPolyDspGenerator, 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, default_generator, get_mono_generator, get_poly_generator, getInputDevices, deviceUpdateCallbacks, accessMIDIDevice, midiInputCallback, extractMidiAndNvoices } from "./common"
-import { createEditor, setError, clearError } from "./editor"
-import { Scope } from "./scope"
-import faustSvg from "./faustText.svg"
-
+// Import necessary libraries and modules
+import { icon } from "@fortawesome/fontawesome-svg-core";
+import { FaustMonoDspGenerator, FaustPolyDspGenerator, 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,
+    default_generator,
+    get_mono_generator,
+    get_poly_generator,
+    getInputDevices,
+    deviceUpdateCallbacks,
+    accessMIDIDevice,
+    midiInputCallback,
+    extractMidiAndNvoices
+} from "./common";
+import { createEditor, setError, clearError } from "./editor";
+import { Scope } from "./scope";
+import faustSvg from "./faustText.svg";
+
+// Create a template for the component
 const template = document.createElement("template")
 template.innerHTML = `
 <div id="root">
@@ -212,16 +227,22 @@ template.innerHTML = `
 </style>
 `
 
+// FaustEditor Web Component
 export default class FaustEditor extends HTMLElement {
     constructor() {
         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))
 
+        // 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)
+
         ideLink.onfocus = () => {
             // Open current contents of editor in IDE
             const urlParams = new URLSearchParams()
@@ -229,9 +250,6 @@ export default class FaustEditor extends HTMLElement {
             ideLink.href = `https://faustide.grame.fr/?${urlParams.toString()}`
         }
 
-        const editorEl = this.shadowRoot!.querySelector("#editor") as HTMLDivElement
-        const editor = createEditor(editorEl, code)
-
         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
@@ -241,6 +259,7 @@ export default class FaustEditor extends HTMLElement {
         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], {
             sizes: [100, 0],
             minSize: [0, 20],
@@ -251,8 +270,11 @@ export default class FaustEditor extends HTMLElement {
 
         faustPromise.then(() => runButton.disabled = false)
 
+        // Default sizes for sidebar
         const defaultSizes = [70, 30]
         let sidebarOpen = false
+
+        // Function to open the sidebar with predefined sizes
         const openSidebar = () => {
             if (!sidebarOpen) {
                 split.setSizes(defaultSizes)
@@ -260,6 +282,7 @@ export default class FaustEditor extends HTMLElement {
             sidebarOpen = true
         }
 
+        // Variables for audio and visualization nodes
         let node: IFaustMonoWebAudioNode | undefined
         let input: MediaStreamAudioSourceNode | undefined
         let analyser: AnalyserNode | undefined
@@ -269,30 +292,33 @@ export default class FaustEditor extends HTMLElement {
         let gnvoices = -1
         let sourceNode: AudioBufferSourceNode = undefined;
 
+        // Event handler for the run button
         runButton.onclick = async () => {
             if (audioCtx.state === "suspended") {
                 await audioCtx.resume()
             }
             await faustPromise
+
             // Compile Faust code
             const code = editor.state.doc.toString()
             let generator = null
             try {
                 // Compile Faust code to access JSON metadata
-                await default_generator.compile(compiler, "main", code, "")
+                await default_generator.compile(compiler, "main", code, "-ftz 2")
                 const json = default_generator.getMeta()
                 let { midi, nvoices } = extractMidiAndNvoices(json);
                 gmidi = midi;
                 gnvoices = nvoices;
 
-                // Build the generator
-                generator = nvoices > 0 ? get_poly_generator() : get_mono_generator();
+                // Build the generator (possibly reusing default_generator which is a FaustMonoDspGenerator) 
+                generator = nvoices > 0 ? get_poly_generator() : default_generator;
                 await generator.compile(compiler, "main", code, "-ftz 2");
 
             } catch (e: any) {
                 setError(editor, e)
                 return
             }
+
             // Clear any old errors
             clearError(editor)
 
@@ -303,6 +329,8 @@ export default class FaustEditor extends HTMLElement {
             } else {
                 node = (await (generator as FaustMonoDspGenerator).createNode(audioCtx))!
             }
+
+            // Set up audio input if necessary
             if (node.numberOfInputs > 0) {
                 audioInputSelector.disabled = false
                 updateInputDevices(await getInputDevices())
@@ -317,7 +345,10 @@ export default class FaustEditor extends HTMLElement {
                 tabButton.disabled = false
             }
 
-            // Access MIDI device
+            // Start sensors if available
+            await node.startSensors();
+
+            // Access MIDI device if available
             if (gmidi) {
                 accessMIDIDevice(midiInputCallback(node))
                     .then(() => {
@@ -329,6 +360,7 @@ export default class FaustEditor extends HTMLElement {
             }
 
             openSidebar()
+
             // Clear old tab contents
             for (const tab of tabContents) {
                 while (tab.lastChild) tab.lastChild.remove()
@@ -350,15 +382,13 @@ export default class FaustEditor extends HTMLElement {
             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"])
-
             // 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"
         }
 
+        // Function to set SVG in the block diagram tab
         const setSVG = (svgString: string) => {
             faustDiagram.innerHTML = svgString
 
@@ -373,6 +403,8 @@ export default class FaustEditor extends HTMLElement {
         }
 
         let animPlot: number | undefined
+
+        // Function to render the scope
         const drawScope = () => {
             scope!.renderScope([{
                 analyser: analyser!,
@@ -382,11 +414,13 @@ export default class FaustEditor extends HTMLElement {
             animPlot = requestAnimationFrame(drawScope)
         }
 
+        // Function to render the spectrum
         const 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) {
@@ -397,7 +431,20 @@ export default class FaustEditor extends HTMLElement {
                     tabContents[j].classList.remove("active")
                 }
             }
-            if (i === 2) {
+            // Check if the clicked tab is the "Block Diagram" tab (index 1)
+            if (i === 1) {
+                // Only set the SVG if it hasn't been set before (avoiding multiple loads)
+                if (faustDiagram.innerHTML.trim() === "") {
+
+                    // Display a "Computing SVG..." message while the SVG is being generated
+                    faustDiagram.innerHTML = "<p><center>Computing SVG...</center></p>";
+
+                    // Use setTimeout to defer the SVG rendering to a separate task
+                    setTimeout(() => {
+                        setSVG(svgDiagrams.from("main", code, "")["process.svg"]);
+                    }, 0);
+                }
+            } else if (i === 2) {
                 scope!.onResize()
                 if (animPlot !== undefined) cancelAnimationFrame(animPlot)
                 animPlot = requestAnimationFrame(drawScope)
@@ -411,22 +458,27 @@ export default class FaustEditor extends HTMLElement {
             }
         }
 
+        // Attach event listeners to tab buttons
         for (const [i, tabButton] of tabButtons.entries()) {
             tabButton.onclick = () => openTab(i)
         }
 
+        // Event handler for the stop button
         stopButton.onclick = () => {
             if (node !== undefined) {
-                node.disconnect()
-                node.destroy()
-                node = undefined
-                stopButton.disabled = true
+                node.disconnect();
+                node.stopSensors();
+                node.destroy();
+                node = undefined;
+                stopButton.disabled = true;
                 // TODO: Maybe disable controls in faust-ui tab.
             }
         }
 
+        // Audio input selector element
         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()
@@ -439,6 +491,7 @@ export default class FaustEditor extends HTMLElement {
         }
         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 } })

package/src/faust-widget.ts

@@ -1,11 +1,29 @@
-import { icon } from "@fortawesome/fontawesome-svg-core"
-import faustCSS from "@shren/faust-ui/dist/esm/index.css?inline"
-import faustSvg from "./faustText.svg"
-import { FaustMonoDspGenerator, FaustPolyDspGenerator, IFaustMonoWebAudioNode } from "@grame/faustwasm"
-import { IFaustPolyWebAudioNode } from "@grame/faustwasm"
-import { FaustUI } from "@shren/faust-ui"
-import { faustPromise, audioCtx, get_mono_generator, get_poly_generator, compiler, getInputDevices, deviceUpdateCallbacks, accessMIDIDevice, midiInputCallback, extractMidiAndNvoices, default_generator } from "./common"
-
+// Import necessary libraries and modules
+import { icon } from "@fortawesome/fontawesome-svg-core";
+import faustCSS from "@shren/faust-ui/dist/esm/index.css?inline";
+import faustSvg from "./faustText.svg";
+import {
+    FaustMonoDspGenerator,
+    FaustPolyDspGenerator,
+    IFaustMonoWebAudioNode,
+    IFaustPolyWebAudioNode,
+} from "@grame/faustwasm";
+import { FaustUI } from "@shren/faust-ui";
+import {
+    faustPromise,
+    audioCtx,
+    get_mono_generator,
+    get_poly_generator,
+    compiler,
+    getInputDevices,
+    deviceUpdateCallbacks,
+    accessMIDIDevice,
+    midiInputCallback,
+    extractMidiAndNvoices,
+    default_generator,
+} from "./common";
+
+// Create a template for the FaustWidget component
 const template = document.createElement("template")
 template.innerHTML = `
 <div id="root">
@@ -96,20 +114,27 @@ template.innerHTML = `
 </style>
 `
 
+// Define the FaustWidget web component
 export default class FaustWidget extends HTMLElement {
     constructor() {
         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))
 
+        // 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
 
+        // Enable the power button once Faust is ready
         faustPromise.then(() => powerButton.disabled = false)
 
+        // State variables
         let on = false
         let gmidi = false
         let gnvoices = -1
@@ -119,32 +144,37 @@ export default class FaustWidget extends HTMLElement {
         let generator: FaustMonoDspGenerator | FaustPolyDspGenerator
         let sourceNode: AudioBufferSourceNode = undefined;
 
+        // Function to setup the Faust environment
         const setup = async () => {
             await faustPromise
-            // Compile Faust code to access JSON metadata
-            await default_generator.compile(compiler, "main", code, "")
+
+            // Compile Faust code to access JSON metadata 
+            await default_generator.compile(compiler, "main", code, "-ftz 2")
             const json = default_generator.getMeta()
             let { midi, nvoices } = extractMidiAndNvoices(json);
             gmidi = midi;
             gnvoices = nvoices;
 
-            // Build the generator and generate UI
-            generator = nvoices > 0 ? get_poly_generator() : get_mono_generator();
+            // Build the generator (possibly reusing default_generator which is a FaustMonoDspGenerator) 
+            // and generate UI
+            generator = nvoices > 0 ? get_poly_generator() : default_generator;
             await generator.compile(compiler, "main", code, "-ftz 2");
             const ui = generator.getUI();
 
+            // Generate Faust UI
             faustUI = new FaustUI({ ui, root: faustUIRoot });
             faustUIRoot.style.width = faustUI.minWidth * 1.25 + "px";
             faustUIRoot.style.height = faustUI.minHeight * 1.25 + "px";
             faustUI.resize();
         }
 
+        // Function to start the Faust node and audio context
         const start = async () => {
             if (audioCtx.state === "suspended") {
                 await audioCtx.resume()
             }
 
-            // Create an audio node from compiled Faust
+            // 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))!
@@ -153,7 +183,10 @@ export default class FaustWidget extends HTMLElement {
                 }
             }
 
-            // Access MIDI device
+            // Start sensors if available
+            await node.startSensors();
+
+            // Access MIDI device if available
             if (gmidi) {
                 accessMIDIDevice(midiInputCallback(node))
                     .then(() => {
@@ -164,9 +197,11 @@ 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))
 
+            // Enable audio input if necessary
             if (node.numberOfInputs > 0) {
                 audioInputSelector.disabled = false
                 updateInputDevices(await getInputDevices())
@@ -176,15 +211,19 @@ export default class FaustWidget extends HTMLElement {
                 audioInputSelector.innerHTML = "<option>Audio input</option>"
             }
 
+            // Connect Faust node to the audio context destination
             node.connect(audioCtx.destination)
             powerButton.style.color = "#ffa500"
         }
 
+        // Function to stop the Faust node
         const stop = () => {
             node?.disconnect()
+            node?.stopSensors();
             powerButton.style.color = "#fff"
         }
 
+        // Toggle the Faust node on/off
         powerButton.onclick = () => {
             if (on) {
                 stop()
@@ -194,8 +233,7 @@ export default class FaustWidget extends HTMLElement {
             on = !on
         }
 
-        const audioInputSelector = this.shadowRoot!.querySelector("#audio-input") as HTMLSelectElement
-
+        // Function to update available audio input devices
         const updateInputDevices = (devices: MediaDeviceInfo[]) => {
             if (audioInputSelector.disabled) return
             while (audioInputSelector.lastChild) audioInputSelector.lastChild.remove()
@@ -208,6 +246,7 @@ export default class FaustWidget extends HTMLElement {
         }
         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 } })
@@ -247,9 +286,16 @@ export default class FaustWidget extends HTMLElement {
             }
         }
 
+        // Set input change handler
         audioInputSelector.onchange = connectInput
 
-        setup()
+        // Initial setup
+        setTimeout(() => {
+            // Display a "Compiling..." message while Faust is compiling
+            faustUIRoot.innerHTML = "<p><center>Compiling...</center></p>";
+            setup();
+        }, 0);
+
     }
 }