利用 Web Speech API 实现语音阅读试题（TTS）

孩子上小学一年级，寒假作业里有一项：每天做20个20以内的加减法。这个作业老师不直接布置，而是让家长负责，方式任意。那么，显而易见，这个工作就由我负责。然后我就顺手抄起 Vue 做了一个 Web App：http://mui.evereditor.com，源代码在：https://github.com/meathill/mui-teacher

然后老婆说，别的教学应用都会把题目念出来，这样比较有上课的感觉，问我能不能也把题目念出来。我之前大略有些印象，可以直接调用浏览器的原生 API 实现 TTS（text to speech），于是就想试试看吧。

使用“Web speech API”作为关键词，很容易找到 MDN 上的这个页面，继而了解到 SpeechSynthesisUtterance 这个类，接下来就简单了，直接参考 Using the Web Speech API 里的 Demo，就完成了下面代码：

doRead(index) {
  const content = this.$refs.line[index].textContent;
  const msg = new SpeechSynthesisUtterance(content.replace('-', '减'));
  speechSynthesis.speak(msg);
},

这里有三个注意事项：

1. 系统会把 - 读成“至”，但我这里是加减的“减”，所以我要手动把它替换一下
2. 从某个版本开始，发音必须由用户主动触发，即放在交互性事件里，不能在页面打开时自动读
3. 发音效果跟浏览器有关，目前 Chrome 和 Safari 效果比较好

这样的 TTS，对于整段文字来说，效果一般，但是读一般的算式足够了，小朋友也挺喜欢。这个 API 还可以用作语音输入，不过考虑到模型的效果，没有尝试，想真正可用的话，还是用那些高级的在线版本吧。

图文无关，想出去玩……