← All models

text-to-speech · audio · WebGPU (WASM fallback) · ~90 MB

Kokoro — natural text-to-speech, on your device

Kokoro is a tiny (82M-parameter) speech model that sounds far bigger than it is. Type any text, choose from dozens of named voices, set the speaking speed, and hear it spoken — synthesized entirely in your browser. No API key, no per-character bill, nothing uploaded.

At a glance

Modelonnx-community/Kokoro-82M-v1.0-ONNX
Tasktext-to-speech (via the kokoro-js library)
ArchitectureStyleTTS2-style decoder, 82M params, per-voice style embeddings → 24 kHz waveform
Quantizationq8 (8-bit) ONNX
BackendWebGPU when available, honest WebAssembly fallback
Download~90 MB (model + voices), cached after first load
LicenseApache-2.0
Web APIsWebGPU / WebAssembly, Web Workers, Web Audio (playback), Blob URLs

Run it

Load the model, type something, pick a voice and a speed, then hit Speak. Synthesis runs in a Web Worker; the audio and waveform below are the real output for this device.

See inside

Text-to-speech isn't magic sound — it's a waveform, a long list of amplitude samples the model predicts from your text and the chosen voice's style vector. Below is the actual 24 kHz waveform Kokoro just generated (the bar fills as it plays). The real-time factor above is measured: below 1.0× means it synthesized faster than the audio's own length.

Speak something to see its waveform and stats.

Why it matters

Cloud TTS is metered per character and sends your text to a third party. Kokoro turns high-quality narration into a free, private, offline feature of your page — the text never leaves the tab, and there's no bill no matter how much you generate.

Use cases

Basics

Type a line, pick a voice, hear it — the core move.

Practical

Read-aloud / accessibility: paste an article and listen to it.

Wild

Voice-swap: give the same passage to every voice and compare.

Multi-model

Voice loop: speak → Whisper → edit → Kokoro speaks it back.

How the API works

Kokoro has its own tiny library (which wraps Transformers.js). Two calls: load, then generate.

import { KokoroTTS } from "kokoro-js";

const tts = await KokoroTTS.from_pretrained(
  "onnx-community/Kokoro-82M-v1.0-ONNX",
  { dtype: "q8", device: "webgpu" }, // WASM fallback when WebGPU is absent
);

const audio = await tts.generate("Hello from your browser.", {
  voice: "af_heart",  // one of tts.voices — dozens across accents/genders
  speed: 1,
});
// audio.audio         → Float32Array waveform
// audio.sampling_rate → 24000
// audio.toBlob()      → a WAV Blob you can play or download

This page runs from_pretrained and generate inside a Web Worker so synthesis never blocks the interface, encodes the returned Float32 samples to a WAV blob for the <audio> element, and draws the same samples as the waveform under "See inside". The voice list comes straight from tts.voices — nothing hard-coded.

References