让浏览器为你朗读

上一篇我们提到在 Speech API 中有语音合成的部分，只可惜该 API 只有浏览器启用实验性功能后才会生效，这就给我们在实际应用中实现语音合成造成了极大地麻烦。这里我为大家介绍两个可选方案。

speak.js

speak.js 是基于一个 C++ 的开源语音合成软件 espeak 制作而成。它利用一款叫做 Emscripten 的工具将 C++ 源码转成 javascript，让其能够在浏览器中运行。

说实话，Emscripten 这个工具比 speak.js 更加让我感兴趣，大家可以去看看都有哪些项目被转到了浏览器下运行。

话题扯回来，将 speak.js 中的 demo.html 用浏览器打开，语言合成确实是生效的，但是除了英文，没有其他的语言可选，需要手动修改代码后再次编译，这样切换语言显得不是很方便。

但是由于 espeak 是支持多平台多语言，并且能将合成的语言转成音频文件输出的，所以 speak.js 也有这些功能，真是相当强大呢。而如何为 speak.js 添加一种语言，在项目的 docs 文件夹中的说明文档中有涉及。

lips

利用谷歌翻译

平时如果常用谷歌翻译的用户，一定知道谷歌翻译的网页上是可以朗读原文和译文的，我们可以利用这一点，简单方便的实现语音合成。

点击谷歌翻译中的小喇叭，我们可以在开发者工具中发现网页向 translate.google.com 发送了一个请求，类似：

https://translate.google.com/translate_tts?ie=UTF-8&q=a&tl=en&total=1&idx=0&textlen=1&tk=232079|371236&client=t&prev=input

这个请求返回的是一个音频文件，我们利用这一点就可以将谷歌翻译作为第三方服务很快地实现一个语音合成工具。

var ifr = document.createElement('iframe'),
  text = 'some text',
  lang = 'en'

ifr.style.display = 'none'
document.body.appendChild(ifr)

function speak () {
  var url = 'https://translate.google.com/translate_tts?ie=UTF-8&q=' + encodeURIComponent(text) + '&tl=' + encodeURIComponent(lang) + '&tk=232079|371236&client=t&prev=input'
  ifr.src = url
}

这里我们将谷歌的音频文件塞入一个 frame 框架中，稍微注意的是链接中的参数，虽然看上去我们可用的只有 q 和 tl，但是将其他参数去除，仅留下 q 和 tl 的话，这个音频的请求地址会将我们重定向至一个输验证码的网页。

局限性的是，谷歌的音频请求在自己的域名下直接返回 404，只能在浏览本地文件的情况下生效，这对于混合应用来说并不是个问题。

总结

基本上我们需要使用非英文合成语言时，使用 speak.js 是比较费力的，但是它能够带来的好处那也是相当的多。而使用谷歌翻译的链接虽然简单却只能在本地浏览的情况下使用，而且在国内还需要过翻墙这一关:new_moon_with_face:。

YIXUNFE / blog