【Web Speech API】ブラウザの音声認識・音声入力を使ってGoogle検索をしてみよう!

こんにちは。
普段は音声に関わる開発をしていることが多いです。
 
Astersik, Amazon Connect, twilio, Google Speech API…などなど。
仕事をしていて思うのは、普段は意識していなくてもいろいろなところに音声の技術は使われているんだなーということです。

昨今はWebサービスやスマホのアプリケーションから音声認識や音声入力を行うということは当たり前になってきています。
Googleの日本語版音声検索にいたっては、なんとリリースされてから10年も経つというから驚きです!
音声の技術というのはどんどん身近なものになっています。
 
今回のブログでは、おそらく最も簡単に音声認識・音声入力を扱うことができる、
Web Speech APIについて紹介したいと思います。
実装の簡単さに対しての認識精度の高さにびっくりすると思います!

まずは実際に動かしてみよう

以下のサンプルで実際に動きを見てみてください。
 
「音声入力でGoogle検索開始!」ボタンをクリックすると音声入力及び自動でGoogle検索が行われます。
下の「status」は現在の状態を表しています。
 
※Chromeのみしか対応していません


 

status: stop

Web Speech APIとは?

Webページ上で音声認識、音声合成を利用することができるJavascriptのAPIです。
 
サーバーベースでもクライアントベースでも、APIを埋め込むことで音声認識、音声合成のどちらも利用することができます。
今回のデモで利用しているのは音声認識のAPIのみです。
 
内部ではGoogleのCloud Speech APIが動いているようですが、参照したページでは記載がありませんでした。
ブラウザ対応状況は、音声認識はCromeしか対応していませんが、音声合成が多くのブラウザで対応しているようです。
 
参照:Web Speech API

ソースコードを見る

HTML部分

HTMLでは認識結果を表示する枠組と、Google検索を行うフォームの定義のみを行っています。
 
submitボタンがformタグの外にあるのは、submitボタンのデザインを使うために利用しているだけです。
このボタンを押してもformが直接submitされるわけではありません

JavaScript部分

長いですが、大半はDOM操作になっています。
 
主要な部分は、

  • 8 ~ 12行目 SpeechRecognitionクラスのインスタンスのセットアップ
  • 13行目 認識結果が返ってきたときのイベントをキャッチするファンクション
  • 22行目 認識結果が認識終了結果なのかのチェック
  • 39行目 実際に認識を開始するポイント

となっています。
 
WordPressの投稿に直接埋め込むために空行をなくしたり、divタグを明記しないようにしています。
 

おわりに

このように、Web Speech APIを利用すれば、JavaScriptだけで音声認識、音声合成をシステムに組み込むことができます。
 
とても簡単に使えて組み込めるのがいいですね!
 
音声のインターフェースを組み込むことでユーザーの操作の幅が広がり、UXの改善にもつながるのではないでしょうか。
ぜひ一度トライしてみてください!

ではでは~。

この記事が気に入ったら
いいね ! しよう

Twitter で

【採用情報】一緒に働く仲間を募集しています

採用情報
ページトップへ