Skip to content

Audio Effects SDK for the web

Add real-time AI noise suppression and Studio Sound to a browser app with the audio-effects-sdk npm package.

The Web Audio Effects SDK takes a microphone MediaStream, removes background noise with an on-device AI model (WebAssembly) and returns a processed MediaStream. Studio Sound, the Voice Changer and audio/video file processing are also part of the Web SDK.

Before you start#

  1. Register in the Developer Portal and start a trial for the Audio SDK.
  2. Copy your Customer ID.

Install#

npm install audio-effects-sdk

Or load it from the CDN and use window.atsvb:

<script crossorigin="anonymous" src="https://effectssdk.ai/sdk/audio/dev/{SDK_VERSION}/atsvb-web.js"></script>

Initialize#

import { atsvb } from 'audio-effects-sdk';

const sdk = new atsvb('YOUR_CUSTOMER_ID');
sdk.config({
  preset: 'speed',      // recommended; see presets below
  sample_rate: 16000,
});
sdk.preload();

Process the microphone#

const audio = document.querySelector('audio');

sdk.onError((e) => {
  if (e.type === 'error') console.error(e.message);
});

sdk.onReady = () => {
  // The output stream is available only after the SDK is ready.
  audio.srcObject = sdk.getStream();
  sdk.run();
};

const mic = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
sdk.useStream(mic);

Publish the audio track of sdk.getStream() to WebRTC or LiveKit instead of the raw microphone track.

Presets#

Preset Sample rates When to use
speed 16 kHz Recommended. Good quality at a fraction of the CPU cost; the most headroom on phones and loaded machines.
balanced 32, 44.1, 48 kHz Higher quality, noticeably heavier.
quality 16 kHz Highest quality, heaviest; needs the ONNX runtime WASM files.

speed and balanced need WebAssembly SIMD; quality does not.

Studio Sound#

Studio Sound adds an equalizer with voice, podcast, broadcast, warm and bright presets, a compressor, noise gate, de-esser, automatic gain control and a limiter. See Studio Sound and the Studio Sound guide on GitHub.

Self-hosting the models#

If sdk_url and wasmPaths point to your own host, pin an exact version (npm install [email protected] --save-exact) and check the folder after upgrades:

for (const m of sdk.getRequiredModels()) {
  const res = await fetch(m.url, { method: 'HEAD' });
  if (!res.ok) console.error(`missing model for "${m.preset}": ${m.path}`);
}

A missing model does not throw — onReady simply never fires.

Next steps#

View as Markdown · Found a problem? Tell us.