前端实现语音播报 文本转tts

1、使用原生API SpeechSynthesisUtterance与speechSynthesis实现

1、定义一个SpeechSynthesisUtterance的实例，在相应的属性上设置数值

  lang：设置语言（中文：zh-CN）

  text： 设置话语内容（最多32,767个字符）

  rate：设置播报速度（0.1-10）

  volume：设置音量（0-1）

  pitch：音高（0-2）

2、使用speechSynthesis语音合成（文本到语音TTS）

  speechSynthesis接收一个SpeechSynthesisUtterance的实例

  方法：

    speak()：向语音中队列添加一个语音

    cancel()：清除所有语音列表

    pause()：暂停语音播报

    resume()：恢复语音播报

2、问题

• 会将六位数及以下的数字按中文播报出，如：123123，语音就是“十二万三千一百二十三”。

• 如果一些符号连在一起会识别成表情符号，如：：（，语音就是“表情符号伤心”。

• 不支持IE浏览器

• 不同浏览器中声音上会有差异

• 多音字识别不准确

3、效果

• 相比于从后端获取tts需要等待，web端的速度更快，无需等待直接就可播报。

• 声音比较生硬。

4、源码

const speech = new SpeechSynthesisUtterance();
speech.text = `在保险合同的保险期间内且保险合同有效，保险公司承担以下保险责任： （1）被保险人在等待期（等待期的起算时间是：自合同生效日或最后复效日起90天。）内因疾病身故的，保险公司不承担保险责任并无息退还保险合同已交纳保险费，保险合同终止。`; 
speech.rate = 1; 
speech.volume = 50; 
speech.lang = "zh-CN";
const speak = () => {
  speechSynthesis.speak(speech);
};

const pause= () => {
  speechSynthesis.pause();
};

const resume = () => {
  speechSynthesis.resume();
};

const cancel = () => {
  speechSynthesis.cancel();
};