作ろうと思ったきっかけ
私は大学時代、ハリー・ポッターの映画に出会い、ハリーが魔法学校に入学し、魔法の授業を受けたりする世界観がすごく魅力的でワクワクしながら観ていました。自分達の世界に魔法学校があったら私も通って魔法を習得してみたいと思ってます。以前、USJでワンドマジックという杖を振って呪文を唱えることで魔法を擬似体験できるイベントがあったのですが、友人と予定が合わず結局行けず。。今はやってないみたいですが、最近、プログラミングの勉強をしていて、もしかしたら、何か近いものは作れるかも。。せめてほんのちょっと気分だけでも魔法を使えた気になれるアプリを作ってみたいなと思っていました。
映画『ハリーポッターと賢者の石』に出てくる好きなワンシーン
ハリーポッターの最初に出てくる呪文で私が特に好きな魔法がウィンガーディアム・レビオーサです。物体を浮遊させる魔法ですが、授業中、発音を間違える生徒が続出してなかなかうまく羽を浮遊させることが出来ません。ハリーの友達のロンも呪文を唱えるのに大苦戦。”ウィンガーディアム・レビオサー”と唱え、発音が間違っていたために全然羽が浮遊しません。思わず何度も杖を振ってしまい、ハーマイオニーに注意されてしまいます。ロンはムッとして、ハーマイオニーにそんなに言うなら手本見せてよっていってやらせてみたら、ハーマイオニーは一回で成功を決めてしまう。それをみた、シェーマス・フィネガンもトライ。”ウィンガード・レビオサー”と間違えて呪文を唱えてしまい、羽を浮遊させるつもりが爆発させてしまいます。授業中のカオスな雰囲気、そして私がこのシーンで好きなのは、爆発させてしまった子。失敗することもあるけど、ここまで大失敗するのも、私はなんか逆に愛せるなって思いました。
今回、作りたいアプリ
”ウィンガーディアム・レビオ―サ”を正しく言えてるか判定してくれるアプリを作ります。杖を振りながら”ウィンガーディアム・レビオ―サ”を唱えてみる。アプリが音声認識し、正しく言えてたらヘドウィクのテーマが流れ、ほんのちょっとハリー・ポッターの世界の気分を味わうことが出来ます。間違えた呪文を唱えると間違え方に応じて、異なる挙動をしまします。ロンと同じ間違え方”ウィンガーディアム・レビオサー”の場合、ハーマイオニーに怒られる音声が流れます。シェーマス・フィネガンと同じ間違え方”ウィンガード・レビオーサ”の場合は爆発音が流れます。
実際に作ったアプリはこちら(↓)
・PCで試す場合 (私が試したときはPCの方が認識精度がめちゃめちゃ良かったです！ おススメ）
開発環境、使用アプリ・ライブラリ
コードの解説
See the Pen 音声認識 & 発話_mod2 by 吉田健一 (@citqlvue-the-looper) on CodePen.
6行目から8行目で3種類の音源(a)ヘドウィグのテーマ、(b)爆発音、(c)ハーマイオニーに怒られる音声のURLを指定し、Audioオブジェクトを定義します。13行目から18行目でWeb音声APIを使用し、音声認識するための準備をしております。26行目から72行目では音声認識出来たときの処理を書いています。音声認識したrecognizedWordを取ってきて、呪文に応じて条件分岐し再生するmp3を変えており、異なるアラートが表示されるようになっております。74行目からモーダルを表示する関数を書いています。
動作の様子
本アプリの発展性
実は本アプリ、会社の後輩に使って頂き、色々貴重なコメントを頂きましたので紹介いたします。
野生のトロールが現れ格闘の場面で、ロンがウィンガーディアム・レビオ―サでトロールの杖を浮遊させ、その杖がなんとトロールの顔面に落ちてきて気絶するシーンがあります。結果的にロンがウィンガーディアム・レビオ―サ倒したことになるのですが、たとえば本アプリで呪文を唱えることで敵と格闘するようなゲーム性、そういった要素を持たせたら面白いのでは、というコメントを頂きました。私自身、ゲームはほとんどしない人、ゲームボーイのSaGa2で歴史が止まってる人ですが、すごく面白そうって思いました。こういった要素もアプリ開発に取り入れていきたいなと思いました。
参考情報
mp3データのアップロード先として、色々選択肢があると思いますが、今回私はAWSのS3を選択しました。
ただ、デフォルトではブロックパブリックアクセスが無効になっているので、外部からアクセスできないため、以下の要領で解除し、使用しました。他にも色々方法はあるかと思いますが、初学者の私が一番最初に思いついた方法はこれでした。何か参考になれば幸いです。
・AWS S3のブロックパブリックアクセスを無効にする方法
・LINE Messagin API使って音声データを送るときにAWS S3にアップロードしたらうまくつながったときの話