tags: ItIron2022 Javascript

前言

我們昨天已經完成了基本的UI部分以及做好之後的事前規劃，剩下要做的事情就只是把js的邏輯補上即可，只要昨天有大致看懂SpeechRecognition的邏輯，那麼今天的內容對你來說一定非常容易的！

Getting started

Step1: 產生隨機數字

這個步驟我們在之前的打字遊戲就有做過類似的東西了，相信這個部分難不倒你，我們的目標是產生1 ~ 100的數字，因此請你將以下的程式碼寫入js檔案中。

// get a random num between 1 ~ 100
const randomNum = getRandomNum();

function getRandomNum() {
  return Math.floor(Math.random() * 100) + 1
}

Step2: 語音辨識物件

不曉得你是否還記得昨天那張結構分析圖，我們接著要做的事情大致可以分為四個步驟

1. 建立語音辨識物件
2. 加入語音辨識設定
3. 開啟語音辨識
4. 監聽語音辨識結果

我們在這個部分會包含前三個步驟，另外為了保險起見(配合瀏覽器支持度)，我們一開始先對window.SpeechRecognition函數做個處理。

設定的部分我們只需要改動語言，其他的東西我們這次用不到，是的，你等等要用英文玩這遊戲:D

其餘的東西就與官方文件完全相同，理解之後就可以將以下內容寫進js檔案囉！

// set up speech recognition
window.SpeechRecognition =
  window.SpeechRecognition || window.webkitSpeechRecognition;

let recognition = new window.SpeechRecognition();
recognition.lang = "en-US";

// start recognition
recognition.start();

Step3: 監聽語音辨識結果

我們從昨天的文章知道可以透過監聽result事件來取得語音辨識的結果，請你先在js中補上以下的程式碼。

// speak result
recognition.addEventListener("result", onSpeak);

// start the recognition again
recognition.addEventListener("end", () => recognition.start());

function onSpeak(e) {
  console.log(e);
}

語音辨識一旦結束後我們需要再次啟動才能持續地進行語音辨識，我們這邊先偷偷加個一個console讓你看看辨識後取得的e物件長什麼樣子。

從圖片中可以看到，當我講了Halo之後，這個文字我必須在results裡面才能取得，且內部是一個二維陣列，最終再透過transcript屬性才能取得我們想要的文字。

Step4: 根據辨識結果變更畫面

終於到了最後一步，我們需要根據判斷的結果去做出higher/lower/invalid提示或是遊戲結束的畫面，我們在剛剛的監聽器已經知道如何取得語音辨識的資訊，接著我們只需要選取呈現訊息的元素並根據判斷的結果顯示對應提示或結束畫面就行囉！

別忘了我們需要處理不合法輸入的情況，也就是根本不是數字、大於100或是小於1的情形，因此我會額外用一個函數去處理，同時我們在結束遊戲時也要加入再玩一次按鈕的監聽處理。

理解這些之後，請你修改剛剛寫的onSpeak函數並將額外的程式碼補進js檔案中。

// 選擇呈現訊息的元素
const msg = document.getElementById("msg");

function onSpeak(e) {
  const guessNum = e.results[0][0].transcript;
  displayResult(guessNum);
}

function displayResult(num) {
  const hint = checkIsValidNumber(num)
    ? parseInt(num) > randomNum
      ? "Lower"
      : "Higher"
    : "it's not a valid number";

  if (parseInt(num) === randomNum) {
    document.body.innerHTML = `
      <h1>Congrats! You win!</h1>
      <button class="play-btn" id="play-btn">Play again</button>
    `;
  } else {
    msg.innerHTML = `
       <h3>You said</h3>
       <span class='box'>${num}</span>
       <div>${hint}</div>
    `;
  }
}

// check if thats a valid number
function checkIsValidNumber(num) {
  if (!isFinite(num) || parseInt(num) > 100 || parseInt(num) < 1) {
    return false;
  }
  return true;
}

// play again
document.body.addEventListener("click", (e) => {
  if (e.target.id === "play-btn") location.reload();
});

總結

到這邊一切就結束了，我們有個有趣的語音專案讓我們把玩，這類的實驗性API到普及往往都需要很長的時間，用在實務環境時務必先確認瀏覽器支援度，個人專案的話就比較無所謂，可以放膽地去做這樣的實驗，未來真的碰到類似需求時你也會比較有概念！

文章中的範例程式碼可以在這邊取得，歡迎自行取用

轉職Q & A

Danny，我進到技術面試的關卡，但我並沒有碰到什麼技術測驗，感覺上只是與技術主管聊聊過去經歷而已，這樣正常嗎？

很遺憾的，我這邊必須給出模稜兩可的答案。這正常、也不正常，我們之前有提過面試的生態現在並不是這麼健康，有許多面試充斥著看似完全不必要的測驗與白板題，但另一個極端也是存在的，確實是有公司完全沒有技術相關的測驗，整個面試流程僅僅是談過去的經驗以及一些人格特質的確認，挑人的標準更不明確一些，遇到這種情況就看你怎麼想，畢竟公司百百種，面試的過程自然也百百種，只是有一點你要理解，若你進這樣的公司，你的同事們大概率全都是走這樣的面試流程進來的，團隊的實力就挺不好估計的。

本文章同步發布於個人部落格，有興趣的朋友也可以來逛逛~!