テキスト入力欄を「音声入力対応」にしてしまう魔法のHTMLコード | 京都のSEOコンサルタント松尾茂起のブログ

2008年10月21日
テキスト入力欄を「音声入力対応」にしてしまう魔法のHTMLコード

いきなりですが、当ブログの検索ボックスが「音声入力」に対応しました。

で、テストを兼ねて早速「グーグル」と音声入力してみたところ・・・

当方がこのブログの検索ボックスで「グーグル」と音声検索してみたところ1・・・

「で、グーグル」と検索されました。
我ながら、恐るべし滑舌の悪さです・・・。

当方がこのブログの検索ボックスで「グーグル」と音声検索してみたところ・・・

もし、マイクを持ちながら当ブログを見てくださっている方がいらっしゃれば、是非一度、音声入力をお試しいただければと思います。
（そんな人がいるのか、という突っ込みはさておき）

この音声入力の仕組みは、下記のHTMLコードを<head>タグの中に入れていただくだけで導入できます。

上記のたった一行のコードを<head></head>タグ内に加えるだけで、ページ内のあらゆるテキスト入力欄が「音声入力」に対応してしまうのです。

実はこのコード、「w3voice Laboratory」というサイトで公開されているコードです。

「w3voice Laboratory」は、和歌山大学「聴覚メディア研究室」で開発された音声認識技術を用いたウェブアプリケーションを公開しているサイトです。

Javascriptライブラリも幾つか公開しており、「音声入力によるGoogle検索」などの素敵なライブラリが公開されています。

→音声認識テキスト入力Javascriptライブラリ w3voiceIM.js

音声入力をするためのソフトは「ドラゴンスピーチ・プロフェッショナル Ver.7」等が有名ですが、ドラゴンスピーチはあくまでも「自分が音声入力する」ためのツールです。
しかし、このアプリケーションは「他人に音声入力をしてもらう」ためのツールですので、色々な応用が考えられます。

「w3voice Laboratory」のサイトにも書かれていましたが、音声認識技術を用いれば、「声で注文できるネットショップ」なんかも作れます。

「おばちゃん、ホームページテンプレート、ひとつちょうだい」

「はいお待ち！」

なんていう掛け合いも可能かもしれません。

ちなみに、発音しても認識されない「登録されていない単語」に関しては、共有型音声認識エンジンの認識辞書に単語を追加することで対応できるようです。

但し、このサービスには以下のような免責事項や注意点があります。
以下、サイトより引用。

・http://w3voice.jp/ で提供するすべてのサービスは、公開試験を目的に提供するものです。本サービスに関する欠陥、本サービスの利用が原因で発生した損失や損害について、一切責任を負いかねます。また、サービスを予告なく、休止、終了することがあります。

・すべてのサービスは無料で提供されます。また、営利、宗教、政治活動に関する利用、法律や公序良俗に反する利用、他者を誹謗中傷する利用は禁止とします。なお、特定目的の利用には、専用の音声認識エンジンサーバを構築することも可能です。別途ご相談ください。

・個人情報（掲載を承諾した場合を除く）は、投稿（録音）しないようにしてください。

・本サービスは研究・実験を目的としており、入力された発話はすべてデータベースに蓄積され、研究活動の中で分析・調査等の対象として利用される予定です。録音されることをご了承の上、ご利用下さい。ただし、本人の同意なしに、個人の特定に係わるような情報、データを公開することはありません。

特にご注意いただきたいのは、最後の項。

「本サービスは研究・実験を目的としており、入力された発話はすべてデータベースに蓄積され、研究活動の中で分析・調査等の対象として利用される予定です」

ということなので、くれぐれも変なことを叫ぶのはお止め下さい(^^;)

上記の仕組みを使えば、音声入力の仕組みを、あなたのサイトへ簡単に導入できます。
検索ボックスだけでなく、下記のようなコメント入力フォームも音声入力に対応しますので、なかなか面白いです。

ただ、言わずもがな、音声入力をしてもらうには「マイク」が必要ですので、実際にはどれだけの訪問者の方が音声入力をして下さるかは分かりません(^^;)

一応、スカイプで使う「ヘッドセットマイク」や、最近のノートPCに付いている「内蔵マイク」でも、音声入力は問題なくできますので、そのような環境にいる方を想定して導入してみる・・・、というのも面白いかもしれません。

個人的には、「開けゴマ！」と叫ぶと、秘密のページが開く仕組みなんて面白そうだな、と思ってたりして。