0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

音声認識するオンラインビンゴゲームつくった

オンラインのビンゴゲーム

私はcommew(こみゅー)というフリーランスコミュニティーに参加してます。
そこでフリーランス3人でチームを組んで「みんにゃでビンゴ」というWebアプリを作りました!

このビンゴには、遊び心で音声認識の機能をつけたので、この記事ではその実装を紹介をします。

ゲームの画面はこんな感じ😊
スクリーンショット 2019-12-06 19.54.37.png
スクリーンショット 2019-12-06 19.55.53.png

ゲームはこちらから試せます!
https://minnya.funspot.tokyo/
https://github.com/daisuke85a/bingo コードは汚いから読まないで
JSとPHPで作っています。フレームワークは使ってません 当初の僕はフレームワークを使えなかった・・・

commewでは、月に1回「フリーランス集会」が開かれています。オンライン飲み会的なやつです。
その集会で「オンラインでビンゴゲームをしたいよね」と言う話になったのですが、なにげにWebを探してもいい感じのサービスが見つからないので、コミュニティー内でチームを組んで作ることにしました。

ゲームの遊び方

音声認識に関わるところだけ抜粋すると

① ゲーム参加者は自分の番号が5個でたら「BINGOさけぶ」ボタンを押してPCのマイクへ「BINGO!!」と叫びます
② (ビンゴしている場合は)自分のビンゴカードに順位王冠がつきます(やった!)

ってかんじです!

音声認識するコードの説明

ざっと処理を書くとこんな感じです。

①JSで音声をテキストに変換する
②JSからサーバー(PHP)へテキストをPostする
③PHPにてテキストが「Bingo」かどうか確認する
④(Bingoの場合)PHPにてビンゴを叫んだ人が、本当にビンゴしているか確認する
⑤(ビンゴしてた場合)PHPにてビンゴカードに王冠と順位をつける

JSの処理

ビンゴを叫ぶ前に押すボタンです。

ビンゴ叫ぶボタン
<button id="bingoBtn">ビンゴさけぶ</button>

JSで上記のボタンに「マイク音声入力」機能をつけます。

音声をテキストに変換するのは、JSを9行書けばできます。

webkitSpeechRecognitionがキーポイントです。
僕はこれをこの本で知りました。この記事にも書いてあります。

jsで音声をテキストに変換してサーバーへPOST

// 音声認識のためのインターフェイスである webkitSpeechRecognitionをnewする
const speech = new webkitSpeechRecognition();

// 言語を英語に設定。最初は日本語(ja-JP)に設定していたが、「ビンゴ」という単語が認識できなかった(泣)
speech.lang = 'en-US';
const bingoBtn = document.getElementById('bingoBtn');

bingoBtn.addEventListener('click', function(){
    // ビンゴボタンが押されたら、PCマイクからの音声入力待ちにする
    speech.start();
});

// 喋り終わったら(声が途切れたら)resultイベントが発火する
speech.addEventListener('result', function(e){
    // textに音声入力した文字が入る(例:Bingoなど)
    const text = e.results[0][0].transcript;
    // サーバーへPostする
    execPost("game.php",  {'bingo':text});
});

execPost関数はDOM操作で仮想的なformを作りサーバーへsubmitする処理になります。本筋から反れるので省略・・・詳細は参考サイト

PHPの処理

POSTされたテキストが「bingo」の場合はビンゴ済みかチェックして、王冠と順位をつけます。

POSTされたテキストを受け取る処理
//"bingo"と音声入力されたかチェックする。英語として解釈するので、発音が悪いと一生ビンゴできない・・・
if ($_POST['bingo'] === "bingo") {
   // 叫んだ人のビンゴカードの5個の数字が、全て出ているかチェック
   if ($bingoApp->checkBingo($_COOKIE['name'])){
      // ビンゴカードに王冠と順位をつける(おめでと!)
      $bingoApp->bingo($_COOKIE['name']);
   }
}

最後に

これを作ったのは2018年10月〜2019年4月(長期戦だ〜!)になります。
会ったことない人と3人チーム、業務外、フルリモート、仕事に追われてやる暇ない・・・など、いろんな不安要素がありました。

PHPを勉強したての私はリーダー、インフラ、PHP周りを担当。他の2人はデザイン、アニメーション、HTML、CSSを担当していただきました。いろんな反省点(PHPコードは汚いし、MVCにもできてないし、GET/POSTの使い分けもできてない。など・・・)はあるものの、作りきれてよかった!!!という気持ちでいっぱい。

なにより、commewのイベントで活用して頂き、盛り上がったのがうれしいです😊
commewでは「デザインかわいい!」「アニメーションかわいい!」と大好評!!!(あれ、音声は・・・?)

今年のcommewのオンライン忘年会でも、このビンゴゲーム( https://minnya.fun/ )が使われそう。
マイク無しでイベント参加する人もいるので、音声以外でもビンゴできるよう改良したいな・・・!

おわり!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?