Ajaxで今よみがえる(^^;;-->[クロスブラウザ技術 ]DHTMLサンプル集
-- リスト --
【カテゴリー】 ActionScript ( 6 ) AIR ( 4 ) AjaSQL ( 10 ) Ajax ( 675 ) Arax ( 1 ) canvas ( 15 ) CSS ( 24 ) ( 9 ) DLNA ( 1 ) Dojo ( 25 ) DOM ( 51 ) ES4 ( 4 ) Ext JS ( 5 ) 反重力物質 ( 1 ) ffAdd-on ( 1 ) Flash ( 48 ) Flash Remoting ( 11 ) FTP ( 2 ) GAF ( 9 ) Google Maps ( 124 ) Google ガジェット ( 1 ) GPS ( 44 ) HTML ( 11 ) HTTPヘッダサンプル ( 10 ) IME ( 2 ) Internet ( 2 ) iPhone ( 49 ) IPv6 ( 1 ) 漫画 ( 4 ) Java ( 49 ) JavaScript ( 343 ) jKamo ( 8 ) jQchart ( 4 ) jQuery ( 207 ) jquery-ref ( 1 ) jsGadget ( 19 ) jslb_ ( 3 ) jslb_ajax ( 9 ) JSON ( 49 ) JSR223 ( 7 ) kjscmd ( 1 ) KNOPPIX ( 1 ) Linux ( 18 ) Mac ( 9 ) Memo ( 3 ) Microformats ( 2 ) Mini AJAX ( 2 ) MochiKit ( 2 ) mootools ( 9 ) Movable Type ( 58 ) MySQL ( 10 ) NewGameWeb ( 2 ) Nucleus ( 8 ) OpenAJAX ( 3 ) OpenDocument ( 1 ) OS ( 10 ) P2P ( 2 ) Perl ( 8 ) PHP ( 38 ) PostGIS ( 1 ) PostgreSQL ( 4 ) prototype.js ( 28 ) ROBOT ( 1 ) RSSリーダー ( 15 ) Ruby on Rails ( 7 ) SPDY ( 1 ) Spry ( 6 ) SQLite ( 17 ) SQLiteWorker ( 2 ) ssh ( 1 ) SSI ( 2 ) SVG ( 23 ) TRON ( 1 ) Ubiquity ( 7 ) Video ( 1 ) VML ( 1 ) Web Slice ( 1 ) Web Sockets ( 22 ) Webサービス ( 107 ) widget ( 6 ) Wii ( 1 ) Wiki ( 1 ) Win ( 6 ) WSH ( 1 ) X01HT ( 30 ) XML ( 32 ) XOOPS ( 1 ) XQuery ( 2 ) XUL ( 4 ) Yahoo! UI ( 74 ) 日付入力用カレンダー ( 1 ) 『Ajax実践テクニック』 ( 1 ) 『入門 Ajax』 ( 42 ) WinTips ( 2 ) こりゃすごい ( 7 ) チューニング ( 30 ) ダイナミックロード関数 ( 7 ) リファレンス ( 20 ) ライブラリ ( 210 ) レーダー雨量表示 ( 1 ) ハード ( 35 ) ペンギン ( 2 ) ブラウザ ( 108 ) ブログでBBS ( 1 ) アクセスグラフ ( 3 ) イベント ( 2 ) カレンダーによる日付入力スクリプト ( 4 ) クロスブラウザ ( 14 ) クロスブラウザ関数 ( 8 ) スポーツ ( 1 ) スマートフォン ( 8 ) セキュリティ ( 155 ) ソフトイーサ ( 1 ) マッシュアップ ( 23 ) 暗号 ( 4 ) 映画 ( 57 ) 河川の水位グラフ ( 3 ) 回線 ( 2 ) 開発ツール ( 38 ) 牛久大仏 ( 19 ) 携帯 ( 150 ) 言語 ( 19 ) 故障 ( 9 ) 高橋家の謎 ( 3 ) 広告とか ( 1 ) 洪水警報システム ( 2 ) 今日のひと言 ( 10 ) 仕様 ( 113 ) 雑談 ( 354 ) 実装 ( 2 ) 書籍 ( 20 ) 親子ウインドウ有無の確認関数 ( 3 ) 新海誠 ( 3 )
Web Sockets Domo

* サーバー側は、小松氏のこれをbloga.jp:80へ置いてあります。
* クライアント側はWS処理をjQueryプラグイン化してみました。これです。
* ちなみに、このDemoサンプルは、下記5行でローカルでも別ドメインでもどこにでも設置出来ます。
<script src="http://bloga.jp/ws/jq/js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="http://bloga.jp/ws/jq/js/jquery.ws-0.3-noenc-pre.js" type="text/javascript" charset="utf-8"></script> <script src="http://bloga.jp/ws/jq/conn/wschatdemo0.3.js" type="text/javascript"></script> <script>/*サポートしてない時のalertメッセージを抑止*/$.ws.wsSetup({nonosupportmsg:true});</script> <div id="wsdemos"></div>

【info】いつもいろいろなテストなどをページ内のあちこちでやっているので、重かったり、壊れていたりするf^^;ことも多いです。実験用ですので、カオス(混沌)をあえて意図したりもしますので、標準やValidとは無縁だったりしますが、何卒、ご了承ください ( _ _ b

【info】 最近はTwitterでぶつぶつ言ってることが多いです。
>http://twitter.com/toshirot

2009年12月18日

【Webサービス】translate.google.comでText-To-Speechを利用する

Webサービス ブックマークに追加する ブックマーク-- Hatena  / Livedoor track feed


html5-developers-jpに流れていた話題ですが、Google翻訳サービスにテキスト読み上げが最近実装されたので、そのMP3を取ってきてHTML5のaudio要素へ放り込むというのを試したという話です。

試してみるには、Chromeブラウザが必要です。

http://weston.ruter.net/projects/google-tts/#text=Hello%2C+World!
簡単なまとめ
http://d.hatena.ne.jp/kagigotonet/20091216/1260931756
Googleのテキスト読み上げ非公式API発見
by Michael Arrington on 2009年12月15日
http://jp.techcrunch.com/archives/20091214the-unofficial-google-text-to-speech-api/
使い方 0:45 付近
http://www.youtube.com/watch?v=FijOWfO3Frk&feature=player_embedded#

私もちょっとだけ試してみました。

<audio id="speech" src="" controls=""></audio> 
<button id="ply">play</button>

<script>

//メッセージ
var msg ="Koni%20ciwa.%20Toshiro%20Takahashi%20de%20su.";

	//Audio要素
	var audio = document.getElementById('speech');
	//playボタン
	var ply = document.getElementById('ply');

	//playイベント
	ply.addEventListener('click', function(e){
			audio.src = "http://translate.google.com/translate_tts?tl=en&q="+msg;
			audio.load(); 
			audio.play();
	}, false);

	//終了時イベント
	audio.addEventListener('ended', function(e){
			alert("じゃ(^^)/")
	}, false);

</script>
参考:HTML5 audio要素
http://dev.w3.org/html5/spec/Overview.html#audio

#発見だったのは、たとえば、ローマ字通り「Koni chiwa」や「「Koni tiwa」」と書くより「Koni ciwa.」の方が日本語っぽかったことです。

ってことで、日本語ネイティブなローマ字を求めて遊んでいたら、、、

Koni chiwa
Koni tiwa
Koni ciwa  これはイケルかも。

Hajime masite Toshiro Takahashi de su
Ha ji me ma si te Toshiro Takahashi de su
Hajimemasite
Hajime masite
Ha zi me ma si te 東北出身?
Ha ji me ma si te
Ha ji me ma sea te
Ha ji me ma su te
Ha ji-me ma su te
Haji-me ma su te
Haji-me ma sye teeee まぁさいて〜
ma sye tee まぁさいて〜
ma sye koo まぁさいこ〜






AllaboutのJavaScript記事を連載させていただいてます。最近は、jQueryを主に取り上げていますが、多少なりとも参考になれば幸いです。