# [JS30] Day.20 Native Speech Recognition
###### tags: `JS30`
## 任務 Task
讀取瀏覽器內的聲音辨識，將文字呈現出來。

==完成時間：30min==
## 步驟 Step
1. 使用 `window` 內建 `SpeechRecognition API` 去讀取聲音辨識。
2. 監聽 `result` 事件，裡面會有辨識出的文字，將裡面文字呈現出來。
3. 如果 `e.results[0].isFinal = true` ，再重新建立文字段落，不然文字會一直蓋過去。
4. 監聽 `end` 事件，如果結束了，就重新 `recognition.start()`。
## 筆記 Note
### <font color=#337EA9>HTML contenteditable</font>
* 可以供使用者更改文字結果。
### <font color=#337EA9>JS SpeechRecoginition</font>
* 是一個 `Web Speech API` 使用方式為 `new SpeechRecognition` 建立一個新的物件。
* Property：
* `SpeechRecognition.lang` ：設定偵測語言。
* `SpeechRecognition.continuous` ：是否回傳每個 `result` 預設為 `false`。
* `SpeechRecognition.interimResults` ：控制是否回傳 `results` 預設為 `false`。
* Method：
* `SpeechRecognition.start()` ：開始辨識聲音。
* `SpeechRecognition.stop()` ：結束辨識聲音。
* Event：
* `start` ：開始辨識聲音時。
* `end` ：結束辨識聲音時。
* `result` ：當回傳辨識內容時。
## 想法 Idea
:::warning
:bulb: <font color=black>當辨識到特定文字時，顯示特定效果
</font>
:::
### 方法 method
1. 使用 `String.prototype.includes()` 當含特定文字時，觸發效果。
2. 使用 `String.prototype.replace()` 將特定文字更改成想要的圖案或符號。

## 連結
[MDN](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition)