---
# System prepended metadata

title: '[JS30] Day.20 Native Speech Recognition'
tags: [JS30]

---

# [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)