HTML5の音声入力とGoogleの翻訳APIを試してみた

投稿日:

先日、GoogleChrome 11が正式リリースされましたね(超はぇー)。
そこで、11から音声入力に対応しているという事だったのでちょっと試してみました。
ただ、音声入力だけだとつまらないかなぁと思い、ついでにGoogleの翻訳APIも一緒に試してみました。

マークアップ

<input type="text" x-webkit-speech>

マークアップは上記の通り。
これだけでいつものテキストボックスの右端にマイクアイコンが出てきます。
マイクアイコンをクリックすると音声入力が可能になります。
やべー超簡単。

lang属性を変えれば、日本語認識、英語認識切り替えられる様です。
※以下の書き方はHTML5の例

<html lang="ja">

これだと日本語認識

<html lang="en">

これだと英語認識

試してないですがlang属性を変えれば他の言語でも認識してくれると思います。

※2011/05/12 追記
ちょっと調べていたらinputタグのlang属性(こんなのってあったっけ?)を変えてもOK見たいです。

<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

<input type="text" x-webkit-speech id="webkitSpeech" onwebkitspeechchange="translate(this.value);" onkeyup="translate(this.value);"/>

翻訳 JavaScript

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');
}
Pocket

スポンサーリンク

HTML5の音声入力とGoogleの翻訳APIを試してみた」への10件のフィードバック

  1. shimabox

    昨日作った音声入力とGoogle翻訳のテストサイトのバグ修正とBlog書いたった。http://t.co/nzE4kqS

  2. m_t_bot

    RT @shimabox: 昨日作った音声入力とGoogle翻訳のテストサイトのバグ修正とBlog書いたった。http://t.co/nzE4kqS

  3. cvmat

    @interactlab @honotuku @akamado こちらが参考になるかもしれません。音声ソースを切り替えれば… "HTML5の音声入力とGoogleの翻訳APIを試してみた | Shimabox Blog" http://to.ly/awrJ

  4. mitsumushi

    『やべー超簡単。』って思わずつぶやいた。 面白いのでちょっと作ってみたりした。何かについ変えないかな。 >HTML5の音声入力とGoogleの翻訳APIを試してみた http://t.co/Td6T4aET%

  5. ピンバック: blog.rettuce.com » 東京てらこではなしてきました。

  6. photomotch

    いまプログラムの勉強をしていて、音声入力をググってたどりつきました。とても参考にさせていただいております。作りたいものがたくさんあるのですが、なかなか実現できずにいます(^^;;

  7. moonmile

    HTML5の音声入力とGoogleの翻訳APIを試してみた http://t.co/MypqTP0P — ふと思ったのだが、gmailなどの画像認証の音声読み上げをgoogle音声認識で解くとどうなるのだろう?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です