Kokoro-js
访问网站
扫码查看
复制链接

在浏览器本地运行的文本转语音模型

标签：JavaScript , kokoro , ONNX , Text to Speech , Transformers.js , TTS

Kokoro-js

AI音频 / 文字转语音59 次浏览

综合介绍

Kokoro-js 是一个前沿的文本转语音（TTS）模型库。它的主要特点是模型体积小，只有8200万个参数，但功能却非常强大。 借助 Transformers.js 这个库，Kokoro-js 可以完全在用户的浏览器中本地运行，无需依赖服务器进行计算。 这意味着它不仅处理速度快，成本效益高，还能保护用户隐私，因为文本数据不需要发送到云端。该库使用 onnx-community/Kokoro-82M-v1.0-ONNX 模型，并提供了多种配置选项，比如可以调整模型的精度（如 fp32、fp16、q8 等）和运行设备（如 wasm、webgpu），让开发者可以根据具体需求进行优化。 此外，它还支持流式输出，可以像处理实时数据流一样，逐步生成语音，非常适合与大型语言模型（LLM）结合，实现实时的语音对话功能。

功能列表

  • 本地运行：完全在浏览器或Node.js环境中运行，无需服务器支持，保障数据隐私。
  • 模型优化：支持多种数据类型（fp32, fp16, q8, q4, q4f16）和硬件加速（wasm, webgpu），允许开发者在性能和质量之间进行权衡。
  • 语音生成：可以将输入的任意长度文本转换成.wav格式的音频文件。
  • 流式输出：支持流式处理文本，可以一边接收文本（例如来自大语言模型的逐字输出），一边实时生成音频流，适用于实时语音交互场景。 [1. 1]
  • 多种声音选择：内置多种预设声音，包括美式英语和英式英语的男声和女声，开发者可以通过list_voices()方法查看并选择不同的声音。
  • 开源友好：模型权重采用 Apache-2.0 许可证，允许在生产环境、个人项目等任何地方部署使用。

使用帮助

Kokoro-js 是一款功能强大的文本转语音库，它最大的亮点是能够直接在用户的浏览器里完成所有工作。下面将详细介绍如何安装、配置和使用这个工具。

安装

首先，你需要通过 npm（Node.js的包管理器）来安装 kokoro-js。打开你的项目终端，输入以下命令：

npm i kokoro-js

这个命令会从npm仓库下载 kokoro-js 库，并将其添加到你的项目中。

基础使用（生成完整音频）

这是最常见的使用方式，一次性将整段文本转换为音频文件。

1. 导入和初始化模型在使用之前，你需要先导入KokoroTTS类，并加载预训练好的模型。这个过程是异步的，所以需要使用await。

import { KokoroTTS } from "kokoro-js";
// 定义模型的ID
const model_id = "onnx-community/Kokoro-82M-v1.0-ONNX";
// 异步加载并初始化TTS模型
const tts = await KokoroTTS.from_pretrained(model_id, {
dtype: "q8",      // 模型精度，q8是兼顾性能和质量的推荐选项
device: "wasm",   // 运行环境，wasm兼容性最好
});

在from_pretrained方法中，你可以传入一些配置选项：

  • dtype: 决定模型的精度和大小。
    • fp32: 完整精度，质量最好，但文件大，计算慢。
    • fp16: 半精度，平衡选项。
    • q8: 8位量化，推荐选项，速度快，体积小，质量损失不大。
    • q4, q4f16: 更高的压缩率，速度最快，但质量有所降低。
  • device: 指定运行模型的硬件。
    • wasm: WebAssembly的缩写，兼容所有现代浏览器，是默认和最稳定的选项。
    • webgpu: 利用GPU进行计算，速度更快，但需要浏览器支持WebGPU API。如果使用webgpu，建议将dtype设为fp32以获得最佳性能。
    • cpu: 在Node.js环境中使用。

2. 生成语音模型加载完毕后，你就可以调用generate方法来生成音频了。

// 你想要转换的文本
const text = "Life is like a box of chocolates. You never know what you're gonna get.";
// 调用generate方法生成音频
const audio = await tts.generate(text, {
// 你可以通过 voice 参数选择不同的声音
voice: "af_heart", 
});
// 将生成的音频保存为 .wav 文件
audio.save("output.wav");
  • voice: 你可以通过tts.list_voices()获取所有可用的声音列表，并从中选择一个。例如，af_heart是一个美式女声。
  • audio.save(): 这个方法会触发浏览器下载生成的.wav文件。

进阶使用（流式输出）

流式输出非常适合需要实时响应的场景，比如与聊天机器人对话时，可以一边接收文字，一边播放声音，而不是等所有文字都生成后再播放。

1. 导入额外模块除了KokoroTTS，你还需要导入TextSplitterStream。

import { KokoroTTS, TextSplitterStream } from "kokoro-js";

2. 设置流你需要创建一个TextSplitterStream实例，并将其与TTS模型关联起来。

// 初始化模型（同上）
const tts = await KokoroTTS.from_pretrained("onnx-community/Kokoro-82M-v1.0-ONNX");
// 创建一个文本分割流处理器
const splitter = new TextSplitterStream();
// 将TTS模型连接到流
const stream = tts.stream(splitter);

3. 处理音频流使用for await...of循环来异步监听并处理从流中生成的每一小段音频。

// 使用立即执行的异步函数来处理流
(async () => {
let i = 0;
for await (const { text, phonemes, audio } of stream) {
// text 是当前处理的文本片段
// phonemes 是对应的音素
// audio 是生成的音频数据
console.log(`正在生成片段: ${text}`);
audio.save(`audio-${i++}.wav`); // 分段保存音频
}
})();

4. 推送文本到流中现在，你可以随时通过splitter.push()方法向流中添加文本。这模拟了从外部（比如一个大语言模型）逐字或逐句接收文本的过程。

const text = "Kokoro is an open-weight TTS model. It can even run 100% locally in your browser!";
const tokens = text.match(/\s*\S+/g); // 将文本按单词分割
for (const token of tokens) {
splitter.push(token); // 将每个单词推入流中
// 添加一个微小的延迟，以模拟真实世界中数据到达的时间差
await new Promise((resolve) => setTimeout(resolve, 100)); 
}

5. 关闭流当所有文本都推送完毕后，调用splitter.close()来通知流处理器已经没有更多数据了。这会让上面的for await...of循环正常结束。

splitter.close();

如果你不想关闭流，但希望立即处理当前在缓冲区的所有文本，可以使用splitter.flush()。

应用场景

  1. 在线教育和有声读物可以在浏览器中直接将课程文本或电子书内容转换为语音，为用户提供“听书”功能，而无需消耗服务器资源。
  2. AI聊天机器人与大型语言模型（LLM）结合，通过流式输出功能，实现实时的语音对话。当LLM生成文本时，可以立即将其转换为语音播放出来，提供流畅的交互体验。
  3. 辅助功能为视力障碍用户提供网页内容朗读功能，帮助他们无障碍地访问信息。由于是本地处理，响应速度快，且能保护用户隐私。
  4. 内容创作视频创作者或播客主播可以快速生成旁白或配音，用于视频制作或音频节目，大大降低了制作成本和时间。

QA

  1. Kokoro-js 和其他云服务TTS（如谷歌、亚马逊）有什么区别？最大的区别在于运行位置。Kokoro-js 完全在用户的浏览器本地运行，不依赖网络和服务器。 这带来了三个主要优势：一是无延迟，响应速度快；二是保护隐私，文本数据不会被发送到第三方服务器；三是零成本，没有API调用费用。而云服务TTS则需要将文本发送到云端处理，会产生网络延迟和API费用。
  2. 这个库对浏览器有什么要求吗？该库依赖于WebAssembly或WebGPU技术。基本上所有现代主流浏览器（如Chrome, Firefox, Safari, Edge的较新版本）都支持WebAssembly，因此兼容性很好。 如果想获得GPU加速带来的更高性能，则需要确保用户的浏览器支持WebGPU。
  3. 生成的音色可以定制吗？目前版本提供了多种预设的英文声音（美式和英式），用户可以从列表中选择。 但它不支持像某些大型商业模型那样进行声音克隆或细粒度的音色参数调整。
  4. 它支持中文吗？根据文档和模型说明，当前 onnx-community/Kokoro-82M-v1.0-ONNX 模型主要支持英文（美式和英式）。 文档中没有提及对中文或其他语言的支持。
微信微博Email复制链接