Web合成音声配信システム『vds』をやってみた。

音声読み上げ機能をウェブサイト側に実装してしまおうというウェブAPI『vds(voice delivery system)』を試してみた。

このサービスには、有償版と無償版がある。読み上げる文字数によって課金される仕組みで、月間5万文字まで無償版で利用可能。それ以上になる場合は有償。詳細は料金表を参照。今回は、無償版を導入してみた。

無償版にユーザ登録する

無償版 vds を利用するには、ユーザ登録をする必要がある。ユーザ登録フォームから登録する。入力する情報はメールアドレス、パスワード、APIを使用するサイトのURLの3つ。登録するとメールが送られてきて、記載されたURLにアクセスすると認証キーが発行される。

「vdsの簡単な使い方」をやってみた

チュートリアル『vdsの簡単な使い方』に従って、基本的な読み上げの手順をやってみた。

まず、下記のコードでAPIライブラリをロードする。[認証キー]の部分は、登録時に発行された認証キーに書き換える。

<script type="text/javascript"
    src="http://api.vdsapi.ne.jp/cgi-bin/vds.cgi?key=[認証キー]">
</script>

vdsはFlashを使って音声を読み上げる。読み上げFlashをロードするための領域を用意する。

<div id="vdsp"></div>

例えばこんな感じだ。id属性は任意の値でよいらしい。

それから、APIの2つのオブジェクトを生成する。次の例では、vdsp, vds の2つ。このオブジェクトはページのロードが完了した後に実行する必要があるとのこと。

<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>

VoiceDeliveryPlayer("vdsp") の "vdsp" は、読み上げFlashをロードする<div>タグにつけたid属性値のこと。

あとは簡単。vds.speak() に、読み上げたい文字列を渡して実行する。

<script type="text/javascript">
vds.speak('Hello world!');
</script>

このようにすると 'Hello world!' が読み上げられる。

まとめ

以上の手順を実際にやってみたのが、下記。「Hello world!」ボタンをクリックすると、男性の声で読み上げが開始される。

• ※なぜかこのボタンは一部のブラウザでは動作しない(CSSの何かと衝突してる？？)。動作しない場合は、こちらのサンプルを試してみてください。

最終的なソースは以下のような感じ。

<script type="text/javascript" src="http://api.vdsapi.ne.jp/cgi-bin/vds.cgi?key=[認証キー]"></script>
<div id="vdsp"></div>
<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>
<button onclick="vds.speak('Hello world!');">Hello world! (音がでます)</button>

ちなみに、vds はオブジェクト名を変えてみると、どうやら動作しない。グローバル領域に vds の名前で宣言する必要がありそうだ。

声を変えたり、ボリュームを変えたり、読み上げを途中で停止するなど、詳細な機能については、vds API一覧 に詳しい情報が記載されている。

関連する過去の記事：

• 近くの市営図書館に行ってみた。
• HTMLは人類史上最もユニバーサルな情報媒体。な、はず。
• Firefox用の音声読み上げアドオン「FireVox」