parallelize webchuck load time (2x faster)

ccrma · Nov 10, 2024 · 37959ef · 37959ef
1 parent 52afa5e
commit 37959ef
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 19 deletions.
diff --git a/dist/Chuck.js b/dist/Chuck.js
@@ -120,17 +120,19 @@ export default class Chuck extends window.AudioWorkletNode {
      * @returns WebChucK ChucK instance
      */
     static async init(filenamesToPreload, audioContext, numOutChannels = 2, whereIsChuck = "https://chuck.stanford.edu/webchuck/src/") {
-        const wasm = await loadWasm(whereIsChuck);
         let defaultAudioContext = false;
-        // If an audioContext is not given, create a default one
+        // If audioContext is undefined, create new AudioContext
         if (audioContext === undefined) {
             audioContext = new AudioContext();
             defaultAudioContext = true;
         }
-        await audioContext.audioWorklet.addModule(whereIsChuck + "webchuck.js");
         // Add Chugins to filenamesToPreload
         filenamesToPreload = filenamesToPreload.concat(Chuck.chuginsToLoad);
-        const preloadedFiles = await preloadFiles(filenamesToPreload);
+        const [wasm, _, preloadedFiles] = await Promise.all([
+            loadWasm(whereIsChuck),
+            audioContext.audioWorklet.addModule(whereIsChuck + "webchuck.js"),
+            preloadFiles(filenamesToPreload),
+        ]);
         const chuck = new Chuck(preloadedFiles, audioContext, wasm, numOutChannels);
         // Remember the chugins that were loaded
         chuck.chugins = Chuck.chuginsToLoad.map((chugin) => chugin.virtualFilename.split("/").pop());

diff --git a/dist/accel/Accel.js b/dist/accel/Accel.js
@@ -101,7 +101,7 @@ export default class Accel {
     handleMotion(event) {
         this.accelActive();
         if (this._accelActive) {
-            if (event.acceleration != null) {
+            if (event.acceleration !== null) {
                 this.theChuck.setFloat("_accelX", event.acceleration.x ? event.acceleration.x : 0.0);
                 this.theChuck.setFloat("_accelY", event.acceleration.y ? event.acceleration.y : 0.0);
                 this.theChuck.setFloat("_accelZ", event.acceleration.z ? event.acceleration.z : 0.0);

diff --git a/dist/utils.js b/dist/utils.js
@@ -41,7 +41,7 @@ export async function preloadFiles(filenamesToPreload) {
     return await Promise.all(promises);
 }
 export async function loadWasm(whereIsChuck) {
-    return await new Promise((resolve, reject) => {
+    return new Promise((resolve, reject) => {
         asyncLoadFile(whereIsChuck + "webchuck.wasm", resolve, reject);
     });
 }

diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "test": "npm run build && bash ./test.sh",
     "clean": "rm -rf dist/ && rm -rf docs/ && rm -rf src/wc-bundle.js",
     "doc": "typedoc --out docs src/index.ts",
-    "format": "prettier --write src/**/*.ts",
+    "format": "prettier --write src/*.ts src/**/*.ts",
     "prepare": "npm run build",
     "postversion": "git push && git push --tags"
   },

diff --git a/src/Chuck.ts b/src/Chuck.ts
@@ -145,20 +145,21 @@ export default class Chuck extends window.AudioWorkletNode {
     numOutChannels: number = 2,
     whereIsChuck: string = "https://chuck.stanford.edu/webchuck/src/", // default Chuck src location
   ): Promise<Chuck> {
-    const wasm = await loadWasm(whereIsChuck);
-
     let defaultAudioContext: boolean = false;
     // If an audioContext is not given, create a default one
     if (audioContext === undefined) {
       audioContext = new AudioContext();
       defaultAudioContext = true;
     }
-    await audioContext.audioWorklet.addModule(whereIsChuck + "webchuck.js");
 
     // Add Chugins to filenamesToPreload
     filenamesToPreload = filenamesToPreload.concat(Chuck.chuginsToLoad);
 
-    const preloadedFiles = await preloadFiles(filenamesToPreload);
+    const [wasm, _, preloadedFiles] = await Promise.all([
+      loadWasm(whereIsChuck),
+      audioContext.audioWorklet.addModule(whereIsChuck + "webchuck.js"),
+      preloadFiles(filenamesToPreload),
+    ]);
 
     const chuck = new Chuck(preloadedFiles, audioContext, wasm, numOutChannels);
 

diff --git a/src/gyro/Gyro.ts b/src/gyro/Gyro.ts
@@ -57,7 +57,7 @@ export default class Gyro {
    * This adds a `Gyro` and `GyroMsg` class to the ChucK Virtual Machine (VM).
    * Gyrscope event (DeviceOrientationEvent) listeners are added if `enableGyro`
    * is true (default).
-   * 
+   *
    * @example
    * ```ts
    * theChuck = await Chuck.init([]);

diff --git a/src/utils.ts b/src/utils.ts
@@ -78,7 +78,7 @@ export async function preloadFiles(filenamesToPreload: Filename[]): Promise<File
 }
 
 export async function loadWasm(whereIsChuck: string): Promise<ArrayBuffer> {
-  return await new Promise((resolve, reject) => {
+  return new Promise((resolve, reject) => {
     asyncLoadFile(whereIsChuck + "webchuck.wasm", resolve, reject);
   });
 }

diff --git a/src/wc-bundle.js b/src/wc-bundle.js
@@ -78,7 +78,7 @@ async function preloadFiles(filenamesToPreload) {
     return await Promise.all(promises);
 }
 async function loadWasm(whereIsChuck) {
-    return await new Promise((resolve, reject) => {
+    return new Promise((resolve, reject) => {
         asyncLoadFile(whereIsChuck + "webchuck.wasm", resolve, reject);
     });
 }
@@ -284,17 +284,19 @@ class Chuck extends window.AudioWorkletNode {
      * @returns WebChucK ChucK instance
      */
     static async init(filenamesToPreload, audioContext, numOutChannels = 2, whereIsChuck = "https://chuck.stanford.edu/webchuck/src/") {
-        const wasm = await loadWasm(whereIsChuck);
         let defaultAudioContext = false;
-        // If an audioContext is not given, create a default one
+        // If audioContext is undefined, create new AudioContext
         if (audioContext === undefined) {
             audioContext = new AudioContext();
             defaultAudioContext = true;
         }
-        await audioContext.audioWorklet.addModule(whereIsChuck + "webchuck.js");
         // Add Chugins to filenamesToPreload
         filenamesToPreload = filenamesToPreload.concat(Chuck.chuginsToLoad);
-        const preloadedFiles = await preloadFiles(filenamesToPreload);
+        const [wasm, _, preloadedFiles] = await Promise.all([
+            loadWasm(whereIsChuck),
+            audioContext.audioWorklet.addModule(whereIsChuck + "webchuck.js"),
+            preloadFiles(filenamesToPreload),
+        ]);
         const chuck = new Chuck(preloadedFiles, audioContext, wasm, numOutChannels);
         // Remember the chugins that were loaded
         chuck.chugins = Chuck.chuginsToLoad.map((chugin) => chugin.virtualFilename.split("/").pop());
@@ -1961,7 +1963,7 @@ class Accel {
     handleMotion(event) {
         this.accelActive();
         if (this._accelActive) {
-            if (event.acceleration != null) {
+            if (event.acceleration !== null) {
                 this.theChuck.setFloat("_accelX", event.acceleration.x ? event.acceleration.x : 0.0);
                 this.theChuck.setFloat("_accelY", event.acceleration.y ? event.acceleration.y : 0.0);
                 this.theChuck.setFloat("_accelZ", event.acceleration.z ? event.acceleration.z : 0.0);

diff --git a/test/speed.html b/test/speed.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>WebChucK Load Test</title>
+</head>
+
+<body>
+  <h1>WebChucK Load Speed Test</h1>
+  <p id="load-time">loading...</p>
+  <button id="action" disabled>Start and Play</button>
+
+  <script type="module">
+
+    const start = performance.now();
+    import { Chuck } from '../src/wc-bundle.js';
+    const theChuck = await Chuck.init([]);
+    const end = performance.now();
+    // print in milliseconds
+    const time = (end - start).toFixed(2);
+    document.getElementById('load-time').textContent = `load time: ${time} ms`;
+
+
+
+    document.getElementById('action').disabled = false;
+
+    document.getElementById('action').addEventListener('click', async () => {
+      // Initialize default ChucK object
+      if (theChuck.context.state === "suspended") {
+        await theChuck.context.resume();
+      }
+      // Run ChucK code
+      theChuck.runCode(`
+          SinOsc sin => dac;
+          440 => sin.freq;
+          1::second => now;
+        `);
+    });
+  </script>
+</body>
+
+</html>