前端实现语音合成

HTML5语音Web Speech API

HTML5中和Web Speech相关的API实际上有两类，一类是“语音识别(Speech Recognition)”，另外一个就是“语音合成(Speech Synthesis)”，即“语音转文字”和“文字变语音”。

语音合成

`SpeechSynthesisUtterance`：主要用来构建语音合成实例

属性
1. text：要合成的文字内容，string
2. lang：使用的语言，string，例如：“zh-CN”
3. volume：声音的音量，string，范围是0到1，默认是1
4. rate：语速，number，范围是0.1到10，默认值是1。表示语速的倍数，例如2表示正常语速的两倍
5. pitch：说话的音高，number，范围从0到2，默认值为1
6. voice：指定希望使用的声音和服务，object
方法
1. onstart()：语音合成开始时候的回调
2. onpause()：语音合成暂停时候的回调
3. onresume()：语音合成重新开始时候的回调
4. onend()：语音合成结束时候的回调

`SpeechSynthesis`：主要作用是触发行为，例如读，停，还原等

属性
1. paused：当SpeechSynthesis处于暂停状态时，Boolean值返回true。
2. pending：当语音播放队列到目前为止保持没有说完的语音时，Boolean值返回true。
3. speaking：当语音谈话正在进行的时候，即使SpeechSynthesis处于暂停状态，Boolean返回 true。
方法
1. cancel()：移除所有语音谈话队列中的谈话。
2. getVoices()：返回浏览器支持的语音包列表数组
3. pause()：暂停合成过程
4. resume()：重新开始合成过程
5. speak()：播放合成的话语
6. stop()：立即终止合成过程
事件操作
onvoiceschanged：当由SpeechSynthesis.getVoices()方法返回的列表改变时触发

语音识别

SpeechRecognition
由于到目前为止，浏览器还没有广泛支持，所以需要webKit的前缀：
var newRecognition = webkitSpeechRecognition();

continuous：设置是持续听还是听到声音之后就关闭接收。
一般聊天沟通使用false属性值，如果是写文章写公众号之类的则可以设置为true，如
newRecognition.continuous = true;
start()和stop()方法：控制语音识别的开启和停止。
开启：newRecognition.start();
停止：newRecognition.stop();

onresult：对识别到的结果进行处理

newRecognition.onresult = function(event) { 
  console.log(event);
}

除了result事件外，还有其他一些事件，例如，soundstart、speechstart、error等。

语音合成超简单例子
将下面的代码复制到chrome控制台中体验～

let msg = new SpeechSynthesisUtterance("欢迎你阅读我的博客");
window.speechSynthesis.speak(msg);

SpeechSyntehesisUtteranc
SpeechSyntehesisUtteranc对象包含了语音服务要读取的内容和一些参数，比如语言，音高和音量等

let msg = new SpeechSynthesisUtterance();
msg.text = "how are you"; // 要合成的文本
msg.lang = "en-US"; // 语言：美式英语发音（默认自动选择）
msg.rate = 2;  // 语速：二倍速（默认为 1，范围 0.1～10）
msg.pitch = 2; // 音调：高音调（数字越大越尖锐，默认为 1，范围 0～2 ）
msg.volume = 0.5; // 音量：音量 0.5 倍（默认为1，范围 0～1）
window.speechSynthesis.speak(msg);

let count = 0; // 词语数量
let msg = new SpeechSynthesisUtterance();
let synth = window.speechSynthesis;
msg.addEventListener('start',()=>{
  // 开始阅读
  console.log(`文本内容： ${msg.text}`);
  console.log("start");
});
msg.addEventListener('end',()=>{
  // 阅读结束
  console.log("end");
  console.log(`文本单词（词语）数量：${count}`);
  count = 0;
});
msg.addEventListener('boundary',()=>{
  // 统计单词
  count++;
});

百度文字转语音开放API