Day20-課題內容

在昨天的課題中我們玩了一下視訊鏡頭，今天要來玩一下麥克風聲控！[1]
實作連結

Speech Recognition

透過 Web Speech API ，我們可以將音訊與網頁中的應用程式做互動。[2]
其中 Web Speech API 又分成兩部分：

1. SpeechSynthesis (Text-to-Speech)
2. SpeechRecognition (Asynchronous Speech Recognition.)

今天我們要使用的為能將聲音辨識出語言的 SpeechRecognition 介面。此介面是一個 recognition service 的控制器介面，負責處理由辨識服務發出的SpeechRecognitionEvent 事件，以下我們介紹幾個簡單的屬性與事件。[3]

Speech Recognition Property

1. SpeechRecognition.lang ：此屬性可用來設定或回傳目前指定的語言，若無設定會自動抓取 HTML 中的 lang 指定的語言，以上都無設定的話則會判斷使用者端所使用的語言。

2. SpeechRecognition.continuous：此屬性為設定判斷後回傳的所有資料為一連續的單個結果 (true)，或者是分開的不同結果 (false)，其預設值為 false。

3. SpeechRecognition.interimResults：此屬性可設定一段聲音中的暫時狀態判斷值是否會回傳。

Speech Recognition Event

1. SpeechRecognition.onaudiostart：當使用者的設備開始接收音訊時會觸發此事件。

2. SpeechRecognition.onaudioend：當使用者的設備結束接收音訊時會觸發此事件。

3. SpeechRecognition.onend：當使用者設備結束與語音辨識伺服器的連結時會觸發此事件。

4. SpeechRecognition.onresult：當語音辨識伺服器結束辨識並回傳結果時會觸發此事件。

5. SpeechRecognition.onsoundstart：當設備偵測到任何聲音時便會觸發此事件。

6. SpeechRecognition.onsoundend：當設備偵測不到任何聲音時便會觸發此事件。

7. SpeechRecognition.onspeechstart：當語音辨識伺服器開始辨識出音訊時便會觸發此事件。

8. SpeechRecognition.onspeechend：當語音辨識伺服器結束辨識音訊時便會觸發此事件。

9. SpeechRecognition.onstart：當語音辨識伺服器開始接收傳入的音訊時便會觸發此事件。

Speech Recognition Method

1. SpeechRecognition.start()：開始接收輸入的音訊，並啟動語音辨識伺服器的辨識服務。

2. SpeechRecognition.stop()：停止接收輸入的音訊，並回傳目前為止的音訊內容。

進入課題

要取得收到的辨識資料，首先我們要先建立一個 Speech Recognition 物件，然後執行該物件：

const recognition = new SpeechRecognition();
recognition.start();

執行之後，我們需要加上監聽的事件，並透過事件來取得Speech Recognition 物件目前的資料內容，而這便選擇的事件為 onresult ，讓辨識伺服器在完成辨識回傳結果時會觸發，如此一來 Speech Recognition 物件中就會存在音訊辨識完成的資料，而這邊需要多增加一筆監聽事件 onend ，這是因為每當完成辨識之後，我們的本地端就會斷開跟辨識伺服器的連結，因此每當面試完成之後，我們就重新開啟辨識功能：

recognition.addEventListener('result', translateSound);
recognition.addEventListener('end', recognition.start);
function translateSound (event){
    console.log(event);
};

從 console.log() 所印出來的資訊中，我們可以看到我們辨識出來的結果存在 results 屬性當中，將其取出來之後為 SpeechRecognitionResultList 的 ResultList 物件，再將其轉成陣列之後，第一個元素即為包含我們辨識內容的物件，最後將此物件中的 transcript 屬性值取出就是我們音訊經由辨識伺服器辨識完成後所回傳的結果：

function translateSound(event) {
      let dataArray = Array.from(event.results);
      let text = dataArray[0][0]['transcript'];
      console.log(text);
};

完成以上的步驟之後，就能透過聲音辨識取得我們每次說話所回傳的字串，如此一來就能發揮創意製造出聲控的頁面效果，而這邊我們利用辨識特定字元，透過將 DOM 上的圖片元素新增、刪減元素 class，進而更動其 CSS 屬性，製造出神奇的特效，大家可由上方實作範例去玩看看聲控效果哦！

總結

今天透過 Web Speech API 的 Speech Recognition 介面，成功將我們輸入的聲音，透過辨識伺服器回傳我們所說的話，如此一來就能利用最後得到的字串，做出各式頁面上的聲控效果喔！

參考資料

1. javascript30
2. Web Speech API
3. SpeechRecognition