先日、GoogleChrome 11が正式リリースされましたね(超はぇー)。
そこで、11から音声入力に対応しているという事だったのでちょっと試してみました。
ただ、音声入力だけだとつまらないかなぁと思い、ついでにGoogleの翻訳APIも一緒に試してみました。
マークアップ
1 | <input type="text" x-webkit-speech> |
マークアップは上記の通り。
これだけでいつものテキストボックスの右端にマイクアイコンが出てきます。
マイクアイコンをクリックすると音声入力が可能になります。
やべー超簡単。
lang属性を変えれば、日本語認識、英語認識切り替えられる様です。
※以下の書き方はHTML5の例
1 | <html lang="ja"> |
これだと日本語認識
1 | <html lang="en"> |
これだと英語認識
試してないですがlang属性を変えれば他の言語でも認識してくれると思います。
※2011/05/12 追記
ちょっと調べていたらinputタグのlang属性(こんなのってあったっけ？)を変えてもOK見たいです。
1 | <input type="text" x-webkit-speech lang="en"> |
こんな感じ。これだと英語認識。こっちのほうがなんだかスマートですね。
※参考
Google Chrome11でサポートされた音声入力API – Webtech Walker
短文だと日本語でもかなりの精度を誇っています。恐ろしい。。
英語は自分の発音がかなりのヤバさなのでHelloを認識してもらうのも一苦労でした。(でも、この辺使って何か面白いことが出来そう…)
プラグイン
ちなみに上記のマークアップをしなくてもVoice Searchというプラグインをインストールすればテキストボックスにマイクアイコンが出てきて音声入力が可能になります。
Voice Search – Chrome Web Store
Google翻訳API
以下のサイトにGoogle翻訳APIの使い方、自分の試してみたかった事がほぼ丸々書かれていたのでそちらを活用させて頂きました。
【レビュー】Googleからの贈り物 – Google AJAX Language APIでカンタンに翻訳サイトを
音声入力イベント
以上で部品は揃ったようなものですが、まてまて、音声入力されて認識した文字はどうやって取得するんじゃい。という疑問。
そこで、調べてみると以下のサイトにドンピシャの答えが
音声入力APIを試してみた – おし、プログラミング
onwebkitspeechchangeで取得できる事がわかりました。
デモ完成
上記で調べた事を組み合わせて以下のデモを作ってみました。
shimabox.net – TranslationAndWebkitSpeech
機能としては大体以下の通りです。
- 音声入力可能 ※但しGoogleChrome11以降
- 日本語認識/英語認識の切り替え可能
- 入力文字をリアルタイムに翻訳
さくっと翻訳してみたい時はなかなか便利かなと。
2012/02/11 追記
Google翻訳APIが無料で使えなくなってしまい、翻訳不能になりました。
その代わり、Microsoftの翻訳APIで代用したものを書きましたのでこちらも参照してみてください。
Microsoftの翻訳APIを試してみた | Shimabox Blog
ソース
最後に簡単な翻訳部分の仕組みだけソース公開します。
全ソースはサイトのを見て下さい。
※結構やっつけで作ったので汚いのはご勘弁
入力フォーム HTML
1 | <input type="text" x-webkit-speech id="webkitSpeech" onwebkitspeechchange="translate(this.value);" onkeyup="translate(this.value);"/> |
翻訳 JavaScript
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | google.load("language", "1");var d = document;// 翻訳function translate(text){ var fromLang = d.getElementById("webkitSpeech").getAttribute('lang'),// lang属性の取得 toLang = getToLang(); google.language.translate(text, fromLang, toLang, function(result) { if (result.translation !== "" && result.error) { d.getElementById("result").innerHTML = "Error:" + result.message; return; } // 翻訳結果 d.getElementById("result").innerHTML = result.translation; });}// 何語に翻訳するのか現在選択されている言語を取得function getToLang(){ var selectedLang = d.getElementsByName("lang"), len = selectedLang.length; for(var i=0;i<len;i++){ if(selectedLang[i].checked) { return selectedLang[i].value; } } // 上のfor文で取得できなかったらlang属性を返す return d.getElementsByTagName('html')[0].getAttribute('lang');} |
いまプログラムの勉強をしていて、音声入力をググってたどりつきました。とても参考にさせていただいております。作りたいものがたくさんあるのですが、なかなか実現できずにいます(^^;;