使用 JS 在 Web 浏览器中实现文本转语音功能

今天给大家分享一个开源项目 vits-web，只需使用 JavaScript 编写几行代码就可在 Web 浏览器中实现文本转语音功能。该项目于上周刚开源（对于前端人更友好）。

使用

事前准备：开始之前可以使用 CRA 或 Vite 快速搭建一个前端项目。

安装 @diffusionstudio/vits-web库，因为该项目是基于 ONNX Runtime 实现的文本转语音功能，因此您还需要安装 onnxruntime-web 库（这个官网的安装说明中没有介绍到，使用时需要注意下）。您可以通过以下命令在项目中进行安装：

yarn add @diffusionstudio/vits-web onnxruntime-web

export default function Page() {
import * as tts from '@diffusionstudio/vits-web';

return <>
  <button onClick={async () => {
    const wav = await tts.predict({
      text: "AI 的崛起势必将编程普及大众，编程界将与 AI 同行，为您带来前沿的技术资讯与思考！",
      voiceId: 'zh_CN-huayan-medium',
    });
    const audio = new Audio();
    audio.src = URL.createObjectURL(wav);
    audio.play();
  }}>文本到语音转换</button>
</>
}

Demo

以下展示的 Demo 就是上述代码实现的音频效果，掘金这里没有找到上传音频的入口，可以看看在公众号 编程界 上的音频效果。

其它的一些注意事项

预先下载模型

初次调用 predict 函数时，将会下载相应的语音模型并存储在您的浏览器本地文件系统（Origin private file system）中。为了提高性能，建议您可以提前手动下载所需的模型：

await tts.download('en_US-hfc_female-medium', (progress) => {
  console.log(`Downloading ${progress.url} - ${Math.round(progress.loaded * 100 / progress.total)}%`);
});

此外，您也可以通过 tts.stored() 方法查看已经存储在本地的模型列表，或者通过 tts.remove() 和 tts.flush() 方法删除不再需要的模型。

获取可用的语音列表

如果您想了解所有可用的语音模型，可以使用以下代码获取语音列表：

console.log(await tts.voices());

以上代码将会输出所有可用语音模型及其对应的 voiceId。

结语

通过本文介绍的方法，您可以轻松地在浏览器中实现文本转语音功能，而无需依赖于服务器端的大量计算资源。在体验的过程中发现在处理文本转语音这一过程时，是有点慢的，有体验后的同学，欢迎大家来分享！