Step3:
vdsで文字列を読み上げる

さて、いよいよ音声を実際に出力する部分です。ここではボタンが押されたタイミングで、文字列が読み上げられるようにするので、先ほどの、文字列の取り出し部分と読み上げ部分を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を使った音声読み上げの基本的な利用方法を一通り見てきたことになります。以下に、ここで紹介したサンプルの全ソースを載せておきます。 

<html>
<head>
<script type="text/javascript" src="http://api.vdsapi.ne.jp/cgi-bin/vds.cgi?key=[認証キー]">
</script>
<script type="text/javascript">
// <![CDATA[
   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>

<body>
<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オブジェクトで行います。音量の変更や一時停止、停止、等を行うことができます。