iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 20
0

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

上一篇
JS30-Day19-Webcam Fun
下一篇
JS30-Day21-Geolocation
系列文
新手也能懂的JS3030

尚未有邦友留言

立即登入留言