How to Add Noise Suppression to any Web App

Learn how to add Noise Suppression, like the Krisp noise-cancelling app, to any web app. In this tutorial, We use Picovoice Koala Noise Suppression Web SDK. Koala Noise Suppression performs speech enhancement locally, keeping your voice data private (i.e. GDPR and HIPAA-compliant by design). Furthermore, by running on the device, Koala guarantees real-time processing with minimum latency.

Noise Suppression is also known as Noise Cancellation and Speech Enhancement.

Implementation

Create a new folder and initialize an NPM project:

npm init

Install the dependencies:

npm install @picovoice/web-voice-processor @picovoice/koala-web

Install http-server as a development dependency:

npm install http-server --save-dev

Download the Koala Noise Suppression model (i.e. Deep Neural Network). From the project folder, run the following to turn the binary model into a base64 string. Remember to replace ${DOWNLOADED_MODEL_PATH} with the path to the model you downloaded (e.g. ~/Downloads/koala_params.pv on my Ubuntu machine).

npx pvbase64 -i ${DOWNLOADED_MODEL_PATH} -o koala_params.js

Create a boilerplate HTML file called index.html with the content below:

<!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>
</head>
<body>
  <h1>Koala Web Demo</h1>
</body>
</html>

Run the local server to load the page:

yarn run http-server -a localhost -p 5000

You can see the page at http://localhost:5000.

Log in to (sign up for) Picovoice Console. It is free, and no credit card is required! Copy your AccessKey to the clipboard.

Add JavaScript code to initialize Koala Noise Suppression, record audio using the microphone, and process in real-time using Koala Noise Suppression. Remember to replace ${ACCESS_KEY} with your AccessKey copied from the Picovoice Console.

<script type="application/javascript">
function errorCallback(error) {
  console.log(error);
}

function processErrorCallback(error) {
  console.log(error);
}

function processCallback(enhancedPcm) {
  console.log(enhancedPcm)
}

async function startKoala() {
  try {
    let koala = await KoalaWeb.KoalaWorker.create(
      ${ACCESS_KEY},
      processCallback,
      { base64: modelParams },
      { processErrorCallback: processErrorCallback }
    );
    
    await window.WebVoiceProcessor.
      WebVoiceProcessor.subscribe(koala);
  } catch (err) {
    errorCallback(err);
  }
}
</script>

Add start button:

<input
  type="button"
  id="submit"
  value="Start Koala"
  onclick="startKoala()"
/>

Press the start button and monitor the console logs.

Source Code

The source code for a fully-working demo with Koala Noise Suppression is available on GitHub. For more information, check out the Koala Noise Suppression product page or refer to the Koala Noise Suppression Web SDK quick start guide.

Start Building

How to Add Noise Suppression to any Web App

Implementation

Source Code

More from Picovoice