1. まとめトップ
  2. IT・ガジェット

すげー簡単!!WEBに音声認識を取り入れられるぞ!!

新年会で盛り上げるアプリを作ろうと思っていろいろ調べていたら、Chromeで音声認識が出来るとの情報をゲット!HTMLに一行プロパティ書くだけで、テキストフィールドが音声認識対応になるみたい。すごく簡単すぎて驚いたので、まとめました。

更新日: 2012年12月23日

kakashi04さん

  • このまとめをはてなブックマークに追加
201 お気に入り 37347 view
お気に入り追加

Chromeで音声認識ができるって?

GoogleChromeで標準で音声認識が出来るようです。
しかも、開発者が自分のブログ、サイトに実装するのも簡単。
今回はその機能の紹介と、実装方法を少しお伝えしようと思います。

実際に体験してみよう!

HTML5のディベロッパー向けスライドをGoogleが公開しています。
まずはそれをみてどんなことができるか見てみましょう
↓↓↓↓↓↓↓↓↓↓↓↓↓下のリンクです↓↓↓↓↓↓↓↓↓↓↓↓

マイクのアイコンからポップが出てきましたよ。
話しかけてみましょう。
「いい天気ですね」

しゃべった言葉がテキストフォームに入力されました。

音声の認識はどれくらいなの?

気になるのがこの音声認識はどれくらいの性能かということ。
それを検証している方がいらっしゃったので、ご紹介します。

まず、「東京」、「今日のニュース」、「音声認識」など、一般的な単語はクリアに発音しさえすれば、ほぼ正確に認識された。また、「猫 里親」、「東電 値上げ」など、スペースを入れたい場合も区切って話せばOK。単語レベルは難なくテキスト変換された。

単語は大丈夫みたいです。

ただし、例えば「蛙」を検索したい場合、「蛙」または「カエル」と変換されてほしいが、「かえる」としゃべっても基本は「帰る」と認識されてしまう。イントネーションに注意しても日本語はやはり同音異義語の認識が難しく、単語レベルだと推測も厳しい。単語で認識させる場合は「カエル 両生類」のように連想しやすい言葉で伝えるように工夫したいところだ。

同音異義語は工夫が必要とのこと

認識率はかなり高いようです。
むしろ、認識に失敗したら、マイクが認識しているかどうかを調べた方が早いくらいのようです。

WEBに自分で取り入れるには?

実装方法が驚くほど簡単です。
テキストフォームに実装するには
<input type="text" x-webkit-speech />
とのように、
x-webkit-speech
というプロパティを入れて、Chromeで表示させるとマイクのアイコンが表示されます。
(残念ながら、firefox,safariではできません。)

HTMLを組んで気づいたこと

マイクのアイコンはfont-sizeプロパティで大きくできる
<input type="text" x-webkit-speech style=”font-size:XXpx" />
とすると、アイコンの大きさを変えられる。

HTMLを組んで気づいたこと2

GoogleChromeのヘルプに書かれていた音声認識のショートカットが
<input type="text" x-webkit-speech />
を書いただけでも使用できること。
音声使ってどんどん入力するWEBアプリを作ろうと思っていたんで、
このショートカットは便利

Javascriptと連携の仕方は?

最後に

いかがでしたでしょうか。
HTMLに一行書くだけで音声認識を実装できるのは魅力ですね。
今のところ、Chromeでしか使えないと言うところが少し痛いですが、
かなり簡単に実装できるのが、魅力です。
あとはJavascriptでフォームの文字をとってくれば、
さまざまなWEBアプリが作れそう。

音声認識の公式資料

1





kakashi04さん

自己紹介を入力してください