利用Speechrecognition API打造簡單的猜數字遊戲! (30 Days challeng-14)

前言

幾乎在所有的程式設計課程中，猜數字遊戲都是一個相當常見的練習題。利用簡單的遊戲可以確認學生是否已經有了基本的程式設計邏輯，算是個很不錯的練習。今天在看AC新的課程時突然想到初學階段也曾經用Ruby寫過一個簡單的猜數字遊戲，今天何不試試看利用語音辨識重構這樣的遊戲呢?

SpeechRecognition API

SpeechRecognition是一個實驗性質的API，雖然在chrome瀏覽器全面支援，其他的瀏覽器可能會需要一點額外的設定才能正確運作，詳情可以參考一下官方文件。

使用的邏輯相當單純，大致邏輯是你需要一個宣告一個SpeechRecognition的物件，接著在該物件上掛載事件監聽，以下是官方提供的基本設置範例。

//基本設置
var recognition = new SpeechRecognition();
var speechRecognitionList = new SpeechGrammarList()
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;
//recognition.continuous = false;
recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.maxAlternatives = 1;
// 事件監聽
var diagnostic = document.querySelector('.output');
var bg = document.querySelector('html');

document.body.onclick = function() {
  recognition.start();
  console.log('Ready to receive a color command.');
}

recognition.onresult = function(event) {
  var color = event.results[0][0].transcript;
  diagnostic.textContent = 'Result received: ' + color;
  bg.style.backgroundColor = color;
}

你每一次的語音輸入的內容可以透過以下方式存取。

event.results[0][0].transcript;

值得注意的是，當你監聽result事件後，整個語音監控流程就視為已經結束，如果需要再次重啟的話則必須在此啟用start事件。

recognition.start();

專案介紹

這自然是一個非常簡單的猜數字遊戲，HTML與CSS的部分我都盡量做到最簡易，使用者可以利用語音輸入數字(我將語言設定為英文:D)，監聽到語音後便會在頁面上印出你所說的數字/字詞並跳出對應的提示訊息(higher,lower & invalid)。成功猜到數字後便會有個提示訊息與再來一次的按鈕。

專案預覽

專案連結

github
demo