Accent Conversion Browser SDK

Accent Conversion Browser SDK is designed to run on Chrome and similar browsers.

For more information about Krisp AC (Accent Conversion) Technology, please refer to our SDK Features section.

Extended RTC JS Browser SDK

RTC Accent Conversion JS Browser SDK is an extension of RTC JS Browser SDK. Refer to the Getting Started RTC JS Browser SDK to learn how to use the base SDK.

Installation

To get started, you need to download RTC Accent Conversion JS Browser SDK library from the (Developers Portal) and place it in the assets of your project.

Once you have downloaded the library, start by importing the SDK into your project.

import KrispSDK from '/dist/krispsdk.mjs';

Make sure the SDK is supported for the current execution context.

if (!KrispSDK.isSupported()) {
  // KrispSDK is not supported, handle your own logic to not block user's flow
}

KrispSDK Constructor Arguments

Property	Type	Default	Description
params.useAR	Boolean	false	Set the flag `true` to enable AC SDK. The SDK will behave like the parent RTC JS Browser SDK if the flag is set to `false`.
params.useRawModelPath	Boolean	false	Set `true` if the `params.models.modelAR` points to a 3rd party URL host.
params.useSharedArrayBuffer	Boolean	false	Enables using SharedArrayBuffer between worker and worklet threads to exchange audio data improving CPU performance. Make sure to check the Security Requirements before using the feature
params.models.modelAR	String	undefined	path to the AC model

Step 1. Configure KrispSDK to use AC

To use AC you should adjust KrispSDK params on creation. There are few options to configure:

const sdk = new KrispSDK({
  params: {
    useAR: true, 
    models: {
      modelAR: "/dist/models/modelAR.kef", // Add AC model URL provided with the sdk
    },
  },
});

await sdk.init();

Step 2. Pass audio stream while creating accentFilterNode

After configuring KrispSDK you have to pass an audio stream while creating the accent filter

const audioSettings = {
  audio: {
    echoCancellation: true,
    noiseSuppression: false,
    autoGainControl: false
  }
};

const stream = await navigator.mediaDevices.getUserMedia(audioSettings);

const audioContext = new AudioContext();
const source = audioContext.createMediaStreamSource(stream);
const destination = audioContext.createMediaStreamDestination();

const accentFilterNode = await sdk.createAccentReductionFilter(
  {
    audioContext,
    stream
  },
  function onReady() {
    accentFilterNode.enable();
    // triggered when Accent Filter initialized
    // handle your own business logic
  },
  function onDispose() {
    // triggered when Accent Filter disposed
    // handle your own business logic
  }
);


source.connect(accentFilterNode).connect(destination);

destination.stream; // destination stream is the resulting stream which can be used in your business logic

Live Demo

Use the link for the live demo