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に進みましょう。

次へすすむ(Step 2)