最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

第二十堂 – Speech Detection

XAMPP下载 admin 629浏览 0评论
 今天要為各位介紹的是一個很屌的實作–「語音辨識」。只要在網頁開啟麥克風功能,接著講的任何話都能夠被即時紀錄成文字,顯示在畫面上,從此不需聽錄音寫會議紀錄。若講到關鍵字”poo”,就會變成一個可愛的大便圖案。但美中不足的地方是這個語音辨識精準度差強人意,不過只要花個十幾分鐘就能寫出這樣的功能,我覺得已經夠嚇唬人了。實作範例如下:
QQ截图20181105163659
 邏輯流程
開啟SpeechRecognition功能
監聽SpeechRecognition物件是否有result
抓取result內的文字
寫入HTML字串
課程重點
開啟SpeechRecognition功能:

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

const recognition = new SpeechRecognition();
recognition.interimResults = true;
recognition.lang = ‘en-US’;

recognition.start();
可以看到有個屬性recognition.lang = ‘en-US’,所以我想應該是能夠設定中文辨識的。

抓取辨識文字並放入HTML:

recognition.addEventListener(‘result’, e => {
const transcript = Array.from(e.results)
.map(result => result[0])
.map(result => result.transcript)
.join(”);

const poopScript = transcript.replace(/poop|poo|shit|dump/gi, ‘?’);
p.textContent = poopScript;

if (e.results[0].isFinal) {
p = document.createElement(‘p’);
words.appendChild(p);
}
});
首先這個result監聽事件在你講話時會不斷被觸發,而這個e.results大概是長這樣:

QQ截图20181105163710

confidence是他辨識的信心程度,transcript是辨識內容,而isFinal是判斷這句話是否結束。而通常這個results的長度都是2,所以我們取得transcript後要用join(”)來組合起來。

中間我們可以自訂一些關鍵字來做特殊效果,這邊練習是若辨識字串中含有”poop”、”poo”等相關字,就用大便符號取代字串,再把字串放入HTML內容。

若一句話講完,isFinal=true,就生成新的段落元素。

转载请注明:XAMPP中文组官网 » 第二十堂 – Speech Detection

您必须 登录 才能发表评论!