Kokoro Web Workflow Playbook
Use this first-export exercise to move from an English script to a saved WAV. It covers the current controls, a copyable session record, and recovery decisions for model loading, generation errors, and an interrupted browser session.
1. Decide What the Audio Should Do
The output for this exercise is one English WAV that you can reopen outside the browser. That gives you a concrete stopping point: a generated player alone is not a saved deliverable. Keep a separate document for the source script so you can recover it if the page closes.
This page covers the tool session. Use the product demo cue sheet when you need to align narration with shots, the QA examples when checking a result, and the approval record for shared sign-off. Those decisions happen outside the generator.
2. Choose the Browser Path
Open the Kokoro Web generator and let it load the model. The app checks for WebGPU availability and otherwise uses a WebAssembly path. It selects the runtime automatically; the current page does not let you force WebGPU, WASM, or a “hybrid” batch mode.
| Observed state | What it tells you | What to do |
|---|---|---|
| Downloading model | Required files or initialization are still pending. | Keep the page open; do not treat download time as synthesis time. |
| Model ready / WebGPU | The session selected the GPU path. | Record WebGPU; measure your own run if timing matters. |
| Model ready / WASM | The session selected the fallback path. | Record WASM; do not substitute another device's GPU timing. |
Model files may be cached between visits. That can change startup behavior, but cache retention and offline availability are not guaranteed. For reported performance, record the device, browser version, model state, input, voice, and speed. The browser setup guide includes one measured run with its stated limitations.
3. Prepare Scripts for TTS Instead of for Reading
Copy the following original practice script. It is an input fixture for learning the workflow, not a measured narration or a timing benchmark.
Before leaving this page, save your script and download the finished WAV file. Keep the text beside the audio so you can reproduce the narration after a browser restart.
The current input accepts up to 2,000 characters of plain text, and the generator offers 54 presets across eight languages. Choose the voice matching your text language; the practice script here uses an English voice. Use normal words and punctuation. Do not paste stage directions or SSML expecting them to control delivery. For example, put a review note such as “pause before the next screen” in your editing document rather than in the words to be read.
Keep this short fixture unchanged for the first run. Once you have a saved file, use your own script. A longer script may need multiple inputs because of the character limit; choose boundaries based on meaning and your intended edit rather than a claimed universally optimal segment duration.
4. Use a Repeatable Production Pipeline
- Save the practice text in a local document, then paste it into the tool after Model ready appears.
- Choose Heart (af_heart) at 1.0× for this exercise. This is a reproducible starting setting, not a claim that it is the best-sounding preset.
- Select Generate. When the completed player appears, check that its displayed text, voice, and speed match the request.
- Play the result, then use Download WAV. The tool provides a numbered filename; rename the saved file to a meaningful project name in your file manager.
- Reopen that downloaded file in a local audio player. Verify that the beginning and final words are present, and keep the source text with it.
If you submit text already generated with the same voice and speed in this session, the tool shows a duplicate notice. Reuse and download the existing take. For an intentional revision, change the text or a setting and keep a note of what changed. The page does not provide a team project archive or automatic batch export.
5. Keep Quality Checks Small and Concrete
For this exercise, the acceptance checks are narrow: the spoken text should preserve the instruction, the saved file should open, and the final words “browser restart” should be present. These are checks to perform, not results already obtained for every browser or voice.
If a sentence sounds wrong, describe the exact word or missing phrase before changing settings. Use the date, format, and timing correction examples for a fuller review. Loudness measurement, exact silence, mixing, and video assembly belong in an external editor; the current generator does not supply those controls.
6. A Simple Folder Structure
For one first export, keep only the source, saved audio, and session record. The filenames below are a suggested local convention; the website does not create these folders or write the record for you.
first-export/
source.txt
first-export-heart-1x.wav
session-notes.txtCopy the following into session-notes.txt. Fill it in as you work. In particular, “pending” must not become “passed” just because a player appeared.
Source: source.txt
Voice: Heart / af_heart
Speed: 1.0x
Device and operating system: [record yours]
Browser and version: [record yours]
Displayed runtime: [WebGPU or WASM]
Startup state: [new download / cached / unknown]
Downloaded file: [actual filename]
Reopened outside browser: [pending]
Beginning and final words checked: [pending]
Problem and next change: [record observation or none]7. Troubleshooting
| Problem | Check first | Recovery |
|---|---|---|
| Model does not become ready | Read the actual loading or error message; check connectivity and model-host restrictions. | Save the source text. If the model-error state offers Retry model download, use that action. Record the error if it repeats. |
| Generation reports an error | Confirm the text and the displayed model state. | Preserve completed downloads, note the error, and try a shorter plain-English input when the tool is ready again. |
| Same input produces a duplicate notice | Look for the existing take with that text, voice, and speed. | Download that take, or make and record an intentional revision. |
| Audio disappears after reload | Look for files already saved in your downloads folder. | Regenerate missing audio from your saved source and settings. Model cache is not an audio backup. |
8. Example Workflows
A screen-recorded product demo
Use the three-shot storyboard to keep screen directions separate from spoken text. Its time windows are editorial placeholders that you replace after measuring generated clips.
A script correction before publishing
Use the QA review sheet to record a specific ambiguity, attempted rewrite, and acceptance check. It distinguishes changing meaning in the script from fixing an audio-level problem.
A team handoff after wording changes
Use the D03 revision example to tie a new sentence to a new WAV and destination edit. Send saved files through your chosen project system, rather than sharing a session-only blob URL.
9. Frequently Asked Questions
How do I choose WebGPU or WASM?
The current tool selects the runtime automatically and displays it in the status. There is no manual runtime selector. Record what your session uses rather than assuming one path is always faster.
Will my project survive a page reload?
Do not rely on it. Save the source text separately and download completed WAV files before leaving or reloading. Cached model files are not a backup of your text, generated audio, or project notes.
Does a translated interface generate speech in that language?
Not necessarily. The current generator supports eight speech languages with 54 voices. Russian and Korean are interface translations without matching speech voices; check the voice guide and choose a voice matching the text.