@grame/faustwasm 0.7.10 → 0.8.2

package/assets/standalone/index-pwa.js

@@ -29,121 +29,155 @@ const audioContext = new AudioCtx({ latencyHint: 0.00001 });
 audioContext.destination.channelInterpretation = "discrete";
 audioContext.suspend();
 
+// Declare faustNode as a global variable
+let faustNode;
+
+// Called at load time
 (async () => {
 
-    const { createFaustNode } = await import("./create-node.js");
+    // Import the create-node module
+    const { createFaustNode, createFaustUI } = await import("./create-node.js");
+
     // To test the ScriptProcessorNode mode
-    //const { faustNode, dspMeta: { name } } = await createFaustNode(audioContext, "osc", FAUST_DSP_VOICES, true, 512);
-    const { faustNode, dspMeta: { name } } = await createFaustNode(audioContext, "osc", FAUST_DSP_VOICES);
+    // const result = await createFaustNode(audioContext, "osc", FAUST_DSP_VOICES, true, 512);
+    const result = await createFaustNode(audioContext, "osc", FAUST_DSP_VOICES);
+    faustNode = result.faustNode;  // Assign to the global variable
     if (!faustNode) throw new Error("Faust DSP not compiled");
 
     // Create the Faust UI
-    const { createFaustUI } = await import("./create-node.js");
     await createFaustUI($divFaustUI, faustNode);
 
-    // Function to start MIDI
-    function startMIDI() {
-        // Check if the browser supports the Web MIDI API
-        if (navigator.requestMIDIAccess) {
-            navigator.requestMIDIAccess().then(
-                midiAccess => {
-                    console.log("MIDI Access obtained.");
-                    for (let input of midiAccess.inputs.values()) {
-                        input.onmidimessage = (event) => faustNode.midiMessage(event.data);
-                        console.log(`Connected to input: ${input.name}`);
-                    }
-                },
-                () => console.error("Failed to access MIDI devices.")
-            );
-        } else {
-            console.log("Web MIDI API is not supported in this browser.");
-        }
+})();
+
+// Synchronous function to resume AudioContext, to be called first in the synchronous event listener
+function resumeAudioContext() {
+    if (audioContext.state === 'suspended') {
+        audioContext.resume().then(() => {
+            console.log('AudioContext resumed successfully');
+        }).catch(error => {
+            console.error('Error when resuming AudioContext:', error);
+        });
     }
+}
 
-    // Function to stop MIDI
-    function stopMIDI() {
-        // Check if the browser supports the Web MIDI API
-        if (navigator.requestMIDIAccess) {
-            navigator.requestMIDIAccess().then(
-                midiAccess => {
-                    console.log("MIDI Access obtained.");
-                    for (let input of midiAccess.inputs.values()) {
-                        input.onmidimessage = null;
-                        console.log(`Disconnected from input: ${input.name}`);
-                    }
-                },
-                () => console.error("Failed to access MIDI devices.")
-            );
-        } else {
-            console.log("Web MIDI API is not supported in this browser.");
-        }
+// Function to start MIDI
+function startMIDI() {
+    // Check if the browser supports the Web MIDI API
+    if (navigator.requestMIDIAccess) {
+        navigator.requestMIDIAccess().then(
+            midiAccess => {
+                console.log("MIDI Access obtained.");
+                for (let input of midiAccess.inputs.values()) {
+                    input.onmidimessage = (event) => faustNode.midiMessage(event.data);
+                    console.log(`Connected to input: ${input.name}`);
+                }
+            },
+            () => console.error("Failed to access MIDI devices.")
+        );
+    } else {
+        console.log("Web MIDI API is not supported in this browser.");
     }
+}
 
-    let sensorHandlersBound = false;
-    let midiHandlersBound = false;
-
-    // Function to resume AudioContext, activate MIDI and Sensors on user interaction
-    async function activateAudioMIDISensors() {
-
-        // Resume the AudioContext
-        if (audioContext.state === 'suspended') {
-            await audioContext.resume();
-        }
-
-        // Activate sensor listeners
-        if (!sensorHandlersBound) {
-            await faustNode.startSensors();
-            sensorHandlersBound = true;
-        }
-
-        // Initialize the MIDI setup
-        if (!midiHandlersBound && FAUST_DSP_VOICES > 0) {
-            startMIDI();
-            midiHandlersBound = true;
-        }
-
-        // Connect the Faust node to the audio output
-        faustNode.connect(audioContext.destination);
-
-        // Connect the Faust node to the audio input
-        if (faustNode.numberOfInputs > 0) {
-            const { connectToAudioInput } = await import("./create-node.js");
-            await connectToAudioInput(audioContext, null, faustNode, null);
-        }
+// Function to stop MIDI
+function stopMIDI() {
+    // Check if the browser supports the Web MIDI API
+    if (navigator.requestMIDIAccess) {
+        navigator.requestMIDIAccess().then(
+            midiAccess => {
+                console.log("MIDI Access obtained.");
+                for (let input of midiAccess.inputs.values()) {
+                    input.onmidimessage = null;
+                    console.log(`Disconnected from input: ${input.name}`);
+                }
+            },
+            () => console.error("Failed to access MIDI devices.")
+        );
+    } else {
+        console.log("Web MIDI API is not supported in this browser.");
     }
+}
+
+let sensorHandlersBound = false;
+let midiHandlersBound = false;
+
+// Function to activate MIDI and Sensors on user interaction
+async function activateMIDISensors() {
 
-    // Function to suspend AudioContext, deactivate MIDI and Sensors on user interaction
-    async function deactivateAudioMIDISensors() {
-
-        // Suspend the AudioContext
-        if (audioContext.state === 'running') {
-            await audioContext.suspend();
-        }
-
-        // Deactivate sensor listeners
-        if (sensorHandlersBound) {
-            faustNode.stopSensors();
-            sensorHandlersBound = false;
-        }
-
-        // Deactivate the MIDI setup
-        if (midiHandlersBound && FAUST_DSP_VOICES > 0) {
-            stopMIDI();
-            midiHandlersBound = false;
-        }
+    // Import the create-node module
+    const { connectToAudioInput, requestPermissions } = await import("./create-node.js");
+
+    // Request permission for sensors
+    await requestPermissions();
+
+    // Activate sensor listeners
+    if (!sensorHandlersBound) {
+        await faustNode.startSensors();
+        sensorHandlersBound = true;
+    }
+
+    // Initialize the MIDI setup
+    if (!midiHandlersBound && FAUST_DSP_VOICES > 0) {
+        startMIDI();
+        midiHandlersBound = true;
     }
 
-    // Add event listeners for user interactions
+    // Connect the Faust node to the audio output
+    faustNode.connect(audioContext.destination);
 
-    // Activate AudioContext, MIDI and Sensors on user interaction
-    window.addEventListener('click', activateAudioMIDISensors);
-    window.addEventListener('touchstart', activateAudioMIDISensors);
+    // Connect the Faust node to the audio input
+    if (faustNode.numberOfInputs > 0) {
+        await connectToAudioInput(audioContext, null, faustNode, null);
+    }
+
+    // Resume the AudioContext
+    if (audioContext.state === 'suspended') {
+        await audioContext.resume();
+    }
+}
 
-    // Deactivate AudioContext, MIDI and Sensors on user interaction
-    window.addEventListener('visibilitychange', function () {
-        if (window.visibilityState === 'hidden') {
-            deactivateAudioMIDISensors();
-        }
+// Function to suspend AudioContext, deactivate MIDI and Sensors on user interaction
+async function deactivateAudioMIDISensors() {
+
+    // Suspend the AudioContext
+    if (audioContext.state === 'running') {
+        await audioContext.suspend();
+    }
+
+    // Deactivate sensor listeners
+    if (sensorHandlersBound) {
+        faustNode.stopSensors();
+        sensorHandlersBound = false;
+    }
+
+    // Deactivate the MIDI setup
+    if (midiHandlersBound && FAUST_DSP_VOICES > 0) {
+        stopMIDI();
+        midiHandlersBound = false;
+    }
+}
+
+// Event listener to handle user interaction
+function handleUserInteraction() {
+
+    // Resume AudioContext synchronously
+    resumeAudioContext();
+
+    // Launch the activation of MIDI and Sensors
+    activateMIDISensors().catch(error => {
+        console.error('Error when activating audio, MIDI and sensors:', error);
     });
+}
+
+// Activate AudioContext, MIDI and Sensors on user interaction
+window.addEventListener('click', handleUserInteraction);
+window.addEventListener('touchstart', handleUserInteraction);
+
+// Deactivate AudioContext, MIDI and Sensors on user interaction
+window.addEventListener('visibilitychange', function () {
+    if (window.visibilityState === 'hidden') {
+        deactivateAudioMIDISensors();
+    }
+});
+
 
-})();

package/assets/standalone/index-template.js

@@ -1,17 +1,49 @@
 // Set to > 0 if the DSP is polyphonic
 const FAUST_DSP_VOICES = 0;
 
-(async () => {
-    const { createFaustNode } = await import("./create-node.js");
+// Declare faustNode as a global variable
+let faustNode;
+
+// Create audio context activation button
+/** @type {HTMLButtonElement} */
+const $buttonDsp = document.getElementById("button-dsp");
+
+// Create audio context
+const AudioCtx = window.AudioContext || window.webkitAudioContext;
+const audioContext = new AudioCtx({ latencyHint: 0.00001 });
+
+// Activate AudioContext and Sensors on user interaction
+$buttonDsp.disabled = true;
+let sensorHandlersBound = false;
+$buttonDsp.onclick = async () => {
 
-    // Create audio context
-    const AudioCtx = window.AudioContext || window.webkitAudioContext;
-    const audioContext = new AudioCtx({ latencyHint: 0.00001 });
-    audioContext.suspend();
+    // Import the requestPermissions function
+    const { requestPermissions } = await import("./create-node.js");
 
-    // Create audio context activation button
-    /** @type {HTMLButtonElement} */
-    const $buttonDsp = document.getElementById("button-dsp");
+    // Request permission for sensors
+    await requestPermissions();
+
+    // Activate sensor listeners
+    if (!sensorHandlersBound) {
+        await faustNode.startSensors();
+        sensorHandlersBound = true;
+    }
+
+    // Activate or suspend the AudioContext
+    if (audioContext.state === "running") {
+        $buttonDsp.textContent = "Suspended";
+        await audioContext.suspend();
+    } else if (audioContext.state === "suspended") {
+        $buttonDsp.textContent = "Running";
+        await audioContext.resume();
+        if (FAUST_DSP_VOICES) play(faustNode);
+    }
+}
+
+// Called at load time
+(async () => {
+
+    const { createFaustNode, connectToAudioInput } = await import("./create-node.js");
 
     const play = (node) => {
         node.keyOn(0, 60, 100);
@@ -20,21 +52,10 @@ const FAUST_DSP_VOICES = 0;
         setTimeout(() => node.allNotesOff(), 5000);
         setTimeout(() => play(node), 7000);
     }
-    // Function to activate audio context
-    $buttonDsp.disabled = true;
-    $buttonDsp.onclick = async () => {
-        if (audioContext.state === "running") {
-            $buttonDsp.textContent = "Suspended";
-            await audioContext.suspend();
-        } else if (audioContext.state === "suspended") {
-            $buttonDsp.textContent = "Running";
-            await audioContext.resume();
-            if (FAUST_DSP_VOICES) play(faustNode);
-        }
-    }
 
     // Create Faust node
-    const { faustNode, dspMeta: { name } } = await createFaustNode(audioContext, "FAUST_DSP_NAME", FAUST_DSP_VOICES);
+    const result = await createFaustNode(audioContext, "FAUST_DSP_NAME", FAUST_DSP_VOICES);
+    faustNode = result.faustNode;  // Assign to the global variable
     if (!faustNode) throw new Error("Faust DSP not compiled");
 
     // Connect the Faust node to the audio output
@@ -42,7 +63,6 @@ const FAUST_DSP_VOICES = 0;
 
     // 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);
     }
 
@@ -51,4 +71,5 @@ const FAUST_DSP_VOICES = 0;
 
     // Set page title to the DSP name
     document.title = name;
+
 })();

package/assets/standalone/index.js

@@ -41,82 +41,85 @@ audioContext.suspend();
 
 $buttonDsp.disabled = true;
 
-/**
- * @param {FaustAudioWorkletNode} faustNode 
- */
-const buildAudioDeviceMenu = async (faustNode) => {
-
-    const { connectToAudioInput } = await import("./create-node.js");
-
-    let inputStreamNode = null;
-    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);
+// Declare faustNode as a global variable
+let faustNode;
+
+// Called at load time
+(async () => {
+
+    const { createFaustNode, connectToAudioInput, createFaustUI } = await import("./create-node.js");
+
+    /**
+    * @param {FaustAudioWorkletNode} faustNode 
+    */
+    const buildAudioDeviceMenu = async (faustNode) => {
+
+        let inputStreamNode = null;
+        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;
+            if (faustNode.getNumInputs() > 0) {
+                inputStreamNode = await connectToAudioInput(audioContext, id, faustNode, inputStreamNode);
             }
-        });
-    }
-    await handleDeviceChange();
-    navigator.mediaDevices.addEventListener("devicechange", handleDeviceChange)
-    $selectAudioInput.onchange = async () => {
-        const id = $selectAudioInput.value;
+        };
+
+        // Connect to the default audio input device
         if (faustNode.getNumInputs() > 0) {
-            inputStreamNode = await connectToAudioInput(audioContext, id, faustNode, inputStreamNode);
+            inputStreamNode = await connectToAudioInput(audioContext, null, faustNode, inputStreamNode);
         }
     };
 
-    // Connect to the default audio input device
-    if (faustNode.getNumInputs() > 0) {
-        inputStreamNode = await connectToAudioInput(audioContext, null, faustNode, inputStreamNode);
-    }
-};
-
-/**
- * @param {FaustAudioWorkletNode} faustNode 
- */
-const buildMidiDeviceMenu = async (faustNode) => {
-    const midiAccess = await navigator.requestMIDIAccess();
-    /** @type {WebMidi.MIDIInput} */
-    let currentInput;
     /**
-     * @param {WebMidi.MIDIMessageEvent} e
+     * @param {FaustAudioWorkletNode} faustNode 
      */
-    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);
-        });
+    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);
+        };
     };
-    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);
-    };
-};
-
-(async () => {
 
-    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);
+    const result = await createFaustNode(audioContext, "FAUST_DSP_NAME", FAUST_DSP_VOICES);
+    faustNode = result.faustNode;  // Assign to the global variable
     if (!faustNode) throw new Error("Faust DSP not compiled");
 
     // Create the Faust UI
-    const { createFaustUI } = await import("./create-node.js");
     await createFaustUI($divFaustUI, faustNode);
 
     // Connect the Faust node to the audio output
@@ -130,22 +133,34 @@ const buildMidiDeviceMenu = async (faustNode) => {
     if (navigator.requestMIDIAccess) await buildMidiDeviceMenu(faustNode);
     else $spanMidiInput.hidden = true;
 
-    // Set the title and enable the DSP button
-    $buttonDsp.disabled = false;
-    document.title = name;
-    let sensorHandlersBound = false;
-    $buttonDsp.onclick = async () => {
-        // Activate sensor listeners
-        if (!sensorHandlersBound) {
-            await faustNode.startSensors();
-            sensorHandlersBound = true;
-        }
-        if (audioContext.state === "running") {
-            $buttonDsp.textContent = "Suspended";
-            await audioContext.suspend();
-        } else if (audioContext.state === "suspended") {
-            $buttonDsp.textContent = "Running";
-            await audioContext.resume();
-        }
-    }
 })();
+
+// Set the title and enable the DSP button
+$buttonDsp.disabled = false;
+document.title = name;
+let sensorHandlersBound = false;
+
+// Activate AudioContext and Sensors on user interaction
+$buttonDsp.onclick = async () => {
+
+    // Import the requestPermissions function
+    const { requestPermissions } = await import("./create-node.js");
+
+    // Request permission for sensors
+    await requestPermissions();
+
+    // Activate sensor listeners
+    if (!sensorHandlersBound) {
+        await faustNode.startSensors();
+        sensorHandlersBound = true;
+    }
+
+    // Activate or suspend the AudioContext
+    if (audioContext.state === "running") {
+        $buttonDsp.textContent = "Suspended";
+        await audioContext.suspend();
+    } else if (audioContext.state === "suspended") {
+        $buttonDsp.textContent = "Running";
+        await audioContext.resume();
+    }
+}

package/assets/standalone/service-worker.js

@@ -29,7 +29,7 @@ const POLY_EFFECT_RESOURCES = [
     "./effect-meta.json",
 ];
 
-/**@type {ServiceWorkerGlobalScope} */
+/** @type {ServiceWorkerGlobalScope} */
 const serviceWorkerGlobalScope = self;
 
 /**
@@ -48,26 +48,65 @@ serviceWorkerGlobalScope.addEventListener("install", (event) => {
     })());
 });
 
-serviceWorkerGlobalScope.addEventListener("activate", () => console.log("Service worker activated"));
+serviceWorkerGlobalScope.addEventListener("activate", (event) => {
+    console.log("Service worker activated");
+    event.waitUntil(
+        clients.claim().then(() => {
+            return clients.matchAll({ type: "window" }).then((clients) => {
+                clients.forEach((client) => {
+                    client.navigate(client.url);
+                });
+            });
+        })
+    );
+});
+
+/** @type {(response: Response) => Response} */
+const getCrossOriginIsolatedResponse = (response) => {
+    // Modify headers to include COOP & COEP
+    const headers = new Headers(response.headers);
+    headers.set("Cross-Origin-Opener-Policy", "same-origin");
+    headers.set("Cross-Origin-Embedder-Policy", "require-corp");
+
+    // Create a new response with the modified headers
+    const modifiedResponse = new Response(response.body, {
+        status: response.status,
+        statusText: response.statusText,
+        headers
+    });
 
+    return modifiedResponse;
+};
+
+/**
+ * Intercept fetch requests to enforce COOP and COEP headers.
+ */
 serviceWorkerGlobalScope.addEventListener("fetch", (event) => {
+
     event.respondWith((async () => {
         const cache = await caches.open(CACHE_NAME);
         const cachedResponse = await cache.match(event.request);
+
         if (cachedResponse) {
-            return cachedResponse;
+            return getCrossOriginIsolatedResponse(cachedResponse);
         } else {
             try {
                 const fetchResponse = await fetch(event.request);
-                // Ensure the response is valid before caching it
+
                 if (event.request.method === "GET" && fetchResponse && fetchResponse.status === 200 && fetchResponse.type === "basic") {
-                    cache.put(event.request, fetchResponse.clone());
+                    const modifiedResponse = getCrossOriginIsolatedResponse(fetchResponse);
+                    // Store the modified response in the cache
+                    await cache.put(event.request, modifiedResponse.clone());
+                    // Return the modified response to the browser
+                    return modifiedResponse;
                 }
+
                 return fetchResponse;
-            } catch (e) {
-                // Network access failure
-                console.log("Network access error", e);
+            } catch (error) {
+                console.error("Network access error", error);
+                return new Response("Network error", { status: 503, statusText: "Service Unavailable" });
             }
         }
     })());
 });
+