# 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](https://effectssdk.ai/cp/registration#audio) and start a trial for the Audio SDK.
2. Copy your **Customer ID**.

## Install

```bash
npm install audio-effects-sdk
```

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

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

## Initialize

```ts
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

```ts
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](/features/studio-sound) and the [Studio Sound guide on GitHub](https://github.com/EffectsSDK/audio-effects-sdk-web/blob/main/docs/Studio-Sound.md).

## Self-hosting the models

If `sdk_url` and `wasmPaths` point to your own host, pin an exact version (`npm install audio-effects-sdk@x.y.z --save-exact`) and check the folder after upgrades:

```ts
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

- [API reference](/sdk/audio/docs/)
- [Live microphone demo](/products/audio-effects-sdk#live-demo)
- [Release notes](/releases?sdk=audio-web)