Day20 Native Speech Recognition

在網頁建立一個監聽語音的功能，當講話時會將講話的內容轉換成文字，並顯示於網頁的元素中。

首先在網頁建立語音識別SpeechRecognition的物件。

const recognition = new SpeechRecognition()

之後建立p文字元素，並把p文字元素放入至.words元素中。

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

再來是建立當語音識別result事件，其事件目的是當取的語音識別的回傳結果，並將回傳結果轉換為真實文字，並將文字內容放入p文字元素中。當文字為設定目標時，可以用取代String.prototype.replace()來轉換特定文字。

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);
      }
  });

並在recognition的結束狀態為true時，把文字元素放入.word元素中。

最後是當語音識別recognition物件的end結束事件中加入再開啟語音識別的開始recognition.start方法，並開啟語音識別方法。

  recognition.addEventListener('end', recognition.start)
  recognition.start()

Html

<div class="words" contenteditable>
</div>

Javascript

1. SpeechRecognition
   SpeechRecognitionAPI控制語音識別的服務。
   The SpeechRecognition interface of the Web Speech API is the controller interface for the recognition service; this also handles the SpeechRecognitionEvent sent from the recognition service.

   1. SpeechRecognition.start()
      .start()方法是開啟語音識別的服務，偵測輸入的語音。
      The start() method of the Web Speech API starts the speech recognition service listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition.

   2. SpeechRecognition.interimResults
      interimResults控制是否將語音識別的暫時結果回傳，其暫時結果並非最後結果。預設值為false
      The interimResults property of the SpeechRecognition interface controls whether interim results should be returned (true) or not (false.) Interim results are results that are not yet final (e.g. the SpeechRecognitionResult.isFinal property is false.)

   3. SpeechRecognitionResult.isFinal
      isFinal為判斷語音識別的的結束事件狀態是否為true或false，其回傳值為布林值。
      The isFinal read-only property of the SpeechRecognitionResult interface is a Boolean that states whether this result is final (true) or not (false) — if so, then this is the final time this result will be returned; if not, then this result is an interim result, and may be updated later on.

2. Web Speech API events.result
   result事件是在當語音識別API從語音識別伺服器回傳結果時觸發。
   The result event of the Web Speech API is fired when the speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app

3. Web Speech API events.end
   end事件是當語音識別物件與語音識別伺服器結束連結時觸發。
   The end event of the Web Speech API SpeechRecognition object is fired when the speech recognition service has disconnected.

4. start
   start事件是當SpeechRecognition開始監聽輸入語音時被觸發。
   The start event of the Web Speech API SpeechRecognition object is fired when the speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition.

Css

1. line-height
   line-height是設定行的高度。
   The line-height CSS property sets the amount of space used for lines, such as in text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.

tags: SpeechRecognition