跳至主要内容

[JS30] Day20: Native Speech Recognition

tags: AI, contenteditable, note style, 語音辨識​

這裡是使用內建在 Chrome 瀏覽器裡面的語音辨識 API，它存在 Chrome 瀏覽器的全域環境 window.webkitSpeechRecognition ，如果是使用其他瀏覽器可能要注意一下兼容性和使用方法。

contenteditable 屬性（HTML 部分）​

這裡的 HTML 多了一個叫做 contenteditable 的屬性，這個屬性可以設成 true/false 告訴瀏覽器這個區塊是不是使用者可以編輯的，在 Chrome 只要加上這個屬性之後，原本的 div 就會變成像 input 區塊一樣，使用者可以在裡面隨意編輯，非常有趣：

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

在原本的教學影片中，只在 <div> 裡面加上 contenteditable 這個屬性，而沒有指定 true/false，這點在 MDN contenteditable 的說明中指出，因為 contenteditable 是可列舉的屬性，因此建議還是要給它值。

語音辨識 API - speechRecognition（JS 部分）​

初始化 API​

初始化語音辨識 API：

let recognition = new webkitSpeechRecognition();

這個 API 提供一些參數可以讓我們設定：

  • lang：可以到 Web Speech API Demonstration 中透過檢視網頁原始碼看其他支援的語系。
  • interimResults：設成 true 表示在講話的當下會即時辨識，不需要等待。
  • continuous：設成 true 表示除非使用者停止，否則會一直辨識，不會結束；false 的話則是講完一段話停頓時就會停止辨識。
recognition.interimResults = true; // 講話的當下即時辨識
recognition.lang = 'cmn-Hant-TW'; // 要辨識的語言
recognition.continuous = false; // 會自動結束辨識

事件​

這個 API 提供一些事件讓我們可以監聽：

  • start：開始進行語音辨識時觸發。
  • end：結束語音辨識時觸發。
  • result：會包含語音辨識即時的資訊，在語音辨識的過程中會不斷被觸發。在result 物件中的results 屬性內，又包含辨識結果（transcript）、信心程度（confidence）、是否為最後結果（isFinal）等屬性。
recognition.addEventListener('result', (e) => {
  e.results[0].isFinal; // 是否為最後的辨識結果
  e.results[0][0].transcript; // 取得辨識結果
  e.results[0][0].confidence; // 取得辨識信心程度
});

方法​

這個 API 提供方法來開啟（start）和關閉（stop）語音辨識的功能：

recognition.start();
recognition.stop();

CSS 部分​

做了一些小小調整，主要是在 .words 中加了 min-height: 30rem; 讓它會自動稱高；另外把 p 的 margin 都設為 0，覺得這樣比較好看。

完成作品​

Day20: Native Speech Recognition

參考​