【はじめに】 【注意】【このページはGoogle Chromeの最新版を使って閲覧してください。】【Google翻訳の音声合成が凄い件】以前から、ウェブサイト上で音声合成を利用したアナウンスが簡単に実現できないかといろいろ試行錯誤を重ねてきました。 そんなとき、2011年04月23日にGoogle翻訳に音声合成機能が備わっていることに気が付きました。 リンク先のページの左側のテキストボックス内に表示されたスピーカーマークをクリックすると、なかなかいい感じで女性の声が聞こえるんです。 (2012年02月14日現在は日本語アナウンサー用の抑揚アクセント制御が破綻状態らしく、中国人女性が日本語で話しているように聞こえる。これは残念な状態です。できれば元に戻してほしいものだ。) 日本語の場合は、『?』やスペース、句読点を加えて、少し記述の仕方に工夫しないと『なまり』がでてしまっておかしな結果に聞こえてしまいますが、英語や他の言語ではなかなかに凄いです。 驚いた! これはなんとかJavaScriptで使ってみたいものだと感じました。 そこで、05月03日にソースを読んだり、そこで判明したキーワードで検索をしたりと、いろいろ調べてみた結果、Google翻訳の音声合成機能は『www.ispeech.orgのiSpeech API』を使っているらしいことがわかりました。 Googleでの名称はTTS(Text-To-Speech)と呼ばれているようです。 但し、サーバー負荷や応答速度を考慮したクラウド・コンピューティング方式の音声合成ですので、字数は最大100文字までに制限されています。 現在のところ、ウェブサイト上でJavaScriptを使って利用できる方法は、ブラウザがGoogle Chromeの場合に限定されます。 また、URLにパラメータをつけてブラウザで手動でアクセスする場合にはIE以外の殆どのブラウザで体験することができます。 このページでGoogleTTSの効果を体験されたい方は、是非、Google Chromeをインストールして、GoogleTTSを体験してみてください。 JavaScriptですので、ブラウザで『ソースを表示』すれば、コードを読むことができます。使うのはすごく簡単です。 一方でローカルからのGoogleTTSアクセスにはブラウザの制限はありません。 Visual C#で記述したサンプルも公開しています。 是非、お試しください。 【注意事項】 ●Google TTSは正式に公開されているAPIではありませんので、いつか使えなくなる可能性があります。 ●仕様が変わる恐れもあります。事実、Google ChromeではGoogle TTSのブラウザ実装実験が進行中です。 ■■■記載日2011年05月03日■■■21:00頃記載 ■■■修正日2012年02月14日■■■10:35頃記載 |
|
【Google Speech APIデモ】Lesson1 『音声認識APIと音声合成APIのデモ:音声検索』テキスト情報を指定言語の発音で読み上げる『Text-To-Speech(TTS)』と、音声認識『Automated Voice Recognition』で構成したサンプル・プログラムテキストボックス内のマイクマークをクリックしてから、マイク入力します。喋った単語が登録された予約語なら、所定の動作を行い、 予約語にない単語であればGoogle検索を実行するというデモです。JavaScriptで書かれていますのでブラウザの『ソースを表示』で見る事が可能です。 |
|
【μ-iVoice】【JavaScriptだけで実現したプラグイン不要の音声合成エンジン】 |
|
|
JavaScriptだけで記述した音声合成エンジンを自作しました。【プラグイン不要】 現在、Google Chrome, Mozilla Fire Fox, Apple Safariで動作します。 DDS (Direct Digital Synthesizer)方式シンセサイザをベースとするブラウザ側での音声合成です。HTML5で導入されたaudioタグのsrcにBase64形式のData URIを与えて再生させる方式です。サーバー側で全ての波形描画処理を行うGoogle TTSとは考え方が異なりますがご参考まで。 ・Google Text-To-Speechのような字数制限はありません。 ・Text-To-Speech API (テキスト読み上げAPI)ですが、抑揚コントロールが行えます。 ・漢字⇒かな変換辞書を装備。 ・シンセサイザー/簡易歌唱機能を持っています。 ・ローカルに所定書式の音声データを用意すれば組み替えが可能です。誰かの声を物真似することができます。 下に埋め込んだAPIがありますので、体験していただくことができます。JavaScriptなので『ソースを表示』でソース閲覧が可能です。詳細な技術情報は、こちらへどうぞ。 ⇒【μ-iVoice】【最新版 Version0.09Cを体験してみる】 現在、人工咽頭(喉頭がんで声帯を失った人用の代替サイボーグパーツ)や翻訳機能を持った電脳化サイボーグパーツとしてセンサも含めて研究中です。 ■最新版【μ-iVoice】はこのページの最下部にあります。 【初期のデモ】音が出るまでに10~30秒を要します。気長にお待ちください。 ●『なんちゃって初音ミクで短い挨拶』[Ver.0.06] ●『Ieavan Polkka (Standard Drum付)』[Ver.0.06] |
【YouTube】サンプル音 テスト (IEの人向け) |
【Google TTSのサンプルコード】■このデモプログラムだとGoogle Chromeでも404エラーが出てしまう。もう一度アドレスバー内にフォーカスしてエンターキーを押してみて下さい。 『www.ispeech.orgのiSpeech API』はテキスト情報を指定言語の発音で読み上げる『Text-To-Speech(TTS)』と、音声認識『Automated Voice Recognition』で構成されており、インターネット接続可能でAudioの再生・録音の可能なデバイスであればプラットフォームにとらわれずに利用できるように設計されている。 ただ、クロスドメインの制約、ブラウザ毎に使用するオーディオデバイスのプラグインが違うためか、現在のところ簡単に利用できるブラウザはGoogle Chromeに限られるようだ。(⇒ Google翻訳はブラウザによらず利用できるようなので、これは私のコーディング技術の問題です。) まずは、5月5日に発見した海外のページ『Weston Router』で見つけたサンプル・コードを少し変更したものを左に示す。前述したように『?』マークは語尾を少し釣りあげるため、句読点やスペースで間隔を調整している。他の言語が入力された場合にはHello.+World!のように単語間に半角スペースの代わりに『+』[半角プラス]を挿入するようになっている。なお、日本語と英語とスペイン語以外の動作は未確認です。100文字以内の短文の入力が可能だ。 コードはJavaScriptなのでソースを閲覧すれば読むことができる。frameを使って『http://translate.google.com/translate_tts』にパラメータを付けて送信 このサンプルの難点は、IEでは使えないことと、画面手前に勝手にウィンドウが立ち上がってしまうことだ。 |
|
【TTSの仕様と動作】5月3日にGoogle検索で調べたら、以下の事がわかった。URL http://translate.google.com/translate_tts にパラメータを付けて送信すると、ブラウザで指定されたオーディオ・プラグインが立ち上がる仕組みらしい。 パラメータは『?』[半角?マーク]の後に続ける。パラメータ間は『&』[半角&マーク]入れて結合する。 【言語の指定】 tl=言語コード 日本語:ja 英語:en スペイン語:es イタリア語:it フランス語:fr ドイツ語:de ロシア語:ru 中国語:zh-CN 韓国語:ko オランダ語:nl ギリシャ語:el ポルトガル語:pt ポーランド語:pl (言語が実際にサポートされているのかどうかは未チェックなので入力してみて下さい。) 【テキスト指定】q=テキスト (日本語以外では単語間に半角+を入れる) ということらしい。 Google Chrome、IE、Safari、Fire Foxのアドレスバーに下記URLをコピーアンドペーストしてエンターキーを押してみて下さい。 translate_tts.mp3というmp3形式のデータファイルが返送されてくるようだ。 大抵のブラウザで音声合成出力が再生されるはずだ。 【日本語】 http://translate.google.com/translate_tts?tl=ja&q=こんにちは?あなたは、どんな趣味をお持ちですか? 【英 語】 http://translate.google.com/translate_tts?tl=en&q=Hello.+Everybody.+How+are+you?+I+am+fine. この場合は、Googleのサーバーを直接呼んで利用しているのでクロスドメインの制約の問題もなく動作するようだ。 |
|
![]() |
【divタグでiframeを使い隠蔽する方法】【Google Chrome限定】5月3日にコーディングしてみた方法を以下に示す。動作としてはボタンを押したときに、divタグ内にiframeを動的に作成し、ソースを『送信先』にしているだけの簡単なものだ。 ブラウザのオプション設定でmp3形式ファイルに対して再生する設定であれば、音声合成が出力されるはずだ。(Google Chrome限定になってしまうが。) プログラムは、対応するボタンがクリックされた時に言語コードとテキストボックスの値を引数にして、関数PlayVoiceを呼んでいる。 透過pngファイルでわざと見えるようにしているが、背後でmp3プレーヤーが起動して再生する。 タイマーを使って10秒後に消えるようにしています。タイマーの単位はミリ秒になっています。 ちなみに改行が必要なときはテキスト中に%0D%0Aと書きます。 |
【HTML】<div name="VoiceTest" id="VoiceTest" style="position:relative; top:0px; left:0px; z-index:0" width="207px" height="250px"><div name="Voice" id="Voice" style="position:absolute; top:0px; left:0px; z-index:0" width="209px" height="206px"></div> <div name="Cover" id="Cover" style="position:absolute; top:0px; left:0px; z-index:1" width="209px" height="206px"> <img border="0" src="b/face1.png" width="215px"/><br> <input type="text" name="MsgBoxJa" id="MsgBoxJa" value="こんにちは?あなたも、Google翻訳の音声合成機能を、使ってみませんか?" inputlenght=250 style="ime-mode:active; width:185px;" size="20" /> <input type="button" name="Speak1" id="Speak1" value="日本語" width="50px" onclick="PlayVoice('ja', MsgBoxJa.value);" /><br> <input type="text" name="MsgBoxEn" id="MsgBoxEn" value="Hello.+Let's+enjoy+Google+Translate." inputlenght=250 style="ime-mode:active; width:185px;" size="20" /> <input type="button" name="Speak2" id="Speak2" value="英語" width="50px" onclick="PlayVoice('en', MsgBoxEn.value);" /><br> <input type="text" name="MsgBoxEs" id="MsgBoxEs" value="Hola.+Vamos+a+disfrutar+del+programa+Google+Translate." inputlenght=250 style="ime-mode:active; width:185px;" size="20" /> <input type="button" name="Speak3" id="Speak3" value="スペイン語" width="50px" onclick="PlayVoice('es', MsgBoxEs.value);" /><br> </div> </div> 【JavaScript】
//【Google翻訳の音声合成のテスト・プログラム】 written by ☆Tomoaki Ueda☆
var TimerVoice; //【IEだとQuickTimeが起動してしまい、隠蔽できないのでせめて時間管理で消去する。】
function PlayVoice(language, msg) {
var base=document.getElementById("Voice");
base.innerHTML="【Google翻訳の音声合成を用いたアナウンス】";
var obj=document.createElement("iframe");
obj.setAttribute("border", "0");
obj.setAttribute("frameborder", "0");
obj.style.width = 200;
obj.style.height = 30;
obj.src="http://translate.google.com/translate_tts?tl=" + language + "&q=" + msg;
base.appendChild(obj);
TimerVoice = setTimeout('RemoveVoice()', 10000); //【10秒後に消去】
}
function RemoveVoice() { clearTimeout(TimerVoice); document.getElementById("Voice").innerHTML = ""; }
|
|
【ここまでのまとめ】取り敢えず、サーバー上にプログラムを置いてアクセスする限り、直接Googleサイトにアクセスできるので、『音声合成データの取得 ⇒ 記録 ⇒ ウェブページへの埋め込み ⇒ 自動再生』を行えばよいわけだが、2~3秒タイムロスを生じてしまう。やはりクライアントマシンからクロスドメインで直接自動再生できるにこしたことはない。 なので、もう少し顔を突っ込んで試行錯誤を続けてみることにします。 |
|
【HTML5のAudioタグを動的に生成する方法】HTML5にはAudioタグが存在している。Google ChromeとFire Foxは対応しているようだ。そこで、ちょっといじり始めたら、これが一番簡単だと言う事に気が付いた。 しかし、凄く記述は簡単だったのだが、大変残念なことにローカルでは使えるが、クロスドメインでは使えないことが判明した。 【Audioタグ】[HTML5] <audio id="speechOutputAudio" src="http://translate.google.com/translate_tts?tl=ja&q=こんにちは?+こんなに簡単に使えるとは。HTML5は素晴らしい。" controls autoplay="true" style="width:300px" ></audio> たったこれだけ書けば、Googleにテキストデータを送って音声データファイルを受取り、再生してくれる。 autoplay属性を使えば、ページ表示直後にアナウンスをさせることができます。 そこで、JavaScriptではdivタグ内に動的にこのタグを書き込むことにした。autoplayを指定しておけば読込終了直後に再生してくれる。以下に例を示す。divタグのstyle属性のvisibilityを'show'にすればオーディオ・プレーヤーの実体が見えるが、'hidden'にすれば簡単に隠蔽する事が可能だ。 もうひとつ、イベントハンドラが使えるので終了検出が簡単だ。3行追加すれば対応できる。 //【HTML5版】 written by ☆Tomoaki Ueda☆ var audio; //【イベントハンドラ用】【再生終了時に呼び出されるイベントハンドラを使う場合のオブジェクト】 function SendGoogle(language, message) { var source="<audio id=\"speechOutputAudio\" src=\"http://translate.google.com/translate_tts?tl=" + language + "&q=" + message +"\" controls autobuffer autoplay=\"true\" style=\"width:300px\" ></audio>"; document.getElementById("speechOutput").innerHTML = source; audio = document.getElementById("speechOutput"); //【イベントハンドラ用】 audio.addEventListener("ended", VoiceEnded, true); //【イベントハンドラ用】【再生終了時に呼び出されるイベントハンドラを登録する】 } function VoiceEnded() { alert("再生が終了しました"); } //【'ended'イベント発生時に実行される関数】 |
|
【テスト】 |
【オーディオプレイヤーを隠蔽する】そこで、divタグにiframeで埋め込み、隠蔽はdivタグのstyle属性にvisibility:hidden;を指定して不可視にすることにした。【HTML】下記に示すように、プログラム起動の為の『ボタン』と埋め込みの為のdivタグを用意した。何故か、hiddenを使う為には、divタグを2重にして、z-indexを使う必要があった。 <input type="button" name="SeechAPI1" id="SeechAPI1" value="【メッセージ】" onclick="hVoice1();" /><br> <div id="VoiceBase" style="position:relative; top:0px; left:0px; z-index:0;"> <div id="speechOutput2" style="position:absolute; top:0px; left:1024px; z-index:2; visibility:hidden;"></div> </div> 【JavaScript】ボタンクリックで関数hVoice1()が呼ばれ、下記のように順にタイマーで呼び出されていく。event[onclick] ⇒ hVoice1() ⇒ hVoice2() ⇒ hVoice3() ⇒ hVoice4() ⇒ RemoveVoice2()
//【JavaScript版】 written by ☆Tomoaki Ueda☆
var TimerVoice2; //【IEだとQuickTimeが起動してしまい、隠蔽できないのでせめて時間管理で消去する。】
function hVoice1() {
var msg = "Google翻訳の音声合成の機能を使えば、ホームページで音声ガイダンスを行うことができます。";
PlayVoice2('ja', msg, 12000, 'hVoice2();');
}
function hVoice2() {
var msg = "You+can+add+the+voice+guidance+into+your+homepage+by+using+Text+To+Speech+A+P+I+of+Google+Translate.";
PlayVoice2('en', msg, 12000, 'hVoice3();');
}
function hVoice3() {
var msg = "このように、使用する言語を切り替えながら、説明を行うことができるのです。";
PlayVoice2('ja', msg, 10000, 'hVoice4();');
}
function hVoice4() {
var msg = "Thank+you+very+much+for+your+cooperation.";
PlayVoice2('en', msg, 7000, 'RemoveVoice2();');
}
function PlayVoice2(language, message, timer, callback) {
var ua = navigator.userAgent; //【ブラウザのユーザーエージェントを取得】
if (ua.match(/Chrome\/([\.\d]+)/)) { //【Google Chrome】
clearTimeout(TimerVoice2);
var base=document.getElementById("speechOutput2");
base.innerHTML="【Google翻訳の音声合成を用いたアナウンス】";
var obj=document.createElement("iframe");
obj.setAttribute("border", "0"); obj.setAttribute("frameborder", "0"); obj.style.width = 200; obj.style.height = 30;
obj.src="http://translate.google.com/translate_tts?tl=" + language + "&q=" + message;
base.appendChild(obj);
TimerVoice2 = setTimeout(callback, timer); //【10秒後に消去】
}
}
function RemoveVoice2() { clearTimeout(TimerVoice2); document.getElementById("speechOutput2").innerHTML = ""; }
|
||||||||||||||||||||||||||||||||||||
【いろいろな言語への翻訳】ところで、ここまで書いて気が付いたが、TTSを使えば、英会話を始め、いろいろな言語学習の為のホームページを作る事ができますね! しかし、文章から性別までわかるとは思えないので訳語が正しいのかどうかわかりませんが。
|
|||||||||||||||||||||||||||||||||||||
【訳語の精確さをチェックする方法について】さて、Google翻訳によって機械翻訳された言語の意味が相手に通じるかどうかがとても気になるところです。英語がわかる方なら一応チェックする方法がありますのでここに書いておきます。 それは、機械翻訳された言葉を相手言語から『英語』に再翻訳することなのです。 英語で読んで元の意味に近ければ翻訳精度は比較的高いと言えるでしょう。 再翻訳された英語の意味が違っていたら、言い方を変えて同じ処理を繰り返します。 日本語から実行するのは精度が悪いので、【英語】⇒【相手国言語】⇒【英語】がお薦めです。 私はこの方法に『フィードバック法』と名付けています。 実際、この方法を使うことでヘブライ語(イスラエル)、ポルトガル語やスペイン語でチャットすることができています。 |
|||||||||||||||||||||||||||||||||||||

