見出し画像

「音声しりとりゲーム」開発の第一歩、コンピュータに自分の言葉を聞き取ってもらう ー 第2章❶ 自分で「関数」を作ってみよう！ ー 『JavaScriptでやる1分間プログラミング』

子供から大人まで、プログラミング力と英語力を伸ばす！

今度は音声AIを使ったアプリ開発！

前回第1章ではJavaScriptで画像認識をするプログラミングをやっていきました。今回の第2章では、音声機能を使ったJavaScriptプログラミングをやっていきます。第1章の内容のベースとなった、ニューヨーク大学のDaniel Shiffman先生によるThe Coding Trainでは、音声認識や音声合成を利用する英語チュートリアルがあります。例えばこれです。

ただ、やはり日本語を使って面白いアプリを作ってみたいので、今回は独自のレシピを使います。ただ、この第2章を学習してCoding Trainの英語チュートリアルを見るのは意味があります。Coding Trainでは JavaScriptで音声機能を使うためのWeb Speech APIをラップしたp5.speechというライブラリを使っています。

Web Speech APIはブラウザで音声認識や音声合成を利用するJavaScript APIで、使い方はとても簡単です。今回は皆さんでこのAPIを直接利用して自ら音声機能の「function = 関数」を作るようにします。この第2章をやった後でShiffman先生の英語チュートリアルを見ると様々なコードがすぐに理解できるようになるので、是非挑戦してみてください。

「しりとり」をコンピューターとやる”ロジック”とはどんなものか？

まずはアプリの仕様を考えてみます。しりとりをコンピューターとやるというのは次のようなプロセスになるはずです。

✅ あなたが何か言葉を言う
✅ あなたが言った言葉をコンピューターが聞き取って理解する
✅ あなたが言った言葉が「ん」で終わっていないかどうか確認する
✅ あなたが言った言葉がすでに使われていないかどうか確認する
✅ あなたが言った言葉の最後の文字から始まり、「ん」で終わらず、さらにこれまで使われていない別の言葉を探す
✅ コンピューターが選んだ言葉をしゃべってあなたに伝える
✅ もし選べる言葉がなければ負けを宣告する

これらは全てしりとりアプリを作るためのプログラミングで実現する「ロジック」です。こうした”決まり”みたいなものをプログラミングコードを書くことで実行できればアプリが完成します。

そこでまずは「音声しりとりアプリ」の最大の機能である音声機能、つまり、皆さんがコンピューターに言った言葉を聞き取る（音声認識）機能と、コンピューターが選んだ言葉をしゃべる（音声合成）機能をプログラミングで実現してみます。

画像1

Chromeで音声機能が使えるように設定する

JavaScriptで音声機能を使うには様々な方法がありますが、手っ取り早いのは先に紹介したWeb Speech APIを使うことです。これでブラウザ内で日本語の音声認識と音声合成が利用できます。

ただし制限があり、問題なく完全に使えるブラウザは現在、Chromeだけです。それでも一定の設定が必要となりますので注意してください。Chromeの設定については次のMemo記事にまとめましたので、まずはこれを読んで環境をしっかり設定してください。

音声しりとりアプリに必要なもの

第1章に引き続き、HTMLとJavaScriptのプログラミングはVisual Studio Codeでやっていきます。また上記のMemoでも説明したように、ブラウザ内で正しく動作させるためにPreview on Web ServerというVSCodeの拡張機能を使います。

あとはお使いのパソコンにマイクとスピーカーが正しくセットされていれば問題なく音声機能が使えるはずです。

では基礎的なコーディングから始めていきましょう。

ステップ❶ index.html, shiritori.jsファイルを作る

いつも通り、まずはコアとなるHTMLファイル、index.htmlを作ります。さらに外部のJavaScriptファイルとしてshiritori.jsというファイルを用意します。

まずは適当な場所にプロジェクトフォルダを作ってShiriなどとフォルダ名をつけたら、VSCodeで「ファイル」ー「フォルダを開く」を選び、そこからShiriフォルダを選択します。

画像2

そうしたらエクスプローラーの中で、index.htmlとshiritori.jsという名前でファイルを作成してください。

画像3

ステップ❷ 音声認識と音声合成の関数をJavaScriptで書く

Web Speech APIを利用して音声合成（テキストを読む）と音声認識（言葉を理解する）の関数を次のように書きます。まずはコピペでshiritori.jsに貼り付けてください。

//====================================================
// MagicWand (JS Version)
//====================================================
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
//音声合成
function MagicSpeak(text) {
   var voice = new SpeechSynthesisUtterance();
   voice.text = text;
   voice.volume = 1;
   voice.rate = 1;
   voice.pitch = 1;
   voice.lang = "ja-JP"; //日本語に固定
   window.speechSynthesis.speak(voice);
}

//音声認識
function MagicRecognize(callback) {
   var recognition = new SpeechRecognition();
   recognition.continuous = false;
   recognition.lang = "ja-JP"; //日本語に固定
   recognition.interimResults = false;
   recognition.maxAlternatives = 1;
   recognition.start();
   recognition.onresult = function (event) {
       var reco = event.results[0][0].transcript;
       //コールバック関数を呼び出す
       callback(reco);
   }
}

Web Speech APIを使うとこのように10行以内でspeech-to-textもtext-to-speechもかけてしまいます。ただ、コードは最小限のもので、いずれも日本語に対応が固定されています。日本語のしりとりなので今回の用途ではこれでよいのですが、実際には様々な言語がサポートされて、音声ボイスもいくつも種類がありますのでWeb Speech APIのサイトで研究してみてください。

このようにfunction（関数）でまとめておくとMagicSpeechやMagicRecognize（recognize = 認識）を呼び出すだけで簡単に音声機能が使えます。

画像5

音声認識にもコールバックが使われる

MagicSpeakはとても簡単で、しゃべらせたいテキストを渡せばすぐに話してくれます。

MagicSpeak ("わたしはパソコンです");

ところがMagicRecognizeは、パソコンが皆さんのしゃべったことを聞いてくれて、その聞き取りの結果をテキストで返してくれます。このため「渡すもの」はないように思われます。しかし実際の関数にはcallbackというのが渡されています。

function MagicRecognize(callback) {

}

「コールバック」って覚えていますか？

そうです、第1章の2回目で、画像認識モデルの読み込みでこのコールバックを詳しく解説しました。

コールバックは「書き置き」だと説明しました。つまり、処理に時間がかかるので、「終わったら○○してね」ということで別の関数を指定してあげます。ここで渡す関数をコールバック関数と言うのでした。

メッセージ_m

音声認識も実際には音声モデルが使われていて、入力された音声データと、それが何を言っているのかを表すテキストの結びつきについて確率を計算しています。第1章のプロジェクトをやった方はすぐにわかると思いますが、これは画像認識のモデルと同じですよね。

例えば「こんにちは」と言ったとすると、音声モデルからは「○○％の確率でこれは”こんにちは”と言っている」という回答が来るわけです。その計算に多少の時間がかかるので、ここではコールバック関数を指定するようにしているのです。

ではそのコールバックで何をするかというと、認識されたテキストを受け取り、あとはそれをどうするかは皆さん次第です。画面に表示してもよいですし、何か別の処理をしてもよいです。しりとりならどうですか？ ユーザーが「リンゴ」と言ったらそれを音声認識して「りんご」というテキストになります。あとは「ご」で始まる別の言葉を探して、それを今度はMagicSpeakに渡してしゃべらせればよいですよね。

そこでまずはその「ユーザーが言ったことを認識する」という部分を音声認識でやらないといけません。そして認識したテキストをしゃべらせてみます。つまり、しりとりならユーザーが「りんご」と言ったら「ゴリラ」とコンピュータが言わないといけないのですが、ここでは「りんご」と言ったらそのまま「りんご」と言い返してもらい、音声認識がきちんとできているかどうかテストしてみます。

そのためのコードがこの１行です。

MagicRecognize ((text) => {MagicSpeak (text);});

この１行だけで音声認識されたテキストを即しゃべるようになります。つまり、あなたが「リンゴ」といったらコンピューターも「リンゴ」と言います。いわゆるオウム返しをするコードがこれです。

ステップ❸ 音声認識と音声合成をテストするコードを書く

ではすべての設定がうまくいっているかどうか、最低限のコードで音声認識と音声合成をテストしてみましょう。index.htmlに次のコードを入れてください。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Shiriとりゲーム</title>
   <script src="shiritori.js"></script>
</head>
<body>
   <h1>Shiriとりゲーム</h1>
   <script>
       //音声認識したテキストを即見むオウム返しのコード
       MagicRecognize((text)=>{MagicSpeak(text);});
   </script>
</body>
</html>

両方のファイルを保存したら、index.htmlのファイルの中身が表示された状態でCntl + Shiftを抑えながらLキーを押し、Preview on Web Serverでindex.htmlを表示させてみてください。shiritori.jsが開いた状態でこれをやるとブラウザにはJavaScriptが表示されますので注意してください。

ページがロードされたらすぐに何か言ってみてください。

画像4

なんの変哲もないページですが、ページが開いてすぐに何か言うと、あなたが言った言葉をオウム返しするはずです。ブラウザのリフレッシュボタンをクリックすると何度も試すことができますのでやってみてください。結構面白いですよ！

画像7

ここでオウム返ししないと何かが問題だということです。チェックポイントは次の通りです。

✅ Preview on Web Serverでブラウザ表示させましたか？ （Live Serverなどではうまくいきません）
✅ Chromeで表示されていますか？（EdgeやSafariではうまくいきません）
✅ Chromeのセキュリティ設定は調整しましたか？（Memo記事をよく読んで環境をきちんと設定してください）
✅ マイクがきちんと作動していますか？
✅ スピーカーがミュートになっていませんか？

これらを確認すれば必ずオウム返しが聞こえてくるはずです。

では次回はしりとりのロジックに関して詳しくコーディングしていきます。

乞うご期待！


この記事が気に入ったらサポートをしてみませんか？