https://github.com/steveseguin/tts.rocks
Cutting-edge Text-to-Speech in the browser - for free
https://github.com/steveseguin/tts.rocks
free kokoro local tts wasm web webgpu
Last synced: 4 months ago
JSON representation
Cutting-edge Text-to-Speech in the browser - for free
- Host: GitHub
- URL: https://github.com/steveseguin/tts.rocks
- Owner: steveseguin
- Created: 2025-02-22T15:56:33.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-02-23T14:57:22.000Z (8 months ago)
- Last Synced: 2025-03-04T08:18:08.427Z (7 months ago)
- Topics: free, kokoro, local, tts, wasm, web, webgpu
- Language: JavaScript
- Homepage: http://tts.rocks/
- Size: 2.94 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# TTS Rocks (Free Text-to-Speech Web Application)
A browser-based text-to-speech application using `kokoro-js` that leverages WebGPU (with WebAssembly fallback) for high-quality speech synthesis. The model and processing runs entirely client-side.
[Live Demo](https://tts.rocks/)
## Installation & Setup
The library can be used in two ways:
### 1. Direct Import (Simplest)
```html
import { KokoroTTS, TextSplitterStream, detectWebGPU } from './kokoro-bundle.es.js';
// Your code here
```
### 2. NPM Installation
```bash
npm install kokoro-js
```
## Minimal Usage Example
Here's a complete example showing basic TTS functionality:
```html
Simple TTS
Hello, world!
Speak
import { KokoroTTS, TextSplitterStream, detectWebGPU } from './kokoro-bundle.es.js';
let tts;
async function init() {
const device = await detectWebGPU() ? "webgpu" : "wasm";
tts = await KokoroTTS.from_pretrained("onnx-community/Kokoro-82M-v1.0-ONNX", {
dtype: device === "wasm" ? "q8" : "fp32",
device
});
}
async function speak() {
const text = document.getElementById('text').value;
const streamer = new TextSplitterStream();
streamer.push(text);
streamer.close();
const stream = tts.stream(streamer, {
voice: Object.keys(tts.voices)[0],
streamAudio: false
});
const audioElement = document.createElement('audio');
audioElement.controls = true;
for await (const { audio } of stream) {
if (!audio) continue;
audioElement.src = URL.createObjectURL(audio.toBlob());
document.body.appendChild(audioElement);
await audioElement.play();
}
}
document.getElementById('speak').onclick = speak;
init();
```
Note: The `kokoro-bundle.es.js` file in the dist/lib folder is expected to be hosted alongside the above example for for it to work.
## Development Build
For development with build tools:
```bash
npm install
npx vite # Starts dev server
```
## Production Build
```bash
npm run build
```
This generates optimized files in the `dist` directory.
## Features
- Runs entirely in the browser - no server required
- WebGPU acceleration with WebAssembly fallback
- Multiple voices and languages
- Adjustable speech speed
- Model caching for faster subsequent loads
- Streaming audio output option
- WAV file download support
## Technical Notes
- Requires a modern browser with WebGPU or WebAssembly support
- Model size is approximately 82MB (downloaded once and cached)
- Initial load may take a few seconds while the model initializes
## License
MIT License for this project
Apache 2.0 license for kokoro-js