滑舌を改善するトレーニングの仕組み化を目指す

「リモートワークが増えて、気づいたら最近全然人と話してなかった！」ってことはないでしょうか？

私の場合、コロナによって、働き方も生活様式も大きく変わり、対面で人と話すことが劇的に減りました。もちろん、その分、オンラインで人と話すことは圧倒的に増えています。

でも、トータルすると、人と話す頻度って減ってないでしょうか？

それで、ふと思ったのが、

「話す機会が減ると、表情筋が固まる」
「表情筋が固まると、滑舌が悪くなる」
「滑舌が悪くなる、仕事のパフォーマンスが下がる」

ということです。

もちろん「滑舌が悪くなったって全く問題ない」という人はいいのですが、私の場合は、講師業をしているので、滑舌が悪くなると、仕事のパフォーマンスが確実に落ちます。

なので、定期的に滑舌トレーニングをする仕組みが欲しいなと思い、今年中につくることにしました。

以前、滑舌トレーニングのスクールに通っていたので、その時のトレーニングメニューをAI使って、自宅でもできるようにしたいと思っています。また、習慣化を楽しむという意味でも、ゲーミフィケーションを取り入れるつもりです。

今回も少し意識しました。

その一歩目としてのプロダクト

今回作ったのがこちら。

早口言葉ゲーム

こんな感じで使います。

ようやくできたー！！早口言葉を言えたかどうか、音声認識が判定してくれます。

しかし、噛んで、収録をなんどもやり直したことは、内緒です。#protoout #音声認識　 #WebSpeechAPI pic.twitter.com/hLLDkjrfLD
— 柳瀬浩之@LX（Learning experience）デザイン (@btap_hiro) October 15, 2020

あ、よく見たら、2秒ジャストじゃなく、1.99秒になってる。。
止める時間は調整が必要ですね。

これが結構難しいです。

つくりかた

Web Speech API

これを使うと、簡単に音声認識機能をWEBに追加することができます。


window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
var recognition = new webkitSpeechRecognition();
recognition.lang = 'ja';

recognition.onresult = function (event) {
            //フォームに音声から値を入力
     let results = event.results;
     for (var i = event.resultIndex; i < results.length; i++){
     let mes = results[i][0].transcript;
     document.getElementById('resultText').innerHTML = mes;
     console.log(mes);
     }
}

上記に加えて、音声認識の正誤によって、反応が異なるようにするために、以下のif文を加えました。

if (mes === "生麦生米生卵") {
   let img = document.getElementById("image_place");
   img.src = "image03.png";
   console.log("Yes");
} else {
   let img = document.getElementById("image_place");
   img.src = "image04.png";
   console.log("いいえ");
                }

これで、正誤によって、違う画像が表示されるようになりました。

ストップウォッチ機能の作り方

こちらの記事を参考にさせていただき、実装しました。

JavaScript：正確なストップウォッチを作る

上記の参考サイトからコードを拝借した後、２秒ジャストでストップウォッチを止め、止まると赤で表示されるようにしました。

function startStop()の中に、

setTimeout("startStop();colorChange()", 2006);

を追加した後、以下の、文字の色を変える関数を作りました。

function colorChange(){
    document.getElementById("time").style.color = "red";
}

今後の滑舌トレーニングAIの開発について

今回のようなミニゲームをいくつか作っていきますが、face-api.jsなどの表情認識機能も使って、音声だけでなく、表情から表情筋が動いているかどうかの判定もできるようにしていこうと思います。

表情認識と音声認識を使って、自宅や職場で簡単に滑舌トレーニングができ、かつ、いまの生活の中にトレーニングを組み込んでいける仕組みを作っていこうと思います。

Web Speech APIを使って、早口言葉ゲームをつくった