今天要來做的是一個語音辨識的功能，當我們講話時，可以判斷並將我們說的話渲染至頁面上。

Web Speech API 讓我們能將「聲音」這個要素融合進網頁應用程式中，目前只有chrome支援，且語音辨識是用google server，而他分成兩種，一種是 Speech Synthesis，文字轉聲音。一種是Speech Recognition，聲音轉文字，而我們在這邊使用的是Speech Recognition。

首先我們先判斷兼容性問題。

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

使用 speechRecognition ，須透過 SpeechRecognition 建構式建立一個物件實例。

    const recognition = new SpeechRecognition();

recognition.interimResults可以選擇是否要連續觸發，true就是會一直判斷聲音，且一個個字會打出來，false會等講完才判斷，且會一次打出來整句。

    recognition.interimResults = true;

判斷我們所講的語言。

    recognition.lang = 'en-US';
    // recognition.lang = 'zh-TW';

再來就將我們的文字渲染至頁面上。

    let p = document.createElement('p');
    const words = document.querySelector('.words');
    words.appendChild(p);

而我們在此處增聽result事件，判斷是否有結果，有結果的話，就將我們的聲音轉成文字的資料作處理，將其轉成陣列後獲取其資料，轉成字串，最後賦予至變數transcript。

    recognition.addEventListener('result', e => {
      console.log(e);
      console.log(e.results[0].transcript);
      // transcript為我們所辨識出的語音
      const transcript = Array.from(e.results)
        .map(result => result[0])
        .map(result => result.transcript)
        .join('');
    });

而我們也可以設置關鍵字，當API判斷出關鍵字時，就會將其作替換，轉換成其他圖示或是字。

      // 判斷是否有這些字，有ㄉ話以後面的圖示替換
      // const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '?');
      const poopScript = transcript.replace(/大便/gi, '?');
      // 將文字設置在p上
      p.textContent = poopScript;

      // 當句子的被判斷為最終結果時，該 isFinal 值就會顯示為 true(語音辨識結束)，就會在那之後建立新段落
      if (e.results[0].isFinal) {
        p = document.createElement('p');
        words.appendChild(p);
      }

此段在防止在中斷連線後失效。

    // 防止在中斷連線後失效
    recognition.addEventListener('end', recognition.start);

最後記住要設置start()，否則語音辨識不會有動作。

// 需要啟動recognition
    recognition.start();