JavaScriptを使って音声で入力された掛け算の積が期待されているものかどうか判定する 🧮

我ながら良くわからないタイトルにしてしまったな。と思いますが、JavaScriptを使って音声で入力された掛け算の積が期待されているものかどうか判定します。

JavaScriptで九九の音声入力を判定
九九の積を音声入力で検証
九九の掛け算判定アプリの開発
九九の口頭計算アプリ開発の舞台裏
音声入力掛け算判定の旅路

などを候補にもらいました。

🧮

まずは、こちらをご覧ください。

娘に九九のことを好きになってもらえたら良いなと思い、「表示された数字が積になる九九を口頭で答える仕組み」をつくりました。
正解するとmyCobotが頷いてくれます。 pic.twitter.com/2X6w4uN04F
— 君塚史高 (@ki_230) 2024年5月22日

「へえ」ボタン以来の娘のために作ったアプリケーションです。

blog.kimizuka.org

九九が苦手そうだったので、苦手意識が無くなれば良いなと思ってつくりました。

簡単に説明すると、

❶ 画面上に数字が表示される
❷ 表示された数字が答えとなる式を口頭で回答
❸ 回答された式の答えが表示された数字と一致すれば正解

というアプリケーションです。

正解した時により嬉しく、不正解の時に嫌な気持ちにならないように、myCobotと連動させてみました。

音声で入力された掛け算を認識する

今回はここの部分を解説します。
前提として音声認識はSpeechRecognition APIを使っています。
また、本当は2×4は「にかけるよん」ではなく「にし」と入力したいところですが、今回は諦めています。なので、必ず「⚪︎かける△」という形式で入力されるものとします。

ソースコード（抜粋）

// 九九の答えを作成
let question = (Math.floor(Math.random() * 9) + 1) * (Math.floor(Math.random() * 9) + 1);

// 音声入力のコールバック
recognition.addEventListener('result', (evt) => {
  let txt = evt.results[0][0].transcript.replace(/\s/g, '');

  // Chromeでは「かける」がx（半角）→ 例) 8x4
  // Safariでは「かける」が×（全角）→ 例) 8×4

  if (txt) {
    const [a, b] = (() => {
      txt = txt.replace(/×|X|かける|カケル|書ける|掛ける|翔|描ける|欠ける|賭ける/, 'x');

      return txt.split('x');
    })();

    if (a * b === question) {
      // 正解
      if (a < 10 && b < 10) { // 九九の範囲内か判定
        // 正解だし九九の範囲内
      } else {
        // 正解だが九九の範囲外
      }
    } else {
      // 不正解
    }
  }
}, false);

こんな感じで実装しました。
SpeechRecognition APIを使ってSpeech-to-Textを実装したサイトで試してみたところ、基本的には掛け算は数字とxで表されることがわかったので、

const [a, b] = txt.split('x');

で、掛ける数（b）と掛けられる数（a）を取得できます。
「はちかけるよん」と音声入力すると「8x4」という文字列になるわけです。

ただし、まれに「8かける4」となったりするのと、SpeechRecognition APIの仕様が変更になる可能性を考えて、

txt = txt.replace(/×|X|かける|カケル|書ける|掛ける|翔|描ける|欠ける|賭ける/, 'x');

という感じで、さまざまな「かける」を「x」に置換しています。

開発当初はChromeでしか動作を確認していなかったため「×」（全角エックス）を置換の候補に入れてなかったのですが、Safariで確認すると「はちかけるよん」と音声入力すした際「8×4」と「かける」が「×」（全角エックス）になることがわかり追加しました。

娘のiPadで全く反応しなかった原因を探っている際に気づいた事実です。動作確認は大事ですね。

また、

    if (a * b === question) {
      // 正解
      if (a < 10 && b < 10) { // 九九の範囲内か判定
        // 正解だし九九の範囲内
      } else {
        // 正解だが九九の範囲外
      }
    } else {
      // 不正解
    }