Skip to main content

Browser setup

Bundled frontend application​

import {
  KittenTTS,
  createBrowserAudioPlayer,
} from '@kittentts/web';

const tts = await KittenTTS.create({
  model: 'nano-int8',
  player: createBrowserAudioPlayer(),
});

await tts.speak('Hello from the browser.');

The SDK configures matching ONNX Runtime Web WASM assets before creating its first session.

Plain HTML example​

npm run example:html

Open http://127.0.0.1:5173. The example ships a generated kittentts-web.js bundle and needs no example-local package installation.

Opening examples/html/index.html directly through file:// works, but Cache API behavior is inconsistent there. The SDK falls back to memory storage, so refreshes may redownload assets.

Browser constraints​

  • Trigger playback from a user gesture where autoplay policies require it.
  • Serve model and phonemizer assets with CORS headers when using another origin.
  • Keep the page responsive by setting loading state before awaiting setup or generation.
  • Use stream() for long text so UI can update between sentence results.
  • Review Content Security Policy for WASM, worker, model, and asset origins.

Use offline and storage configuration for service workers, IndexedDB, or self-hosted files.

Last updated on