Google Translate APIの読み上げ機能(非公開API)を使ってみた!!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

前回、翻訳ツールを作って以来Google APIにハマってます!!

Google Maps API が最も有名ですが、他にも
Google Font APIGoogle AJAX Search APIといった
便利なAPIがたくさんあります。

そんな中最近発見したのが、Google Translateの読み上げ機能!!(非公開APIなので正式名称不明w)

というのも、Googleの公式翻訳サイトで読み上げ機能があったので、
きっとAPIがあるとおもい探してみたところ、非公式ながら発見!!
早速つかってみたというわけです。

非公開APIなので勝手に使って良いのか分かりませんが、
オープン思考なGoogle様なので広い心で受け入れてくれるでしょうw

View Sample

http://tm-labo.com/laboratory/finding/google-api-read-aloud/

※Chromeでは問題なく動きますが、Firefoxだと動かなかったです。IEは調べるまでもないw

Source

一応ソース一通り載せておきます。
何やってるかはソース内のコメントに詳しく書いてます!!

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>TM Labo: Google API - 読み上げ機能(非公式API)</title>
        <style>
            /* 等幅にしておく */
            * {
                 font-family: monospace;
            }
        </style>
        <script type="text/javascript">
            
            // qの値に応じてmp3を返すURL
            var URL = "http://translate.google.com/translate_tts?q=";
//            var URL = "http://translate.google.com/translate_tts?q=i+love+programming";

            var readAloud = function(element){
                // 入力した文字の空白や区切りを'+'に置換
                var query = element.value.replace(/\s/g, '+');
                // HTMLAudioElementを生成
                var audio = new Audio(URL+query);
                // 再生
                // onloadだとうまくいかなかった。Chromeだと別スレッドで読み込み終了次第再生する模様
                audio.play();
            }
        </script>
    </head>
    
    <body>
        <h1>Google API - 読み上げ機能(非公式API)</h1>
        <p>
            Googleの公式翻訳サイトで読み上げ機能があったので、<br />
            きっとAPIがあるとおもい探してみたところ、非公式ながら発見!!<br />
            早速つかってみました。<br />
            ※Chromeでは問題なく動きますが、Firefoxだと動かなかったです。IEは調べるまでもないw
        </p>
        
        <form name="fm" onsubmit="return false;">
            <input type="text" name="q" value="Hello, world!" />
            <input type="submit" onclick="readAloud(fm.q);" value="再生" />
        </form>
        
        <hr />
        <a href="http://tm-labo.com/">Home</a>
    </body>
</html>

    

この読み上げ機能と前回作った翻訳ツールを組み合わせて、あんなことやこんなことを、、、
ヤバイよだれが、、、

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT