Web demo improvements (#74)

picoliu · web-flow · commit 8a718eb672c9 · 2025-03-17T14:10:36.000-07:00
diff --git a/.github/workflows/web-demos.yml b/.github/workflows/web-demos.yml
@@ -25,7 +25,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x, 18.x, 20.x]
+        node-version: [18.x, 20.x, 22.x]
 
     steps:
     - uses: actions/checkout@v3
@@ -43,4 +43,4 @@ jobs:
       run: npm install yarn
 
     - name: Install dependencies
-      run: yarn install
+      run: yarn install
diff --git a/demo/web/.prettierignore b/demo/web/.prettierignore
@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage
diff --git a/demo/web/.prettierrc b/demo/web/.prettierrc
@@ -0,0 +1 @@
+{}
diff --git a/demo/web/eslint.config.mjs b/demo/web/eslint.config.mjs
@@ -0,0 +1,23 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  { files: ["**/*.js"], languageOptions: { sourceType: "commonjs" } },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        KoalaWeb: "readonly",
+        modelParams: "readonly",
+      },
+    },
+  },
+  pluginJs.configs.recommended,
+  {
+    rules: {
+      "no-unused-vars": ["off"],
+    },
+  },
+];
diff --git a/demo/web/index.html b/demo/web/index.html
@@ -1,281 +1,26 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <script src="node_modules/@picovoice/web-voice-processor/dist/iife/index.js"></script>
     <script src="node_modules/@picovoice/koala-web/dist/iife/index.js"></script>
     <script src="koala_params.js"></script>
-    <script type="application/javascript">
-      let koala = null;
-
-      let originalBuffer;
-      let enhancedBuffer;
-      let outputFrames;
-
-      window.onload = function () {
-        const audioContext = new (window.AudioContext || window.webKitAudioContext)(
-                {sampleRate: 16000}
-        );
-
-        const originalAudioGain = audioContext.createGain();
-        originalAudioGain.gain.value = 0;
-
-        const enhancedAudioGain = audioContext.createGain();
-        enhancedAudioGain.gain.value = 1;
-
-        originalAudioGain.connect(audioContext.destination);
-        enhancedAudioGain.connect(audioContext.destination);
-
-        let originalAudioSource;
-        let enhancedAudioSource;
-        let isPlaying = false;
-
-        function readAudioFile(selectedFile, callback) {
-          let reader = new FileReader();
-          reader.onload = function (ev) {
-            let wavBytes = reader.result;
-            audioContext.decodeAudioData(wavBytes, callback);
-          };
-          reader.readAsArrayBuffer(selectedFile);
-        }
-
-        const fileSelector = document.getElementById("audioFile");
-        fileSelector.addEventListener("change", async (event) => {
-          outputFrames = [];
-          resultBox.style.display = "none";
-
-          originalAudioSource?.stop();
-          enhancedAudioSource?.stop();
-
-          writeMessage("Loading audio file...");
-          const fileList = event.target.files;
-          readAudioFile(fileList[0], async (audioBuffer) => {
-            const f32PCM = audioBuffer.getChannelData(0);
-            const i16PCM = new Int16Array(f32PCM.length);
-
-            const INT16_MAX = 32767;
-            const INT16_MIN = -32768;
-            i16PCM.set(
-              f32PCM.map((f) => {
-                let i = Math.trunc(f * INT16_MAX);
-                if (f > INT16_MAX) i = INT16_MAX;
-                if (f < INT16_MIN) i = INT16_MIN;
-                return i;
-              })
-            );
-
-            writeMessage("Processing audio file...");
-            const splitPcm = [];
-            await koala.reset();
-            for (let i = 0; i < (i16PCM.length - koala.frameLength + 1); i += koala.frameLength) {
-              const split = i16PCM.slice(i, i + koala.frameLength);
-              splitPcm.push(split);
-              await koala.process(split);
-            }
-
-            writeMessage("Waiting for Koala engine to finish processing audio file...");
-            await waitForProcess(splitPcm, outputFrames);
-
-            originalBuffer = createBuffer(i16PCM);
-            enhancedBuffer = createBuffer(mergeFrames(outputFrames, koala.delaySample));
-
-            writeMessage("Press 'Play' to listen to recording. Move the slider to play around with noise.");
-            resultBox.style.display = "block";
-          });
-        });
-
-        const displayTimer = document.getElementById("displayTimer");
-        const recordButton = document.getElementById("recordAudio");
-        const stopRecord = document.getElementById("stopRecord");
-        const resultBox = document.getElementById("result");
-        const volumeControl = document.getElementById("volumeControl");
-        const playAudio = document.getElementById("playAudio");
-
-        let timer = null;
-        let currentTimer = 0.0;
-        let audioData = [];
-        const recorderEngine = {
-          onmessage: (event) => {
-            switch (event.data.command) {
-              case "process":
-                audioData.push(event.data.inputFrame);
-                break;
-            }
-          }
-        }
-
-        recordButton.addEventListener("click", async () => {
-          displayTimer.style.display = "inline";
-          stopRecord.style.display = "inline";
-          recordButton.style.display = "none";
-          resultBox.style.display = "none";
-
-          originalAudioSource?.stop();
-          enhancedAudioSource?.stop();
-
-          currentTimer = 0.0;
-          audioData = [];
-          outputFrames = [];
-
-          try {
-            writeMessage("Recording audio...");
-            window.WebVoiceProcessor.WebVoiceProcessor.setOptions({
-              frameLength: koala.frameLength
-            });
-            await window.WebVoiceProcessor.WebVoiceProcessor.subscribe([recorderEngine, koala]);
-            timer = setInterval(() => {
-              currentTimer += 0.1;
-              displayTimer.innerText = `${currentTimer.toFixed(1)} / 120`;
-              if (currentTimer === 120) {
-                stopRecord.click();
-              }
-            }, 100);
-          } catch (e) {
-            writeMessage(e);
-          }
-        });
-
-        stopRecord.addEventListener("click", async () => {
-          displayTimer.style.display = "none";
-          stopRecord.style.display = "none";
-          recordButton.style.display = "inline";
-
-          await window.WebVoiceProcessor.WebVoiceProcessor.unsubscribe([recorderEngine, koala]);
-          clearInterval(timer);
-
-          writeMessage("Waiting for Koala engine to finish processing...")
-          await waitForProcess(audioData, outputFrames);
-
-          originalBuffer = createBuffer(mergeFrames(audioData));
-          enhancedBuffer = createBuffer(mergeFrames(outputFrames, koala.delaySample));
-
-          writeMessage("Press 'Play' to listen to recording. Move the slider to play around with noise.");
-          resultBox.style.display = "block";
-        });
-
-        volumeControl.addEventListener("input", (e) => {
-          originalAudioGain.gain.value = 1 - e.target.value;
-          enhancedAudioGain.gain.value = e.target.value;
-        });
-
-        playAudio.addEventListener("click", () => {
-          if (!isPlaying) {
-            isPlaying = true;
-            const current_time = audioContext.currentTime;
-
-            originalAudioSource = audioContext.createBufferSource();
-            enhancedAudioSource = audioContext.createBufferSource();
-
-            originalAudioSource.buffer = originalBuffer;
-            originalAudioSource.loop = true;
-            originalAudioSource.connect(originalAudioGain);
-            originalAudioSource.start(current_time + 0.2);
-
-            enhancedAudioSource.buffer = enhancedBuffer;
-            enhancedAudioSource.loop = true;
-            enhancedAudioSource.connect(enhancedAudioGain);
-            enhancedAudioSource.start(current_time + 0.2);
-
-            playAudio.innerHTML = "Stop"
-          } else {
-            isPlaying = false;
-
-            originalAudioSource.stop();
-            enhancedAudioSource.stop();
-
-            playAudio.innerHTML = "Play"
-          }
-        });
-
-        function mergeFrames(data, delaySample = 0) {
-          let delay = 0;
-
-          const pcm = new Int16Array(data.length * koala.frameLength);
-          for (let i = 0; i < data.length; i++) {
-            if (i * koala.frameLength < delaySample) {
-              delay += 1;
-            } else {
-              pcm.set(data[i], (i - delay) * koala.frameLength);
-            }
-          }
-          return pcm;
-        }
-
-        function createBuffer(data) {
-          const buffer = audioContext.createBuffer(1, data.length, koala.sampleRate);
-          const source = new Float32Array(data.length);
-          for (let i = 0; i < data.length; i++){
-            source[i] = data[i] < 0 ? data[i] / 32768 : data[i] / 32767;
-          }
-          buffer.copyToChannel(source, 0);
-          return buffer;
-        }
-
-        async function waitForProcess(input, output) {
-          return new Promise(resolve => {
-            setInterval(() => {
-              if (input.length === output.length) {
-                resolve();
-              }
-            }, 100)
-          });
-        }
-      }
-
-      function writeMessage(message) {
-        console.log(message);
-        document.getElementById("status").innerHTML = message;
-      }
-
-      function processErrorCallback(error) {
-        writeMessage(error);
-      }
-
-      function processCallback(enhancedPcm) {
-        outputFrames.push(enhancedPcm);
-      }
-
-      async function startKoala(accessKey) {
-        writeMessage("Koala is loading. Please wait...");
-        try {
-          koala = await KoalaWeb.KoalaWorker.create(
-                  accessKey,
-                  processCallback,
-                  { base64: modelParams },
-                  { processErrorCallback: processErrorCallback }
-          );
-
-          writeMessage("Koala worker ready!");
-
-          writeMessage(
-                  "WebVoiceProcessor initializing. Microphone permissions requested ..."
-          );
-          window.WebVoiceProcessor.WebVoiceProcessor.setOptions({
-            frameLength: koala.frameLength
-          });
-          document.getElementById("control").style.display = "block";
-          writeMessage("Koala worker is ready!");
-        } catch (err) {
-          processErrorCallback(err);
-        }
-      }
-    </script>
+    <script type="application/javascript" src="scripts/koala.js"></script>
   </head>
   <body>
     <h1>Koala Web Demo</h1>
     <p>This demo uses Koala for Web and the WebVoiceProcessor to:</p>
     <ol>
+      <li>Create an instance of Koala with the model file provided.</li>
       <li>
-        Create an instance of Koala with the model file provided.
+        Select an audio file or acquire microphone (& ask permission) data
+        stream and convert to voice processing format (16kHz 16-bit linear PCM).
+        The downsampled audio is forwarded to the Koala engine. The audio
+        <i>does not</i> leave the browser: all processing is occurring via the
+        Koala WebAssembly code.
       </li>
       <li>
-        Select an audio file or acquire microphone (& ask permission) data stream and convert to voice
-        processing format (16kHz 16-bit linear PCM). The downsampled audio is
-        forwarded to the Koala engine. The audio <i>does not</i> leave the
-        browser: all processing is occurring via the Koala WebAssembly code.
-      </li>
-      <li>
-        Enhance audio real time using Koala engine. Output both original and enhanced
-        audio.
+        Enhance audio real time using Koala engine. Output both original and
+        enhanced audio.
       </li>
     </ol>
     After entering the AccessKey, click the "Start Koala" button.
@@ -291,29 +36,38 @@ <h1>Koala Web Demo</h1>
       value="Start Koala"
       onclick="startKoala(document.getElementById('accessKey').value)"
     />
-    <hr/>
+    <hr />
     <div id="control" style="display: none">
       <label for="audioFile">Choose audio file to enhance:</label>
-      <input type="file" id="audioFile" name="audioFile"/>
+      <input type="file" id="audioFile" name="audioFile" />
       <p><b>OR</b></p>
-      <label for="recordAudio">Record audio to enhance (up to 2 minutes):</label>
+      <label for="recordAudio"
+        >Record audio to enhance (up to 2 minutes):</label
+      >
       <button id="recordAudio">Record Audio</button>
-      <span id="displayTimer" style="display: none;"></span>
-      <button id="stopRecord" style="display: none;">Stop Recording</button>
-      <hr/>
+      <span id="displayTimer" style="display: none"></span>
+      <button id="stopRecord" style="display: none">Stop Recording</button>
+      <hr />
     </div>
     <div id="status"></div>
-    <br>
+    <br />
     <div id="result" style="display: none">
       <label>
         Original
-        <input type="range" id="volumeControl" min="0" max="1" value="1" step="0.01" />
+        <input
+          type="range"
+          id="volumeControl"
+          min="0"
+          max="1"
+          value="1"
+          step="0.01"
+        />
         Koalafied
-        <br>
-        <br>
+        <br />
+        <br />
         <button id="playAudio">Play</button>
       </label>
     </div>
-    <br>
+    <br />
   </body>
 </html>
diff --git a/demo/web/package.json b/demo/web/package.json
@@ -22,6 +22,10 @@
     "@picovoice/web-voice-processor": "~4.0.8"
   },
   "devDependencies": {
-    "http-server": "^14.0.0"
+    "@eslint/js": "^9.22.0",
+    "eslint": "^9.22.0",
+    "globals": "^16.0.0",
+    "http-server": "^14.0.0",
+    "prettier": "3.5.1"
   }
 }
diff --git a/demo/web/scripts/koala.js b/demo/web/scripts/koala.js
diff --git a/demo/web/yarn.lock b/demo/web/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# Ignore artifacts:`
	`2`	`+build`
	`3`	`+coverage`
Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,10 @@`
`22`	`22`	`"@picovoice/web-voice-processor": "~4.0.8"`
`23`	`23`	`},`
`24`	`24`	`"devDependencies": {`
`25`		`- "http-server": "^14.0.0"`
	`25`	`+ "@eslint/js": "^9.22.0",`
	`26`	`+ "eslint": "^9.22.0",`
	`27`	`+ "globals": "^16.0.0",`
	`28`	`+ "http-server": "^14.0.0",`
	`29`	`+ "prettier": "3.5.1"`
`26`	`30`	`}`
`27`	`31`	`}`