はじめに

みなさんこんにちは。株式会社みんなのウェディングでデザイナーをしている私です。
12月もそろそろ折り返し地点ですね。くふうアドベントカレンダーも後半に差し掛かって来ましたね。
今回はWeb Speech Apiの音声認識についての紹介です。
詳しい実装方法などには触れてないです。こんなのもあるよ！程度です。

Web Speech Apiとは

Web Speech API は、音声データをウェブアプリに組み入れることを可能にします。Web Speech API は、SpeechSynthesis (Text-to-Speech; 音声合成) と SpeechRecognition (Asynchronous Speech Recognition; 非同期音声認識) の 2 つの部分から成り立っています。

音声認識の方は、リンク先で確認できる通り対応ブラウザがほぼ限られていますが、音声合成に関してはほとんどのブラウザで一応使えるみたいですね。今回は前者のみについて触れます。これを用いることで、ブラウザ上での音声認識が用意に実装できます。

特徴を挙げるとすれば、お金がかからないこと、使い始めるのが容易なことでしょうか。特に登録などもいらないので、「まずは音声認識を使ってみよう」というシチュエーションなどに適していると考えられます。

使い方

私が試しに使ってみたときは、こちらの記事を参考にしました。
丁寧に書かれているので、今すぐ使ってみたい方はこちらを読んでいただくのが早いです。
https://paiza.hatenablog.com/entry/2016/07/05/%E9%9F%B3%E5%A3%B0%E8%AA%8D%E8%AD%98%E5%85%A5%E9%96%80%EF%BC%81Web_Speech_API%E3%82%92%E4%BD%BF%E3%81%84Chrome%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%82%92%E9%9F%B3%E5%A3%B0%E6%93%8D%E4%BD%9C%E3%81%99

Web Speech Apiの音声認識を使ってやったこと

卒論書いてた頃の私が、好きな二次元キャラクターと会話を試みる動画を発掘しました。
権利の関係でここで紹介することはできませんが、そういう使い方もできます。

この時やったのはかなり単純な実装で、

好きなキャラクターの「おはよう」「おやすみ」ボイスを録音する
Apiで認識したテキストが「おはよう」だった場合、「おはよう」ボイスを返す…みたいな実装をする
ブラウザ上で、ボタンを押したら音声認識をスタートするようにする
みたいな感じだったと思います。
コードは適当だったのでお見せできないです。はずかC

Web Speech Apiの音声認識でできそうなこと

今は限られたブラウザ(と、いうか、Chromeだけ…)にしか対応していませんが、このApiでできそうなことは色々ありそうです。

例えば、キャンペーンページなんかで、画面に向かってあるキーワードを発話させるようなものなんかは、良さそうな気がします。流行りの商品プレゼントキャンペーンページに取り入れたら、ただ大量の情報を流し見している現代の中でも、より強い印象をユーザーに与えることが可能になったりするのではないでしょうか。

あとは、ブラウザゲームへの応用も効きそうです。もうすぐ2020年になるのに何言ってんだって感じですが…私が遊んだ時のように、キャラクターに特定のワードを話しかけると反応が返ってくる、という機能は、昔からコンシューマゲームでもたまに見かけました。

もっと簡単なところだと、自社サイトでの音声検索の実装が容易になりそうです。

Web Speech Api の現実

現在、この機能はおそらく様々な理由から、Chromeにしか対応していないという状況です。
なので、おそらく現実的な利用シーンとしては、ブラウザ上で音声認識を使った機能を実装したい時の、テスト利用でしょうか。
もし、自社サイトで音声認識使いたい！となった場合は、Google Cloud Speech APIなどを利用することになるでしょう。ちなみにGoogle Cloud Speech APIの場合は60分の無料枠があるようです。

終わりに

さて、単純にこんなのもあるよ！といった紹介に終わってしまいましたが、いかがだったでしょうか。

最初は、「このApiを使って、擬似恋人をJSで作ればクリスマスも安心♪さみしくない♡」みたいなノリで書き始めたのですが、やめました。
ただ、Web Speech Apiは調べてみると、丁寧に詳細を説明してくれている記事がたくさん出てきて面白いので、ぜひこの際に皆様も調べて見てください😁終わりです