PJCHENder 未整理筆記

[JS30] Day20: Native Speech Recognition

2017-10-13

[JS30] Day20: Native Speech Recognition

@([WesBos] JS30)[JavaScript]

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

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

contenteditable 屬性(HTML 部分)

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

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

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

語音辨識 API - speechRecognition(JS 部分)

初始化 API

初始化語音辨識 API:

1
let recognition = new webkitSpeechRecognition();

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

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

事件

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

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

方法

這個 API 提供方法來開啟(start)和關閉(stop)語音辨識的功能:

1
2
recognition.start()
recognition.stop()

CSS 部分

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

完成作品

Day20: Native Speech Recognition

參考

掃描二維條碼,分享此文章