Web Speech API包括兩個(gè)部分火邓，一個(gè)是識別用戶說話袖订；還有一個(gè)是朗讀指定內(nèi)容慰毅。這個(gè)功能無疑在某些場景是非常有用的隘截。
1、webkitSpeechRecognition（語音識別）
因?yàn)?code>webkitSpeechRecognitionAPI支持的不是很好汹胃，所以這里就簡單的介紹一下婶芭。
我們需要先創(chuàng)建一個(gè)webkitSpeechRecognition實(shí)例，因?yàn)樵摴δ芎芏酁g覽器還沒有支持着饥，我們測試用的是chrome瀏覽器犀农，所以需要加webkit前綴。
let newRecognition = new webkitSpeechRecognition();
然后我們可以設(shè)置宰掉，是識別到聲音就關(guān)閉呵哨，還是一直識別，根據(jù)自己的需求進(jìn)行設(shè)置
newRecognition.continuous = true;
最后開啟錄音和關(guān)閉錄音
newRecognition.start();
newRecognition.stop();
同時(shí)這里也提供了許多事件讓我們使用轨奄，當(dāng)接收到一個(gè)成功的消息之后就會觸發(fā)onresult事件孟害，它并不是停止錄音而觸發(fā)，而是當(dāng)成功接收到一段可以識別的語音時(shí)觸發(fā)挪拟，所以可能觸發(fā)多次挨务。
newRecognition.onresult = function(event) {
console.log(event);
}
打印出來的事件對象是這樣的，我們可以獲取到識別出來的內(nèi)容舞丛，雖然我試了幾次有很大幾率識別的不準(zhǔn)耘子。果漾。球切。
再看幾個(gè)事件，
newRecognition.onsoundstart = function(e){
console.log("開始收聽了");
console.log(e);
}
newRecognition.onspeechstart = (e)=>{
console.log("開始講話了");
console.log(e);
}
newRecognition.onspeechend = (e)=>{
console.log("講話完畢");
console.log(e);
}
newRecognition.onerror = (e)=>{
console.log("發(fā)生異常");
console.log(e);
}
只要開始講話了绒障，就會觸發(fā)onsoundstart和onspeechstart事件吨凑，這兩個(gè)事件緊挨著依次觸發(fā)，意思是我根據(jù)名字理解的，如果有誤或者有知道具體觸發(fā)條件的歡迎指出鸵钝！
onspeechend事件應(yīng)該是監(jiān)測到執(zhí)行了stop方法時(shí)觸發(fā)的糙臼。而如果一段時(shí)間沒有錄入信息，則會自動(dòng)執(zhí)行stop方法停止錄音恩商，同樣也會觸發(fā)onspeechend事件
onerror很明顯是有異常時(shí)會觸發(fā)該事件变逃，測試發(fā)現(xiàn)當(dāng)長時(shí)間沒有錄入導(dǎo)致自動(dòng)關(guān)閉錄音的時(shí)候就會觸發(fā)該事件。歡迎補(bǔ)充怠堪！
2揽乱、SpeechSynthesisUtterance（語音合成）
我們直接上一個(gè)最簡單的demo，讓瀏覽器讀一句話：
var ssu = new window.SpeechSynthesisUtterance('Hi粟矿，girl凰棉！');
window.speechSynthesis.speak(ssu);
沒錯(cuò)，就使這么簡單的兩行代碼就可以實(shí)現(xiàn)陌粹，接下來看一下這兩行代碼都干了什么：
SpeechSynthesisUtterance對象
先創(chuàng)建了一個(gè)SpeechSynthesisUtterance對象撒犀，該對象的構(gòu)造可以直接傳遞要讀的內(nèi)容，這里我們也可以通過給實(shí)例對象的屬性賦值來設(shè)置要讀的內(nèi)容掏秩，
var ssu = new window.SpeechSynthesisUtterance();
ssu.text = 'Hi或舞，girl！';
同時(shí)SpeechSynthesisUtterance對象提供了一些其他屬性供我們設(shè)置
lang：使用的語言蒙幻，字符串（比如："zh-cn"）
volume：音量嚷那，值在0-1之間（默認(rèn)是1）
rate：語速的倍數(shù)，值在0.1-10之間（默認(rèn)1倍）
pitch：音高杆煞，值在0-2之間魏宽，（默認(rèn)是1）
voiceURI：指定希望使用的聲音，字符串
既然有屬性肯定有方法决乎，該對象還提供了一些事件的回調(diào)
ssu.onstart = (e)=>{
console.log("開始队询。。构诚。");
console.log(e);
}
ssu.onend = (e)=>{
console.log("結(jié)束蚌斩。。范嘱。");
console.log(e);
}
onstart：語音開始合成時(shí)觸發(fā)
onpause：語音暫停時(shí)觸發(fā)
onresume：語音合成重新開始時(shí)觸發(fā)
onend：語音結(jié)束時(shí)觸發(fā)
speechSynthesis對象
創(chuàng)建完SpeechSynthesisUtterance對象之后送膳，把這個(gè)對象傳遞給speechSynthesis對象的speak方法中。
該對象主要是控制合成行為的丑蛤，常用方法如下：
stop()：停止合成
pause()：暫停合成
resume()：重新開始合成
getVoices()：返回瀏覽器支持的語音包數(shù)組
window.addEventListener("click", ()=>{
//點(diǎn)擊暫停
window.speechSynthesis.pause();
});
console.log(window.speechSynthesis.getVoices()); //我的chrome瀏覽器下竟然是空數(shù)組叠聋。。wtf
