speak.js: Web 上的文字转语音

文字转语音 (TTS) 可以使内容更易访问,但到目前为止,还没有简单且通用的方法在 Web 上实现这一点。一种可能的方法如此演示所示,该演示由 speak.js 提供支持,speak.js 是一个新的 100% 纯 JavaScript/HTML5 TTS 实现。speak.js 是对 eSpeak 的移植,eSpeak 是一个开源语音合成器,从 C++ 移植到 JavaScript 使用了 Emscripten

将现有的语音合成引擎编译到 JavaScript 是一个很好的方法,可以避免从头开始编写像 eSpeak 这样复杂的项目。编译完成后,speak.js 中的 eSpeak 代码并不知道它正在 Web 上运行:speak.js 使用 Emscripten 模拟文件系统 来“伪造”eSpeak C++ 代码具有的正常文件读写调用(fopen、fread 等)。这允许使用正常的 eSpeak 数据文件(通过 xhr,或者通过将它们转换为 JSON 并与脚本文件捆绑在一起)。运行编译后的 eSpeak 代码的结果是,它会将生成的音频写入模拟文件系统中的 .wav 文件。然后 speak.js 会获取该数据,使用 base64 对其进行编码,并创建数据 URL。该 URL 然后在 HTML5 音频元素中加载,让浏览器处理播放。(请注意,虽然这是一种非常简单的方法,但它并不是最有效的方法。speak.js 还没有关注速度,但通过一些额外的努力,它可以更快,如果这是个问题的话。)

为什么您需要在 JavaScript 中使用 TTS?好吧,使用 speak.js,您可以在您的网站中捆绑一个 .js 文件,然后生成语音就像编写一样简单

speak("hello world")

(有关说明,请参阅 speak.js 网站)。生成的语音在所有平台上将完全相同,不像用户以他们自己的方式进行 TTS(使用操作系统功能或单独的程序)那样。speak.js 还可以用于构建浏览器插件,因为它是纯 JavaScript - 不需要平台相关的二进制文件,并且插件在所有操作系统上都能以相同的方式工作。

其他一些评论

  • JavaScript 正在变得越来越强大。如今,顶尖 JavaScript 引擎的开发版本可以运行从 C++ 编译的代码,其速度仅比快速 C++ 编译器慢 3-5 倍,而且还在不断改进。因此,在许多情况下,可以扩展 Web 平台的功能,可以通过 JavaScript 实现,或者通过编译到 JavaScript 实现,而不是向浏览器本身添加新代码,因为这不可避免地需要更长的时间 - 特别是如果您等待所有浏览器实现某个特定功能。
  • 虽然 speak.js 只使用基于标准的 API,但由于浏览器的限制,它还不能在所有地方工作。它不能在 IE、Safari 或 Opera 中工作,因为它们不支持类型化数组,也不能在 Chrome 中工作,因为它不支持 WAV 数据 URL。因此,目前 speak.js 只能在 Firefox 中正常工作。但是,上述缺少的功能并不大,希望这些浏览器制造商能够尽快实现它们。也可以在 speak.js 中实现针对这些问题的解决方法(请参阅下一条评论)。
  • 非常欢迎您帮助改进 speak.js!我们需要做的一件重要的事情是实现解决方法,解决阻止 speak.js 在其当前无法运行的浏览器上运行的问题。另一个目标是使用 speak.js 构建浏览器插件。如果您想帮助我们,请通过 github 与我们联系。
  • eSpeak 支持多种语言,因此 speak.js 也支持多种语言。但是,您需要包含其他语言文件。这里 是一个实验性的构建,您可以在其中切换英语和法语支持(请注意,这是一个未优化的构建,因此运行速度会比较慢)。

14 条评论

  1. Muhammad Tarmizi bin Kamaruddin

    我真的希望 speak.js 使用 MIT 许可证,而不是 GPL。

    2011 年 8 月 17 日 下午 11:45

  2. azakai

    我自己更喜欢 MIT,但是 eSpeak 是 GPL 许可的。但我希望这不会成为问题。speak.js 的构建方式使其非常明显,任何使用 speak.js 的东西都不是 speak.js 或 eSpeak 的衍生作品 - 使用 speak.js 仅仅意味着编写 |speak(“text”)|。这就是整个 API。因此,我坚信使用 speak.js 并不意味着您的代码也需要是 GPL。

    为了在这种情况下遵守 GPL,您只需提供指向源代码的链接,该链接位于 github 上,https://github.com/kripken/speak.js(除非您修改了 speak.js 本身)。

    2011 年 8 月 17 日 下午 11:58

  3. Prestaul

    在 Chrome 14 中运行良好…

    2011 年 8 月 17 日 下午 12:02

    1. azakai

      谢谢,很高兴知道它在 Chrome 14 预览版中已修复。

      2011 年 8 月 17 日 下午 12:10

  4. abral

    这太棒了!

    2011 年 8 月 17 日 下午 12:54

  5. Eric Jung

    我很乐意编写一个包装它的插件。一些想法:朗读 RSS feed、朗读当前网页、朗读当前网页,但只朗读标记有“speak”属性的元素等。

    但是,在玩了一会演示之后,我根本没有看到它除了有趣的新奇事物之外的任何东西。为什么?因为语音输出缺乏清晰度。将各种新闻文章的内容粘贴到演示中,并尝试了一些变量之后,我发现自己很难理解语音。

    与 AT&T 自然语音相比
    http://www2.research.att.com/~ttsweb/tts/demo.php
    您会很快明白我的意思。

    有没有办法使其更清晰?

    Eric Jung
    FoxyProxy 和其他插件的作者

    2011 年 8 月 17 日 下午 14:22

    1. azakai

      嗯,说实话,我对语音合成了解得不多 :) 我只是将 eSpeak 编译成 JS,并对其进行了修改,使其可以在 Web 上运行。

      AT&T 项目可能比 eSpeak 更好。但也可能通过调整参数、使用不同的语音/词典数据文件等来改善 eSpeak 的输出。我还没有尝试过这些。

      我在 speak.js 上提交了问题 2 来跟踪这个问题,希望我们可以使其变得更好。

      编辑:忘了说,感谢您提供帮助!

      2011 年 8 月 17 日 下午 14:48

      1. Eric Jung

        好的,如果真的改善了,请给我发邮件,我会为它写一个杀手级插件。

        2011 年 8 月 17 日 下午 14:51

    2. Paul

      您一定要为它写一个插件。我想要这个插件!

      2011 年 8 月 17 日 下午 17:26

  6. skierpage

    演示短语听起来不错,但它弄乱了 Rick Astley 不朽的“Never gonna tell a lie and hurt you”:说话者没有说出“hurt”。我的 OLPC 笔记本电脑似乎也使用了 espeak,它对 hurt/curt/yurt 发出了模糊的“t”音。

    emscripten 太棒了!

    2011 年 8 月 17 日 下午 17:35

  7. anfemfjs

    这可能是 emscripten 或浏览器中的某些东西导致的:来自 Debian unstable 的 Espeak 1.45.04-1 生成了 http://dl.dropbox.com/u/96013/Never%20gonna%20tell%20a%20lie%20and%20hurt%20you.wav,听起来好多了。

    2011 年 8 月 18 日 上午 03:58

    1. Chris

      Rick roll'd 了?

      2012 年 9 月 17 日 下午 15:10

  8. Gerardo Capiel

    Chrome 网页应用开发者应该看看

    http://code.google.com/chrome/extensions/trunk/tts.html

    它现在已在测试版中提供,并且很快将在稳定版中提供。不幸的是,您需要创建一个打包的网页应用或扩展。一个不错的功能是词级回调,用于为阅读障碍用户执行单词突出显示等操作。查看我在

    https://github.com/gcapiel/ChromeWebAppBookshareReader

    上构建的演示。您可以通过单击下载部分中的 .crx 文件,在 Chrome 测试版中安装网页应用。

    2011 年 8 月 27 日 上午 09:03

  9. Gerardo Capiel

    我原本想添加,我很想看到 speak.js 扩展到支持像 Google TTS API 那样的词级回调。

    2011 年 8 月 27 日 上午 09:05

本文的评论已关闭。