Use it in your game
The engine behind this tool is one JavaScript file. No build step, no server, no dependencies. Free, also for commercial games.
1. Add it
import { render, play } from 'https://cdn.jsdelivr.net/gh/wrongfloor-dev/babble-engine@1/site/src/babble.mjs';
play(render('Hi! Do you want an apple?', { style: 'animal', voice: 'fern', mood: 'happy' }));Tip: in the tool, click ‹/› next to Download for the line with your settings.
2. Sync a mouth
const line = render('Welcome, traveller!', { style: 'sim', voice: 'hank' });
play(line);
for (const s of line.syllables) setTimeout(() => flapMouth(s.text), s.time * 1000);3. Your own voice
Record it in the tool and click Export under My voices.
import { render, play, loadVoice } from 'https://cdn.jsdelivr.net/gh/wrongfloor-dev/babble-engine@1/site/src/babble.mjs';
const me = loadVoice(await (await fetch('me.babble-voice.json')).text());
play(render('Welcome to my game!', { style: 'sim', ownVoice: me }));4. Or let your AI add it
A prompt for ChatGPT, Claude, Gemini, Cursor or Copilot. Fill in the last line.
Show prompt
Add Babble Engine to my game, so characters "talk" in gibberish when a dialogue line appears.
Babble Engine is a free JavaScript module (MIT), no build step, no server. Full reference: https://babble.wrongfloor.studio/llms.txt
Load it:
import { render, play } from 'https://cdn.jsdelivr.net/gh/wrongfloor-dev/babble-engine@1/site/src/babble.mjs';
Speak a line:
const line = render(text, { style: 'animal', voice: 'fern', mood: 'happy' });
const p = play(line); // returns { stop(), ended } (ended is a Promise)
- render returns { pcm, sampleRate, duration, syllables }; syllables is [{ time, text }] with start times in seconds
- Styles: animal, sim, vemmo, name, bark, grumble, gizmo, sprite, ghost, echo, radio, baby, blip, droid, tone, instr
- Moods: neutral, happy, angry, sad, flirty, surprised
- Use seed (a number) per character so a character keeps the same made-up language
- Browsers only play sound after a click or key press
Please:
1. Give each character its own style and voice
2. Stop the previous line when a new one starts
3. Use syllables to animate the mouth or reveal the text
My game is made with: [your engine or framework, e.g. Phaser, PixiJS, plain canvas]WAV files: toWav(render(...)), also in Node. All options: README or llms.txt.
Nederlands
Eén JavaScript-bestand, gratis, ook voor commerciële games. In de tool geeft ‹/› naast Download de code met jouw instellingen.