@grame/faust-web-component 0.4.4 → 0.5.0

package/index.html

@@ -14,6 +14,7 @@ declare license "MIT";
 declare copyright "(c)Mike Olsen, CCRMA (Stanford University)";
 
 import("stdfaust.lib");
+declare options "[midi:on][nvoices:12]";
 
 process = pm.SFFormantModelFofSmooth_ui_MIDI <: _,_;
 -->

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@grame/faust-web-component",
     "description": "Web component embedding the Faust Compiler",
-    "version": "0.4.4",
+    "version": "0.5.0",
     "module": "dist/faust-web-component.js",
     "files": [
         "src/",
@@ -42,8 +42,8 @@
         "@codemirror/legacy-modes": "^6.3.3",
         "@fortawesome/fontawesome-svg-core": "^6.4.2",
         "@fortawesome/free-solid-svg-icons": "^6.4.2",
-        "@grame/faustwasm": "^0.7.8",
-        "@shren/faust-ui": "^1.1.15",
+        "@grame/faustwasm": "^0.9.1",
+        "@shren/faust-ui": "^1.1.16",
         "codemirror": "^6.0.1",
         "split.js": "^1.6.5"
     }

package/src/common.ts

@@ -1,58 +1,107 @@
-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"
-import { library } from "@fortawesome/fontawesome-svg-core"
-import { faPlay, faStop, faUpRightFromSquare, faSquareCaretLeft, faAnglesLeft, faAnglesRight, faSliders, faDiagramProject, faWaveSquare, faChartLine, faPowerOff } from "@fortawesome/free-solid-svg-icons"
-
-for (const icon of [faPlay, faStop, faUpRightFromSquare, faSquareCaretLeft, faAnglesLeft, faAnglesRight, faSliders, faDiagramProject, faWaveSquare, faChartLine, faPowerOff]) {
-    library.add(icon)
+// Import Faust Web Audio API
+import {
+    IFaustMonoWebAudioNode,
+    IFaustPolyWebAudioNode,
+    FaustCompiler,
+    FaustMonoDspGenerator,
+    FaustPolyDspGenerator,
+    FaustSvgDiagrams,
+    LibFaust,
+    instantiateFaustModuleFromFile
+} from "@grame/faustwasm";
+
+// Import Faust module URLs
+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";
+
+// Import FontAwesome icons
+import { library } from "@fortawesome/fontawesome-svg-core";
+import {
+    faPlay,
+    faStop,
+    faUpRightFromSquare,
+    faSquareCaretLeft,
+    faAnglesLeft,
+    faAnglesRight,
+    faSliders,
+    faDiagramProject,
+    faWaveSquare,
+    faChartLine,
+    faPowerOff
+} from "@fortawesome/free-solid-svg-icons";
+
+// Add icons to FontAwesome library
+for (const icon of [
+    faPlay,
+    faStop,
+    faUpRightFromSquare,
+    faSquareCaretLeft,
+    faAnglesLeft,
+    faAnglesRight,
+    faSliders,
+    faDiagramProject,
+    faWaveSquare,
+    faChartLine,
+    faPowerOff
+]) {
+    library.add(icon);
 }
 
-export let compiler: FaustCompiler
-export let svgDiagrams: FaustSvgDiagrams
-export const default_generator = new FaustMonoDspGenerator()
-export const get_mono_generator = () => new FaustMonoDspGenerator()
-export const get_poly_generator = () => new FaustPolyDspGenerator()
+// Global variables for Faust
+export let compiler: FaustCompiler;
+export let svgDiagrams: FaustSvgDiagrams;
+export const default_generator = new FaustMonoDspGenerator();
+export const get_mono_generator = (): FaustMonoDspGenerator => new FaustMonoDspGenerator();
+export const get_poly_generator = (): FaustPolyDspGenerator => new FaustPolyDspGenerator();
 
-async function loadFaust() {
+// Load Faust module
+async function loadFaust(): Promise<void> {
     // Setup Faust
-    const module = await instantiateFaustModuleFromFile(jsURL, dataURL, wasmURL)
-    const libFaust = new LibFaust(module)
-    compiler = new FaustCompiler(libFaust)
-    svgDiagrams = new FaustSvgDiagrams(compiler)
+    const module = await instantiateFaustModuleFromFile(jsURL, dataURL, wasmURL);
+    const libFaust = new LibFaust(module);
+    compiler = new FaustCompiler(libFaust);
+    svgDiagrams = new FaustSvgDiagrams(compiler);
 }
 
-export const faustPromise = loadFaust()
-export const audioCtx = new AudioContext({ latencyHint: 0.00001 })
+// Initialize Faust
+export const faustPromise: Promise<void> = loadFaust();
+
+// Create an AudioContext
+export const audioCtx: AudioContext = new AudioContext({ latencyHint: 0.00001 });
 audioCtx.destination.channelInterpretation = "discrete";
 
-export const deviceUpdateCallbacks: ((d: MediaDeviceInfo[]) => void)[] = []
-let devices: MediaDeviceInfo[] = []
-async function _getInputDevices() {
+export const deviceUpdateCallbacks: Array<(devices: MediaDeviceInfo[]) => void> = [];
+let devices: MediaDeviceInfo[] = [];
+
+// Get input devices
+async function _getInputDevices(): Promise<void> {
     if (navigator.mediaDevices) {
-        navigator.mediaDevices.ondevicechange = _getInputDevices
+        navigator.mediaDevices.ondevicechange = _getInputDevices;
         try {
-            await navigator.mediaDevices.getUserMedia({ audio: true })
-        } catch (e) { }
-        devices = await navigator.mediaDevices.enumerateDevices()
+            await navigator.mediaDevices.getUserMedia({ audio: true });
+        } catch (e) {
+            // Ignore permission errors
+        }
+        devices = await navigator.mediaDevices.enumerateDevices();
         for (const callback of deviceUpdateCallbacks) {
-            callback(devices)
+            callback(devices);
         }
     }
 }
 
-let getInputDevicesPromise: Promise<void> | undefined
-export async function getInputDevices() {
-    if (getInputDevicesPromise === undefined) {
-        getInputDevicesPromise = _getInputDevices()
+let getInputDevicesPromise: Promise<void> | undefined;
+export async function getInputDevices(): Promise<MediaDeviceInfo[]> {
+    if (!getInputDevicesPromise) {
+        getInputDevicesPromise = _getInputDevices();
     }
-    await getInputDevicesPromise
-    return devices
+    await getInputDevicesPromise;
+    return devices;
 }
 
+// Access MIDI device
 export async function accessMIDIDevice(
-    onMIDIMessage: (data) => void
+    onMIDIMessage: (data: Uint8Array) => void
 ): Promise<void> {
     return new Promise<void>((resolve, reject) => {
         if (navigator.requestMIDIAccess) {
@@ -60,7 +109,6 @@ export async function accessMIDIDevice(
                 .requestMIDIAccess()
                 .then((midiAccess) => {
                     const inputDevices = midiAccess.inputs.values();
-                    let midiInput: WebMidi.MIDIInput | null = null;
                     for (const midiInput of inputDevices) {
                         midiInput.onmidimessage = (event) => {
                             onMIDIMessage(event.data);
@@ -78,14 +126,23 @@ export async function accessMIDIDevice(
 }
 
 // Set up MIDI input callback
-export const midiInputCallback = (node: IFaustMonoWebAudioNode | IFaustPolyWebAudioNode) => {
-    return (data) => { node.midiMessage(data); }
+export const midiInputCallback = (node: IFaustMonoWebAudioNode | IFaustPolyWebAudioNode)
+    : ((data: Uint8Array) => void) => {
+    return (data: Uint8Array) => {
+        node.midiMessage(data);
+    };
+};
+
+// Define type for JSON data with metadata
+interface JSONData {
+    meta: Array<{ options?: string; }>;
 }
 
-// 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) {
+// Analyze the metadata of a Faust JSON file and 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 && optionsMetadata.options) {
         const options = optionsMetadata.options;
 
         const midiRegex = /\[midi:(on|off)\]/;
@@ -95,10 +152,10 @@ export function extractMidiAndNvoices(jsonData: JSONData): { midi: boolean, nvoi
         const nvoicesMatch = options.match(nvoicesRegex);
 
         const midi = midiMatch ? midiMatch[1] === "on" : false;
-        const nvoices = nvoicesMatch ? parseInt(nvoicesMatch[1]) : -1;
+        const nvoices = nvoicesMatch ? parseInt(nvoicesMatch[1], 10) : -1;
 
         return { midi, nvoices };
     } else {
         return { midi: false, nvoices: -1 };
     }
-}
+}

package/src/faust-editor.ts

@@ -10,7 +10,6 @@ import {
     compiler,
     svgDiagrams,
     default_generator,
-    get_mono_generator,
     get_poly_generator,
     getInputDevices,
     deviceUpdateCallbacks,
@@ -230,34 +229,34 @@ template.innerHTML = `
 // FaustEditor Web Component
 export default class FaustEditor extends HTMLElement {
     constructor() {
-        super()
+        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))
+        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)
+        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()
-            urlParams.set("inline", btoa(editor.state.doc.toString()).replace("+", "-").replace("/", "_"))
-            ideLink.href = `https://faustide.grame.fr/?${urlParams.toString()}`
+            const urlParams = new URLSearchParams();
+            urlParams.set("inline", btoa(editor.state.doc.toString()).replace("+", "-").replace("/", "_"));
+            ideLink.href = `https://faustide.grame.fr/?${urlParams.toString()}`;
         }
 
-        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
-        const faustDiagram = this.shadowRoot!.querySelector("#faust-diagram") as HTMLDivElement
-        const sidebar = this.shadowRoot!.querySelector("#sidebar") as HTMLDivElement
-        const sidebarContent = this.shadowRoot!.querySelector("#sidebar-content") as HTMLDivElement
-        const tabButtons = [...this.shadowRoot!.querySelectorAll(".tab")] as HTMLButtonElement[]
-        const tabContents = [...sidebarContent.querySelectorAll("div")] as HTMLDivElement[]
+        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;
+        const faustDiagram = this.shadowRoot!.querySelector("#faust-diagram") as HTMLDivElement;
+        const sidebar = this.shadowRoot!.querySelector("#sidebar") as HTMLDivElement;
+        const sidebarContent = this.shadowRoot!.querySelector("#sidebar-content") as HTMLDivElement;
+        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], {
@@ -268,44 +267,44 @@ export default class FaustEditor extends HTMLElement {
             onDragEnd: () => { scope?.onResize(); spectrum?.onResize() },
         })
 
-        faustPromise.then(() => runButton.disabled = false)
+        faustPromise.then(() => runButton.disabled = false);
 
         // Default sizes for sidebar
-        const defaultSizes = [70, 30]
-        let sidebarOpen = false
+        const defaultSizes = [70, 30];
+        let sidebarOpen = false;
 
         // Function to open the sidebar with predefined sizes
         const openSidebar = () => {
             if (!sidebarOpen) {
-                split.setSizes(defaultSizes)
+                split.setSizes(defaultSizes);
             }
-            sidebarOpen = true
+            sidebarOpen = true;
         }
 
         // Variables for audio and visualization nodes
-        let node: IFaustMonoWebAudioNode | undefined
-        let input: MediaStreamAudioSourceNode | undefined
-        let analyser: AnalyserNode | undefined
-        let scope: Scope | undefined
-        let spectrum: Scope | undefined
-        let gmidi = false
-        let gnvoices = -1
-        let sourceNode: AudioBufferSourceNode = undefined;
+        let node: IFaustMonoWebAudioNode | undefined;
+        let input: MediaStreamAudioSourceNode | undefined;
+        let analyser: AnalyserNode | undefined;
+        let scope: Scope | undefined;
+        let spectrum: Scope | undefined;
+        let gmidi = false;
+        let gnvoices = -1;
+        let sourceNode: AudioBufferSourceNode | undefined;
 
         // Event handler for the run button
         runButton.onclick = async () => {
             if (audioCtx.state === "suspended") {
-                await audioCtx.resume()
+                await audioCtx.resume();
             }
-            await faustPromise
+            await faustPromise;
 
             // Compile Faust code
-            const code = editor.state.doc.toString()
-            let generator = null
+            const code = editor.state.doc.toString();
+            let generator = null;
             try {
                 // Compile Faust code to access JSON metadata
-                await default_generator.compile(compiler, "main", code, "-ftz 2")
-                const json = default_generator.getMeta()
+                await default_generator.compile(compiler, "main", code, "-ftz 2");
+                const json = default_generator.getMeta();
                 let { midi, nvoices } = extractMidiAndNvoices(json);
                 gmidi = midi;
                 gnvoices = nvoices;
@@ -315,34 +314,34 @@ export default class FaustEditor extends HTMLElement {
                 await generator.compile(compiler, "main", code, "-ftz 2");
 
             } catch (e: any) {
-                setError(editor, e)
+                setError(editor, e);
                 return
             }
 
             // Clear any old errors
-            clearError(editor)
+            clearError(editor);
 
             // Create an audio node from compiled Faust
-            if (node !== undefined) node.disconnect()
+            if (node !== undefined) node.disconnect();
             if (gnvoices > 0) {
-                node = (await (generator as FaustPolyDspGenerator).createNode(audioCtx, gnvoices))!
+                node = (await (generator as FaustPolyDspGenerator).createNode(audioCtx, gnvoices))!;
             } else {
-                node = (await (generator as FaustMonoDspGenerator).createNode(audioCtx))!
+                node = (await (generator as FaustMonoDspGenerator).createNode(audioCtx))!;
             }
 
             // Set up audio input if necessary
             if (node.numberOfInputs > 0) {
-                audioInputSelector.disabled = false
-                updateInputDevices(await getInputDevices())
-                await connectInput()
+                audioInputSelector.disabled = false;
+                updateInputDevices(await getInputDevices());
+                await connectInput();
             } else {
-                audioInputSelector.disabled = true
-                audioInputSelector.innerHTML = "<option>Audio input</option>"
+                audioInputSelector.disabled = true;
+                audioInputSelector.innerHTML = "<option>Audio input</option>";
             }
-            node.connect(audioCtx.destination)
-            stopButton.disabled = false
+            node.connect(audioCtx.destination);
+            stopButton.disabled = false;
             for (const tabButton of tabButtons) {
-                tabButton.disabled = false
+                tabButton.disabled = false;
             }
 
             // Start sensors if available
@@ -359,50 +358,50 @@ export default class FaustEditor extends HTMLElement {
                     });
             }
 
-            openSidebar()
+            openSidebar();
 
             // Clear old tab contents
             for (const tab of tabContents) {
-                while (tab.lastChild) tab.lastChild.remove()
+                while (tab.lastChild) tab.lastChild.remove();
             }
             // Create scope & spectrum plots
             analyser = new AnalyserNode(audioCtx, {
                 fftSize: Math.pow(2, 11), minDecibels: -96, maxDecibels: 0, smoothingTimeConstant: 0.85
-            })
-            node.connect(analyser)
-            scope = new Scope(tabContents[2])
-            spectrum = new Scope(tabContents[3])
+            });
+            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)
+            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))
+            const faustUI = new FaustUI({ ui, root: faustUIRoot });
+            faustUI.paramChangeByUI = (path, value) => node?.setParamValue(path, value);
+            node.setOutputParamHandler((path, value) => faustUI.paramChangeByDSP(path, value));
 
             // 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"
+            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
+            faustDiagram.innerHTML = svgString;
 
             for (const a of faustDiagram.querySelectorAll("a")) {
                 a.onclick = e => {
-                    e.preventDefault()
-                    const filename = (a.href as any as SVGAnimatedString).baseVal
-                    const svgString = compiler.fs().readFile("main-svg/" + filename, { encoding: "utf8" }) as string
-                    setSVG(svgString)
+                    e.preventDefault();
+                    const filename = (a.href as any as SVGAnimatedString).baseVal;
+                    const svgString = compiler.fs().readFile("main-svg/" + filename, { encoding: "utf8" }) as string;
+                    setSVG(svgString);
                 }
             }
         }
 
-        let animPlot: number | undefined
+        let animPlot: number | undefined;
 
         // Function to render the scope
         const drawScope = () => {
@@ -411,24 +410,24 @@ export default class FaustEditor extends HTMLElement {
                 style: "rgb(212, 100, 100)",
                 edgeThreshold: 0.09,
             }])
-            animPlot = requestAnimationFrame(drawScope)
+            animPlot = requestAnimationFrame(drawScope);
         }
 
         // Function to render the spectrum
         const drawSpectrum = () => {
-            spectrum!.renderSpectrum(analyser!)
-            animPlot = requestAnimationFrame(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) {
-                    tab.classList.add("active")
-                    tabContents[j].classList.add("active")
+                    tab.classList.add("active");
+                    tabContents[j].classList.add("active");
                 } else {
-                    tab.classList.remove("active")
-                    tabContents[j].classList.remove("active")
+                    tab.classList.remove("active");
+                    tabContents[j].classList.remove("active");
                 }
             }
             // Check if the clicked tab is the "Block Diagram" tab (index 1)
@@ -445,22 +444,22 @@ export default class FaustEditor extends HTMLElement {
                     }, 0);
                 }
             } else if (i === 2) {
-                scope!.onResize()
-                if (animPlot !== undefined) cancelAnimationFrame(animPlot)
-                animPlot = requestAnimationFrame(drawScope)
+                scope!.onResize();
+                if (animPlot !== undefined) cancelAnimationFrame(animPlot);
+                animPlot = requestAnimationFrame(drawScope);
             } else if (i === 3) {
-                spectrum!.onResize()
-                if (animPlot !== undefined) cancelAnimationFrame(animPlot)
-                animPlot = requestAnimationFrame(drawSpectrum)
+                spectrum!.onResize();
+                if (animPlot !== undefined) cancelAnimationFrame(animPlot);
+                animPlot = requestAnimationFrame(drawSpectrum);
             } else if (animPlot !== undefined) {
-                cancelAnimationFrame(animPlot)
-                animPlot = undefined
+                cancelAnimationFrame(animPlot);
+                animPlot = undefined;
             }
         }
 
         // Attach event listeners to tab buttons
         for (const [i, tabButton] of tabButtons.entries()) {
-            tabButton.onclick = () => openTab(i)
+            tabButton.onclick = () => openTab(i);
         }
 
         // Event handler for the stop button
@@ -476,28 +475,28 @@ export default class FaustEditor extends HTMLElement {
         }
 
         // Audio input selector element
-        const audioInputSelector = this.shadowRoot!.querySelector("#audio-input") as HTMLSelectElement
+        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()
+            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))
+                    audioInputSelector.appendChild(new Option(device.label || device.deviceId, device.deviceId));
                 }
             }
-            audioInputSelector.appendChild(new Option("Audio File", "Audio File"))
+            audioInputSelector.appendChild(new Option("Audio File", "Audio File"));
         }
-        deviceUpdateCallbacks.push(updateInputDevices)
+        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 } })
+            const deviceId = audioInputSelector.value;
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: { deviceId, echoCancellation: false, noiseSuppression: false, autoGainControl: false } });
             if (input) {
-                input.disconnect()
-                input = undefined
+                input.disconnect();
+                input = undefined;
             }
             if (node && node.numberOfInputs > 0) {
                 if (deviceId == "Audio File") {
@@ -531,6 +530,6 @@ export default class FaustEditor extends HTMLElement {
             }
         }
 
-        audioInputSelector.onchange = connectInput
+        audioInputSelector.onchange = connectInput;
     }
 }