今天要為各位介紹的是一個很屌的實作–「語音辨識」。只要在網頁開啟麥克風功能，接著講的任何話都能夠被即時紀錄成文字，顯示在畫面上，從此不需聽錄音寫會議紀錄。若講到關鍵字"poo"，就會變成一個可愛的大便圖案。但美中不足的地方是這個語音辨識精準度差強人意，不過只要花個十幾分鐘就能寫出這樣的功能，我覺得已經夠嚇唬人了。實作範例如下：

)

邏輯流程

1. 開啟SpeechRecognition功能
2. 監聽SpeechRecognition物件是否有result
3. 抓取result內的文字
4. 寫入HTML字串

課程重點

1. 開啟SpeechRecognition功能：

   window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
   
   const recognition = new SpeechRecognition();
   recognition.interimResults = true;
   recognition.lang = 'en-US';
   
   recognition.start();
   

   可以看到有個屬性recognition.lang = 'en-US'，所以我想應該是能夠設定中文辨識的。

2. 抓取辨識文字並放入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大概是長這樣：

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

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

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