How I Built a 100% Free, Private In-Browser AI Text-to-Speech Tool Using Kokoro-82M & WebGPU

Posted on Oct 15 • Originally published at puretts.com

Every time I needed to convert an article, chapter, or voiceover script into natural audio, I ran into the same frustrating wall:

I decided to see if modern browser standards (WebGPU, WebAssembly, and Web Workers) could handle state-of-the-art neural speech synthesis completely on the client side — with zero server bills, zero paywalls, and zero limits.

Here is how I built it and the engineering hurdles I had to solve.

To keep the UI at a buttery 60 FPS, all model loading, phoneme tokenization, and ONNX execution were isolated inside a dedicated Web Worker:

// main.js - Communicating asynchronously with the worker const ttsWorker = new Worker ( ' tts.worker.js ', { type: ' module ' }); ttsWorker. postMessage ({ type: ' GENERATE_TTS ', text: userText, voice: selectedVoice, speed: 1.0 }); ttsWorker. onmessage = ( event ) => { const { type, progress, wavBlob, error } = event. data; if ( type === ' PROGRESS ' ) { updateProgressBar ( progress ); } else if ( type === ' COMPLETE ' ) { audioPlayer. src = URL. createObjectURL ( wavBlob ); audioPlayer. play (); } }; Enter fullscreen mode Exit fullscreen mode This completely separated heavy tensor crunching from the UI.

Kokoro-82M has an inherent context window of approximately 512 phonemes (roughly 240 characters or ~29 seconds of speech). If you pass a 2,000-word blog post or book chapter, the model simply truncates it.

To provide truly unlimited continuous speech, I built an intelligent chunking and audio concatenation pipeline:

// Merging sequential audio buffers with natural pauses function concatenatePcmBuffers ( buffers, sampleRate = 24000 ) { const pauseSamples = Math. floor ( sampleRate * 0.22 ); // 220ms natural pause const totalLength = buffers. reduce (( acc, b ) => acc + b. length + pauseSamples, 0 ); const result = new Float32Array ( totalLength ); let offset = 0; for ( const buffer of buffers ) { result. set ( buffer, offset ); offset += buffer. length + pauseSamples; } return result; } Enter fullscreen mode Exit fullscreen mode In-Memory WAV Encoder: Instead of pulling in a heavy external audio library, the worker serializes the merged PCM stream directly into a clean 16-bit PCM WAV Blob with proper RIFF headers on the fly. Challenge 3: Client-Side Privacy In enterprise and academic workflows, users often need to read sensitive medical notes, legal documents, or unreleased writing. Because PureTTS downloads the model weights to the browser's local cache (IndexedDB) and computes locally:

You can try it live right in your browser here: 👉 https://puretts.com

I'd love feedback from fellow developers! What features or voices should I add next?