javascript

vds - voice delivery systemというWeb合成音声配信システムがあることを聞きつけ早速サンプルを作ってみました。

vdsでは有償版と無償版が提供されていて、無償版では

• 1ヶ月に音声合成できる文字数：5万文字
• 音声エンジン：男性音、女性音

という条件で利用できます。
今回もhello worldを喋らせるだけではつまらないので、
一行で笑せたらシリーズを喋らせてみました。

今回もTween.jsを利用しました。

一行で笑わせたらを喋ってもらうサンプル
ソースはこちら

var vdsp;
var vds;
var sp = "<?php echo $line[$rand] ?>";
window.onload=function(){
	try{
		vdsp = new VoiceDeliveryPlayer("vdsp");
		vds = new VoiceDelivery(vdsp, "vds");
		vds.setRate(0);
		vds.setCast("TakashiJPm");
	}catch(e) {
		alert("Cannot Create Object");
	}
		ttween();
}
function ttween(){
	var ele = document.getElementById("tout");
	ele.style.cursor = "hand";
	ele.style.cursor = "pointer";
	ele.onclick = function(){
		window.location.reload();
	};
	ele.innerHTML = sp;
	var cTween = new ColorTween(ele.style,
								'color',
								Tween.regularEaseInOut,
								'222222',
								'82ae46',
								3);
	cTween.onMotionFinished = function(){
		this.onMotionFinished = vds.speak(sp);
	};
	cTween.start();
}

今回はhtmlをphpで出力して、その度に読み上げる単語を変えています。
ちょっと表示と読み上げのタイミングがあってないですが、ここまでで挫折。。。

使えるAPIの関数はこちら
有償版になると、音声読み上げ完了を受け取れるコールバック関数が使えるようです。

※音声読み上げは、本来サイトのアクセシビリティを高めるために利用します。

前エントリーに引き続きjavascriptのみでflickr apiを利用して画像検索を作ってみました。
　
前エントリーで紹介したGoogle AJAX Feed APIを利用してgoogle経由でflickrのデータを引っ張って来ようと思っていたのですが、
flickrでは元々json形式でのAPIを提供していたので素直にそちらを利用させてもらいました。
　
flickr　APIのjsonフォーマットでは、画像パスの生成は取得したデータの組み合わせで作らなければならないので注意が必要です。
javascriptでのデータの取得はこちらを参考にしました。（そのまんま流用しましたが＾＾；）
　

データの出力には前エントリー同様にTween.jsと今回新たにYUI libraryを利用しました。
YUI libraryとは米のYahooが提供しているjavascriptライブラリーで名前の通りUIに特化していて、様々な場面を想定したライブラリーを提供してくれています。
今回は表示した画像のドラッグアンドドロップがしたかったので、YUI library　: Drag & Dropを利用しました。

　
flickr api　json と Tween.js,YUI library で画像検索
ソースはこちら

function photo_search ( param ) {
	param.api_key  = 'ほげ';
	param.method   = 'flickr.photos.search';
	param.per_page = 30;
	param.sort     = 'date-posted-desc';
	param.format   = 'json';
	param.jsoncallback = 'jsonFlickrApi';

	// APIリクエストURLの生成(GETメソッド)
	var url = 'http://www.flickr.com/services/rest/?'+
	obj2query( param );

	// script 要素の発行
	var script  = document.createElement( 'script' );
	script.type = 'text/javascript';
	script.src  = url;
	document.body.appendChild( script );
};

// 現在の表示内容をクリアする
function remove_children ( id ) {
	var div = document.getElementById( id );
	while ( div.firstChild ) {
		div.removeChild( div.lastChild );
	}
};

// オブジェクトからクエリー文字列を生成する関数
function obj2query ( obj ) {
	var list = [];
	for( var key in obj ) {
		var k = encodeURIComponent(key);
		var v = encodeURIComponent(obj[key]);
		list[list.length] = k+'='+v;
	}
	var query = list.join( '&' );
	return query;
}

// Flickr検索終了後のコールバック関数
function jsonFlickrApi ( data ) {
	// データが取得できているかチェック
	if ( ! data ) return;
	if ( ! data.photos ) return;
	var list = data.photos.photo;
	if ( ! list ) return;
	if ( ! list.length ) return;

	// 現在の表示内容をクリアする
	remove_children( 'photos_here' );

	// 各画像を表示する
	// 親divの設定
	var divm = document.getElementById('photos_here');
	divm.style.position = 'relative';
	var img_size = 75;
	var yseq1 =  new Sequence();
	var s = new browser_w(img_size);
	var divls = new Array();
	var divls_s = new Array();
	var img = new Array();
	var img_s = new Array();
	var dd = new Array();
	for( var i = 0; i < list.length; i++ ) {
		var photo = list[i];
		// 各子divの生成
		divls[i] = document.createElement('div');
		divls[i].id = 'f'+(i+1);
		divls_s[i] = divls[i].style;
		divls_s[i].position = 'absolute';
		divls_s[i].top = Math.floor(Math.random()*s.height);
		divls_s[i].left = Math.floor(Math.random()*s.width);
		divls_s[i].width = img_size+'px';
		divls_s[i].height = img_size+'px';
		dd[i] = new YAHOO.util.DD(divls[i].id);

		// img 要素の生成
		img[i] = document.createElement('img');
		img[i].src = 'http://static.flickr.com/'+photo.server+
				'/'+photo.id+'_'+photo.secret+'_s.jpg';
		img_s[i] = img[i].style;
		img_s[i].border = '0';
		img_s[i].cursor = 'pointer';
		divls[i].appendChild(img[i]);
		divm.appendChild(divls[i]);

		var tw = new Tween(img_s[i], 'width' , Tween.elasticEaseOut, 0, 100, 1,'%');
		yseq1.addChild(tw);

	}

	yseq1.start();
}

var browser_w = function(margin){
	if (window.innerHeight){
		this.width = (window.innerWidth - margin);
		this.height = (window.innerHeight - margin);
	}else if(document.documentElement &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; document.documentElement.clientHeight){
		this.width = (document.documentElement.clientWidth - margin);
		this.height = (document.documentElement.clientHeight - margin);
	}else if(document.body.clientHeight){
		this.width = (document.body.clientWidth - margin);
		this.height = (document.body.clientHeight - margin);
	}else{
		this.width = 500;
		this.height = 500
	}
}

画像の要素は全てDOMの操作で生成し、その度にYUIのドラッグアンドドロップ、Tween.jsのアニメーションを設定しています（とても無駄な感じが・・・、アドバイスください ； ；）。

画像の表示位置はランダムにするために、ブラウザの縦横を計算し表示領域が大きくならないようにしています。

入力フィールドには検索を促すようにこちらのスクリプトを利用させていただきました。

さて次は何をつくろうかな。