Processing Advent Calendar 2019 参加記事

p5.jsには実はたくさんのライブラリが存在します。コミッターの皆様には足を向けて寝られません。
libraries | p5.js
今回はその中からp5.speechを利用して遊んでみたいと思います!
p5.speech | Speech synthesis and recognition for p5.js
p5.speechは音声認識と音声合成のためのライブラリで、これらの機能をサクッと簡単に使えるようなしくみになっています。

しゃべらせよう
音声合成のサンプルが以下のページで公開されています。
https://idmnyu.github.io/p5.js-speech/examples/02speechbox.html
テキストボックスに適当な文言を入力して(日本語もいけます)、Speakボタンを押すと読み上げてくれます。

上記の音声合成のソースコードは以下にあります。
p5.js-speech/02speechbox.html - github
最初に音声合成用の変数を宣言して、
var myVoice = new p5.Speech();
しゃべらせたい文言をspeak()で指定して再生するだけ!
myVoice.speak(input.value());
シンプルで素晴らしいですね!

音声認識させよう
音声認識のサンプルが以下のページで公開されています。
https://idmnyu.github.io/p5.js-speech/examples/04simplerecognition.html
ブラウザから出るマイク利用の権限に許可を出したら、適当にしゃべってみます。
一回しゃべりきるか一定時間でマイクがオフになるのでリロードしながら遊んでみます。

日本語で話しても適宜漢字に変換した状態で文章を返してくれます。webkitSpeechRecognition様々です。

音声認識サンプルのソースコードも見てみます。
p5.js-speech/04simplerecognition.html - github
最初に音声認識用の変数を宣言して、
var myRec = new p5.SpeechRec();
setup関数内で認識結果が返ってきた際のコールバックを設定後、音声認識を開始させます。
myRec.onResult = showResult;
myRec.start();
「resultString」に認識結果が入ってくるという流れです。
console.log(myRec.resultString);
音声認識の方もシンプルでいいですね!

組み合わせてみよう
上記の音声合成・音声認識を組み合わせてみました!
日本でおなじみの スーパー戦隊 の名前をマイクに向かって言うと、 Power Rangers シリーズでは何というタイトルで展開されているか音声付きで返してくれるという「パワーレンジャー英会話教室」…スグレモノです!
(※全く本筋に関係のない補足ですが、そもそもパワーレンジャーシリーズとは日本のスーパー戦隊をベースに作られたアメリカ産の特撮シリーズです。
その年その年で制作される日本の戦隊のデザインやコンセプトを踏襲しつつ、細かな設定やキャストは独自のものとなっています。
「恐竜戦隊ジュウレンジャー」をベースとした「Mighty Morphin Power Rangers」からスタートし、
最新シリーズは「特命戦隊ゴーバスターズ」をベースとした「Power Rangers Beast Morphers」です。)



実際に遊べるスケッチとコードはこちらにあります。
(最初にコンソールが出ますがxを押して消しちゃって大丈夫です)
パワーレンジャー英会話教室 - OpenProcessing

音声認識については以下のように設定しています。
let myRec = new p5.SpeechRec('ja-JP', parseResult);
myRec.onEnd = finishedRec;
myRec.continuous = true;
一行目で日本語音声で認識することを設定しています。
onEndで入力が終了した時に呼び出す先を設定しています。
また、continuousをtrueにすることで連続して入力できるようにしています。

音声認識で入力された情報をテキストとして受け取り、JSONをパースした上でその中にテキストが登録してあるかチェックします。
登録がある場合、対応する英語タイトルを音声合成で読み上げる、という流れです。
戦隊とパワーレンジャーの対応リストは以下のページのリスト準拠で作成しました。
パワーレンジャー - Wikipedia
また、音声入力時に正式なタイトルに変換されないものについては正しいタイトルに差し替えるよう実装しています。
(例 : バトルフィーバーj車戦隊トッキュウジャーなど。轟轟戦隊とか炎神戦隊とかは正しく変換されるのにね🤔)
ぶっちゃけ実装よりこの表記ゆれ検証のために全戦隊の名前をひとつひとつマイクに向かって言う作業が一番大変でした!!!

音声認識や音声合成というと難しい印象がありますが、
凝ったしくみのものが上記のとおりサクッと作れるのでめちゃくちゃ面白いです!
枠組みがサクッと作れる分、色々と応用して楽しいものが作れそうですね!