DEV Community

Khushi Nakra
Khushi Nakra

Posted on

Implement Noise Suppression in JavaScript

#javascript #web #audio #tutorial

Noise suppression can significantly improve the audio quality in any web app. This tutorial shows how to integrate the Koala Noise Suppression Web SDK from Picovoice and run speech enhancement directly in the browser. Since processing happens on-device, audio never leaves the user's machine, keeping voice data private with low latency.

What You'll Build

A simple webpage that accesses the microphone and applies Koala's noise-suppression model. This serves as a foundation for building voice chat tools, meeting apps, or any browser-based audio application.

1. Create a New Web Project 

npm init
Enter fullscreen mode Exit fullscreen mode

2. Install Dependencies 

npm install @picovoice/web-voice-processor @picovoice/koala-web
Enter fullscreen mode Exit fullscreen mode

Install a simple web server for testing:

npm install http-server --save-dev
Enter fullscreen mode Exit fullscreen mode

3. Prepare the Noise Suppression Model

Convert the Koala model into base64 so it can be loaded in the browser:

npx pvbase64 -i ${DOWNLOADED_MODEL_PATH} -o koala_params.js
Enter fullscreen mode Exit fullscreen mode

Replace ${DOWNLOADED_MODEL_PATH} with the path to your downloaded model file.

4. Create index.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>
</head>
<body>
  <h1>Koala Web Demo</h1>
  <input type="button" id="start" value="Start Koala" onclick="startKoala()" />

  <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>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Remember to replace ACCESS_KEY with your AccessKey from the Picovoice Console.

5. Run Locally 

npx http-server -a localhost -p 5000
Enter fullscreen mode Exit fullscreen mode

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

How It Works

  • The browser captures microphone audio.
  • Koala processes each audio frame and removes background noise.
  • The enhanced PCM is returned through processCallback.
  • All processing is local, giving lower latency and improved privacy.

This tutorial was originally published on Picovoice.

Top comments (0)