Hi Xenova, I have a project with essentially the same goal but without using transformers.js or npm: https://github.com/Shubin123/kokorojs

The work done with transformers.js would have saved me a ton of work and headache and I will be using it in the future.

My phenomizer is still broken is it ok if i take some of your code/logic from https://github.com/hexgrad/kokoro/blob/main/kokoro.js/src/phonemize.js

I will probably just leave my project where it's at currently with any minor bug fixes and model updates if available.
If no reply I will respect that and just leave my phenomizer broken cause I dont want to pretend like I didnt look at your version. (my tokenizer is probably not up to par either).

I am currently developing a library aimed at enabling llms inside the browser. It's essentially a wrapper for MLC and transformer.js right now but plan to add more agentic stuff like RAG etc.

To integrate transformer.js with Next.js, I had to convert it to TypeScript. I want to ensure that I properly credit you and your work, and you can check it out here: https://github.com/sauravpanda/BrowserAI.

Additionally, I noticed that the license in transformer.js appears to be incomplete and contains default values. I wanted to bring this to your attention.

I hope this is okay with you, and I truly admire all of your work!

Hey, trying to use this with a web worker and webpack...

worker.ts

import { KokoroTTS } from 'kokoro-js';

export default () =>
  self.addEventListener('message', async (event) => {
    const { text } = event.data;
    const tts = await KokoroTTS.from_pretrained(
      'onnx-community/Kokoro-82M-ONNX',
      { dtype: 'fp16' } // fp32, fp16, q8, q4, q4f16
    );
    const audio = await tts.generate(text, { voice: 'af_nicole' });

    self.postMessage({
      audioBuffer: audio.toWav()
    });
  });

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "module": "esnext", <-- changed to get webpack to start
    "jsx": "react-jsx",
    "outDir": "./dist",
    "target": "esnext",
    "moduleResolution": "bundler" <-- changed to get webpack to start
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"]
}

WARNING in ./node_modules/kokoro-js/dist/kokoro.web.js 1:127084-127093
Critical dependency: the request of a dependency is an expression
 @ ./src/utils/worker.ts 10:0-38 13:22-47
 @ ./src/pages/index.tsx 16:0-40 22:60-69
 @ ./src/index.tsx 9:29-52

WARNING in ./node_modules/kokoro-js/dist/kokoro.web.js 1:465593-465604
Critical dependency: Accessing import.meta directly is unsupported (only property access or destructuring is supported)
 @ ./src/utils/worker.ts 10:0-38 13:22-47
 @ ./src/pages/index.tsx 16:0-40 22:60-69
 @ ./src/index.tsx 9:29-52

2 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

ERROR in ./node_modules/kokoro-js/dist/kokoro.web.js 1:742156-742185
Module not found: Error: Can't resolve './' in 'C:\code\speechlab\node_modules\kokoro-js\dist'
resolve './' in 'C:\code\speechlab\node_modules\kokoro-js\dist'
  Parsed request is a directory
  using description file: C:\code\speechlab\node_modules\kokoro-js\package.json (relative path: ./dist)
    using description file: C:\code\speechlab\node_modules\kokoro-js\package.json (relative path: ./dist)
      as directory
        existing directory C:\code\speechlab\node_modules\kokoro-js\dist
          using description file: C:\code\speechlab\node_modules\kokoro-js\package.json (relative path: ./dist)
            using path: C:\code\speechlab\node_modules\kokoro-js\dist\index
              using description file: C:\code\speechlab\node_modules\kokoro-js\package.json (relative path: ./dist/index)
                no extension
                  C:\code\speechlab\node_modules\kokoro-js\dist\index doesn't exist
                .js
                  C:\code\speechlab\node_modules\kokoro-js\dist\index.js doesn't exist
                .ts
                  C:\code\speechlab\node_modules\kokoro-js\dist\index.ts doesn't exist
                .tsx
                  C:\code\speechlab\node_modules\kokoro-js\dist\index.tsx doesn't exist
                .json
                  C:\code\speechlab\node_modules\kokoro-js\dist\index.json doesn't exist
 @ ./src/utils/worker.ts 10:0-38 13:22-47
 @ ./src/pages/index.tsx 16:0-40 22:60-69
 @ ./src/index.tsx 9:29-52

Sorry, I couldn't find a better place to report this. Any ideas?

Hi, I’m trying to use kokoro-js in a Next.js 15 project, but I keep getting the following error:

Module not found: Can't resolve './'
./node_modules/kokoro-js/dist/kokoro.web.js:1:742149

However, when I test the same setup in a React + Vite project, it runs without any additional configuration and works as expected.

Here’s my package.json setup:

"kokoro-js": "^1.0.1",
"next": "^15.0.0",
"react": "^18.3.1",
"react-dom": "^18.3.1"

And my Next.js next.config.mjs webpack configuration:

const nextConfig = {
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      sharp$: false,
      "onnxruntime-node$": false,
      "onnxruntime-web$": false,
    };
    return config;
  },
};

export default nextConfig;

This is how I initialize kokoro-js in my worker.ts file:

import { KokoroTTS } from "kokoro-js";

addEventListener(
  "message",
  async (event: MessageEvent<{ type: string; number: number }>) => {
    const { type, number } = event.data;
    console.log("Initializing model...");
    const tts = await KokoroTTS.from_pretrained(
      "onnx-community/Kokoro-82M-ONNX",
      {
        dtype: "q8",
      }
    );
  }
);

Is there any known issue with using kokoro-js in Next.js 15?

Since the same code runs fine in React + Vite without any extra setup, is there something specific I need to configure in Next.js to make kokoro-js work properly?

Any help would be appreciated! Thanks.

Hi Xenova,

Thank you so much for your work. I had a question. Is it possible to use this model in a mobile app? My idea was to build a mobile app where one of the functionality would be a user would click the microphone button and just speak what they want and then get the transcribed text of what they speak. So I was looking for a way where the entire thing can be run locally. Is your solution something that can be run locally like this.

it doesn't generate longer duration audio file, it stops midway and adds this chrrpps sound in the end