vdsサービスを自在に実装するには
Step0:vdsで読み上げ機能付きページを作る
実際にvdsを使ってWebページに音声読み上げボタンを設置する例を示します。この簡単な例を通して、vdsの使い方をつかんでください。このセクションで一度ステップを把握してしまえば、あとはvdsのAPI一覧を使って新しい使い方に挑戦できます。
このチュートリアルでは、以下のようなページを作ります。ボタンをクリックすると、テキスト部分を読み上げる最も基本的なvdsの使い方を紹介します。
Step1:vdsの準備
ご契約後に送付されてくる「vds利用通知書／初期パスワード発行通知書」に記載されている認証キーが必要となります。
認証キーを入手したら、以下のようなコードをWebページのbody要素の最後に記述します。
<script type="text/javascript" src="https://api.vdsapi.ne.jp/tools/engine/1.0/auth?key=【認証キー】"> </script> 最初のscript要素では、vdsのAPIサーバからJavaScriptのプログラムを入手している部分です。認証キーは間違いがないように、コピーして確実に入力してください。type属性もこの通りに入力します。
vdsサービス実装の script 要素は head の中ではなく body の最後に記述することをお勧めします。
vdsのAPIサーバへのアクセスは https でも http でも可能ですが、読み上げをする Web ページが https を使っている場合は src 属性の値で http を使わないでください。
前述のとおり、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) {
console.log("Cannot Create Object.");
}
}
</script> vdsを使用するためには、2つのオブジェクトVoiceDeliveryPlayerオブジェクトとVoiceDeliveryオブジェクトが必要となります。ここでは、その準備を行います。このコードはAPIサーバからのJavaScriptの読み込みの後に書いてください。
2つのオブジェクトは、ページの読み込みが完了した後に生成する必要があります。そこで、4行目のようにwindow.onloadの無名関数にオブジェクトの生成部分を記述します。
VoiceDeliveryPlayerオブジェクトは、音声のボリュームやパンを制御する役割を持っています。引数に先ほど準備したFlashオブジェクトの埋め込み場所のid属性”vdsp”を渡すことで、オブジェクトの生成と同時に、Flashオブジェクトが埋め込まれます。（6行目）
VoiceDeliveryオブジェクトは、音声の生成を担当するオブジェクトです。引数にVoiceDeliveryPlayerオブジェクトとVoiceDeliveryオブジェクトの変数名を渡します。
上のリストのように、オブジェクトの生成部分にtry-catch文を使っておくと、万が一、オブジェクトの生成に失敗した場合の処理をcatch節に記述することが出来ます。
これで、準備は完了です。Step 2に進みましょう。
Step2:vdsで読み上げる文字列の抽出
ページ中の要素をJavaScriptから取り出すには、div要素やspan要素で文字列を囲んで、適当なid属性をつけておくと便利です。
<div id="readOutHere">
こんにちは、世界
</div>上の例のように指定された範囲は、以下のような方法で取り出すことができます。
var buf = (document.getElementById("readOutHere")).innerHTML;id属性で指定された要素は、getElementByIdで取り出します。 引数には先ほどdiv要素で指定したid属性”readOutHere”を渡します。さらに、ここでは要素の中に含まれる文字列を取得したいので、プロパティinnerHTMLを参照して、変数bufに代入しています。
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を使った音声読み上げの基本的な利用方法を一通り見てきたことになります。以下に、ここで紹介したサンプルの全ソースを載せておきます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>vds</title>
</head>
<body>
<div id="vdsp"></div>
<input type="button" value="読み上げ" onclick="readOut()" />
<div id="readOutHere">
こんにちは、世界
</div>
<script type="text/javascript" src="https://api.vdsapi.ne.jp/tools/engine/1.0/auth?key=[認証ID]"></script>
<script type="text/javascript">
var vdsp;
var vds;
window.onload=function(){
try{
vdsp = new VoiceDeliveryPlayer("vdsp");
vds = new VoiceDelivery(vdsp, "vds");
} catch(e) {
console.log("Cannot Create Object");
}
}
function readOut(){
buf = (document.getElementById("readOutHere")).innerHTML;
vds.speak(buf);
}
</script>
</body>
</html>
まとめ
vdsの基本的な使い方を紹介してきました。
まず、VoiceDeliveryPlayerオブジェクトを生成します。これは、音声の制御を担当するオブジェクトです。このオブジェクトが生成されると、同時に音声の再生を行うvdsPlayerも挿入されます。
生成されたVoiceDeliveryPlayerオブジェクトを引数に渡し、VoiceDeliveryオブジェクトを生成します。このオブジェクトが、音声の合成を担当します。
ここでは省略しましたが、VoiceDeliveryオブジェクトのメソッドでは、音声の種類や音声の速度など、音声合成の際に使用されるパラメータが設定できます。また、再生する際の音量や左右のパンに関する値もこの時点でVoiceDeliveryPlayerオブジェクトのメソッドで設定可能です。これらのパラメータにはデフォルト値がそれぞれ指定されているので、読み上げようとする文字列以外は設定しなくても動作します。
VoiceDeliveryオブジェクトのspeakメソッドを呼ぶと音声が合成され、再生が始まります。音声の再生が始まった後の制御は、VoiceDeliveryPlayerオブジェクトで行います。音量の変更や一時停止、停止、等を行うことができます。
追記（2015年5月10日）：一部の説明とサンプルソースを更新しました。