[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
參考
- Google 語音辨識 API @ OXXO
- Web Speech API Demonstration @ Chrome Browser