Step1:
vdsの準備
vdsを利用した開発を行うためには、まず認証キーを取得する必要があります。認証キーはvdsフリーにユーザ登録(無料)すれば取得できます。
認証キーを入手したら、以下のようなコードをWebページのhead要素の中に記述します。
<script type="text/javascript"
src="http://api.vdsapi.ne.jp/cgi-bin/vds.cgi?key=[認証キー]">
</script>
無償版を使う場合は、Webから簡単な操作で取得できます。有償版では、契約書類でお知らせします。
内容を説明していくことにしましょう。
最初のscript要素では、VDSのAPIサーバからJavaScriptのプログラムを入手している部分です。認証キーは間違いがないように、コピーして確実に入力してください。type属性やcharset属性もこの通りに入力します。
前述のとおり、VDSは音声の再生にFlashを利用しています。このFlashのオブジェクトは画面表示を一切持ちませんが、ページ内のどこかに埋め込まれている必要があります。body要素の先頭に以下のように埋め込み場所を用意しておきます。
<body>
<div id="vdsp"></div>
このように、div要素で指定します。この時、id要素には任意の値を持たせることが可能です。
<script type="text/javascript">
<!--
var vdsp;
var vds;
window.onload=function(){
try{
vdsp = new VoiceDeliveryPlayer("vdsp");
vds = new VoiceDelivery(vdsp, "vds");
} catch(e) {
alert("Cannot Create Object.");
}
}
-->
</script>
VDSを使用するためには、2つのオブジェクトVoiceDeliveryPlayerオブジェクトとVoiceDeliveryオブジェクトが必要となります。ここでは、その準備を行います。このコードは、head要素の中に書いておくのが適当です。
2つのオブジェクトは、ページの読み込みが完了した後に生成する必要があります。そこで、6行目のようにwindow.onloadの無名関数にオブジェクトの生成部分を記述します。
VoiceDeliveryPlayerオブジェクトは、音声のボリュームやパンを制御する役割を持っています。引数に先ほど準備したFlashオブジェクトの埋め込み場所のid属性”vdsPlayer”を渡すことで、オブジェクトの生成と同時に、Flashオブジェクトが埋め込まれます。(8行目)
VoiceDeliveryオブジェクトは、音声の生成を担当するオブジェクトです。引数にVoiceDeliveryPlayerオブジェクトとVoiceDeliveryオブジェクトの変数名を渡します。(9行目)
上のリストのように、オブジェクトの生成部分にtry-catch文を使っておくと、万が一、オブジェクトの生成に失敗した場合の処理をcatch節に記述することが出来ます。
これで、準備は完了です。Step 2に進みましょう。