VDSの基本的な使い方
VDSを使った音声ボタンの設置－"Hello,VDS World"
実際にVDSを使ってWebページに音声読み上げボタンを設置する例を示します。この簡単な例を通して、VDSの使い方をつかんでください。このセクションで一度ステップを把握してしまえば、あとはこの次のセクション「VDS API詳説」が、あなたの作品作りの助けになってくれることでしょう。
このセクションでは、以下のようなページを作ります。
読み上げ機能付きのページ
Step1：準備
VDSを利用した開発を行うためには、まず認証キーを取得する必要があります1。認証キーは、VDSのWebサイト（http://www.vdsapi.ne.jp/）で取得できます。
さて、認証キーを手に入れたら、以下のようなコードをWebページのhead要素の中に記述します。
-
<script type="text/javascript"
-
src="http://api.vdsapi.ne.jp/cgi-bin/vds.cgi?key=[認証ID]"></script>
認証キーの入力とオブジェクトの生成
1 無償版を使う場合は、Webから簡単な操作で取得できます。有償版では、契約書類でお知らせします。
内容を説明していくことにしましょう。
最初のscript要素では、VDSのAPIサーバからJavaScriptのプログラムを入手している部分です。認証キーは間違いがないように、コピーして確実に入力してください。type属性やcharset属性もこの通りに入力します。
前述のとおり、VDSは音声の再生にFlashを利用しています。このFlashのオブジェクトは画面表示を一切持ちませんが、ページ内のどこかに埋め込まれている必要があります。body要素の先頭に以下のように埋め込み場所を用意しておきます。
Flashオブジェクトの埋め込み場所
このように、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>
2つのオブジェクト：VoiceDeliveryPlayerとVoiceDelivery
VDSを使用するためには、2つのオブジェクトVoiceDeliveryPlayerオブジェクトとVoiceDeliveryオブジェクトが必要となります。ここでは、その準備を行います。このコードは、head要素の中に書いておくのが適当です。
2つのオブジェクトは、ページの読み込みが完了した後に生成する必要があります。そこで、6行目のようにwindow.onloadの無名関数にオブジェクトの生成部分を記述します。
VoiceDeliveryPlayerオブジェクトは、音声のボリュームやパンを制御する役割を持っています。引数に先ほど準備したFlashオブジェクトの埋め込み場所のid属性”vdsPlayer”を渡すことで、オブジェクトの生成と同時に、Flashオブジェクトが埋め込まれます。（8行目）
VoiceDeliveryオブジェクトは、音声の生成を担当するオブジェクトです。引数にVoiceDeliveryPlayerオブジェクトとVoiceDeliveryオブジェクトの変数名を渡します。（9行目）
上のリストのように、オブジェクトの生成部分にtry-catch文を使っておくと、万が一、オブジェクトの生成に失敗した場合の処理をcatch節に記述することが出来ます。
これで、準備は完了です。Step 2に進みましょう。
Step2：読み上げ範囲の指定と文字列の取り出し
ページ中の要素をJavaScriptから取り出すには、div要素やspan要素で文字列を囲んで、適当なid属性をつけておくと便利です。
-
<div id="readOutHere">
-
こんにちは、世界
-
</div>
上の例のように指定された範囲は、以下のような方法で取り出すことができます。
-
var buf = (document.getElementById("readOutHere")).innerHTML;
id属性で指定された要素は、getElementByIdで取り出します。 引数には先ほどdiv要素で指定したid属性”readOutHere”を渡します。さらに、ここでは要素の中に含まれる文字列を取得したいので、プロパティinnerHTMLを参照して、変数bufに代入しています。
Step3：文字列を読み上げる
さて、いよいよ音声を実際に出力する部分です。ここではボタンが押されたタイミングで、文字列が読み上げられるようにするので、先ほどの、文字列の取り出し部分と読み上げ部分を1つの関数にまとめて準備することにします。
-
function readOut(){
-
var buf = (document.getElementById("readOutHere")).innerHTML;
-
vds.speak(buf);
-
}
文字列を取り出して、読み上げる関数
このコードは、先ほどオブジェクトを生成したscript要素の中に記述します。2行目は、Step2でとりあげた文字列の取り出し部分です。3行目が読み上げを行っている部分です。VoiceDeliveryオブジェクトのspeakメソッドを呼び出します。このとき、読み上げさせたい文字列を引数として渡します。
最後に、読み上げボタンを文字列の上に設置して、それがクリックされたら関数readOutを呼ぶようにします。
-
<input type="button" value="読み上げ" onclick="readOut()" />
読み上げボタンの設置
以上で、VDSを使った音声読み上げの基本的な利用方法を一通り見てきたことになります。以下に、ここで紹介したサンプルの全ソースを載せておきます。
-
<script type="text/javascript" src="http://api.vdsapi.ne.jp/cgi-bin/vds.cgi?key=[認証キー]">
-
</script>
-
<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");
-
}
-
}
-
function readOut(){
-
buf = (document.getElementById("readOutHere")).innerHTML;
-
vds.speak(buf);
-
}
-
-->
-
</script>
-
</head>
-
-
<div id="vdsp"></div>
-
-
<input type="button" value="読み上げ" onclick="readOut()" />
-
<div id="readOutHere">
-
こんにちは、世界
-
</div>
-
-
</body>
-
</html>
読み上げボタンを使った読み上げ機能付きページの例
まとめ
VDSの基本的な使い方を紹介してきました。ここで紹介した流れは、複雑なアプリケーションの開発においても同様です。全体の流れを下の図に示します。
まず、VoiceDeliveryPlayerオブジェクトを生成します。これは、音声の制御を担当するオブジェクトです。このオブジェクトが生成されると、同時に音声の再生を行うVDSPlayerも挿入されます。
生成されたVoiceDeliveryPlayerオブジェクトを引数に渡し、VoiceDeliveryオブジェクトを生成します。このオブジェクトが、音声の合成を担当します。
ここでは省略しましたが、VoiceDeliveryオブジェクトのメソッドでは、音声の種類や音声の速度など、音声合成の際に使用されるパラメータが設定できます。また、再生する際の音量や左右のパンに関する値もこの時点でVoiceDeliveryPlayerオブジェクトのメソッドで設定可能です。これらのパラメータにはデフォルト値がそれぞれ指定されているので、読み上げようとする文字列以外は設定しなくても動作します。
VoiceDeliveryオブジェクトのspeakメソッドを呼ぶと音声が合成され、再生が始まります。音声の再生が始まった後の制御は、VoiceDeliveryPlayerオブジェクトで行います。音量の変更や一時停止、停止、等を行うことができます。
