Noise Suppression in Web Browsers

Noise Suppression technology mutes the unwanted background noise, providing clear audio for communication. Both recording audio and applying noise suppression to the recorded audio is not trivial.

Picovoice's Koala Noise Suppression provides a fast and easy method for processing and suppressing audio on device (i.e, audio is processed on the browser).

Install Koala Noise Suppression Web SDK

Install Koala Noise Suppression Web SDK using npm:

npm install @picovoice/koala-web

Sign up for Picovoice Console

Sign up for Picovoice Console for free and copy your AccessKey. It handles authentication and authorization.

Usage

Koala Noise Suppression Model

Add the Koala Noise Suppression model to the project by:

• Either copying the model file to the project's public directory:

cp ${KOALA_PARAMS_PATH} ${PUBLIC_DIRECTORY}/${KOALA_PARAMS}

(or)

• Create a base64 string of the model using the pvbase64 script included in the package:

npx pvbase64 -i ${KOALA_PARAMS_PATH} -o ${OUTPUT_DIRECTORY}/${MODEL_NAME}.js

Create an object containing the Koala Noise Suppression model options:

import base64koala from '${OUTPUT_DIRECTORY}/${MODEL_NAME}.js'

const koalaModel = {
  publicPath: '${PUBLIC_DIRECTORY}/${KOALA_PARAMS}',
  // or
  base64: base64model,
}

Initialization

Create callback functions:

• processCallback: gets the results of Koala Noise Suppression engine.

function processCallback(enhancedPcm: Int16Array) {
  // do something with noise suppressed audio data
}

• processErrorCallback: Optional callback to handle errors if an error occurs while running Koala Noise Suppression engine.

// Optional
const options = {
  processErrorCallback: (error) => {}
}

Initialize Koala Noise Suppression with koalaModel variable containing the model options and the callback functions defined above:

import { KoalaWorker } from "@picovoice/koala-web";

const koala = await KoalaWorker.create(
  ${ACCESS_KEY},
  processCallback,
  koalaModel,
  options // optional
);

Processing Audio Frames

Koala Noise Suppression processes audio in chunks (frames). The .frameLength property gives the number of audio samples per frame that are required by Koala Noise Suppression, while the .sampleRate property gives the audio sample rate that is required. Audio samples must be 16-bit integers.

The enhanced audio is received from processCallback as mentioned above. In the case that the next audio frame does not follow the previous one, call reset before calling process again.

function getAudioFrame(): Int16Array {
  ... // function to get a frame of audio
  return new Int16Array();
}

await koala.reset();
for (;;) {
  await koala.process(getAudioFrame());
  // break on some condition
}

Clean up

Clean up allocated resources:

koala.terminate()

Working Example

All that is left is to wire up the audio recording. This example uses WebVoiceProcessor to record audio.

Install web-voice-processor using npm:

npm install @picovoice/web-voice-processor

The following code snippet records audio from and applies noise suppression to the recorded data:

import { KoalaWorker } from "@picovoice/koala-web";
import { WebVoiceProcessor } from "@picovoice/web-voice-processor";

const results: Int16Array[] = [];

const koalaModel = {
  publicPath: '${PUBLIC_DIRECTORY}/${KOALA_PARAMS}'
}

function processCallback(enhancedPcm: Int16Array) {
  results.push(enhancedPcm);
}

const options = {
  processErrorCallback: (error) => {
    console.error(error);
  }
}

// Set WebVoiceProcessor's frame length equal to Koala's frame length
WebVoiceProcessor.setOptions({
  frameLength: koala.frameLength
});

let koala: Koala;
async function startKoala() {
  koala = await KoalaWorker.create(
    ${ACCESS_KEY},
    processCallback,
    koalaModel,
    options
  );

  // Add Koala's instance to WebVoiceProcessor so it start processing audio
  await koala.reset();
  await WebVoiceProcessor.subscribe(koala);
}

async function stopKoala() {
  // Remove Koala from WebVoiceProcessor to stop processing audio
  await WebVoiceProcessor.unsubscribe(koala);
  koala.terminate();
}

For a complete working project, take a look at the Koala Noise Suppression Web Demo or dive into the Koala Noise Suppression Web SDK quick start guide.