ブログタイトルを読み上げる機能をつけてみた「voice delivery system」

Mashupアワード2008最優秀賞のケンタローさんから教えてもらった、音声読み上げシステムをブログに組み込んでみました。セミナー時間の休憩中にちょっといじるだけで簡単に出来てしまいました。

↑スピーカーアイコンを押すと、タイトルが音声で流れる。

使ったのはこちら。株式会社ナレッジクリエーションのサービス。
■Web音声配信システム：vds

無償版では1ヶ月あたり50,000語までの制限つきですが、ちょっと面白いかも。

組み込むのは実に簡単。head部にJavaスクリプトの準備、body部で読み上げたい部分をdivタグでid指定する。ただそれだけ。サイトの方に組込方が丁寧に解説されているので、誰でも組み込めると思いますよ。

WordPressに組み込む場合の作業ログを紹介しておきます。

１．vdsにユーザ登録

こちらからユーザ登録して、認証コードを取得します。
■vdsフリー（無償）利用登録

登録したメールアドレスに認証コードが届きます。

２．head.phpにスクリプト挿入

お使いのテーマのhead.phpにスクリプトを挿入します。
先頭の「key=XXXXXXXX」のところは、上記１で取得した認証コードにしてください。

<script type="text/javascript" src="http://api.vdsapi.ne.jp/cgi-bin/vds.cgi?key=XXXXXXXX">
</script>
<script type="text/javascript">
// <![CDATA[
   var vdsp;
   var vds;
   window.onload=function(){
     try{
       vdsp = new VoiceDeliveryPlayer("vdsp");
       vds = new VoiceDelivery(vdsp, "vds");
       vds.setCast("TakashiJPm");
     } catch(e) {
       alert("Cannot Create Object");
     }
   }
   function readOut(){
     buf = (document.getElementById("readOutHere")).innerHTML;
     vds.speak(buf);
   }
//]]>
</script>

↑vds.setCast()に"KeikoJPf"を指定すると、女性の声になります。

３．single.phpにdivタグとボタンを挿入

お使いのテーマのsingle.phpに読み上げ範囲を示すdivタグと、読み上げを指示するボタンを挿入します。vds公式サイトの説明ではinputボタンでしたが、私はスピーカーアイコンにしてみました。

まずは、タイトルにreadOutHereのidをつけます。

<div id="readOutHere">
  <?php echo $title; ?>
</div>

次に表示したい箇所にスピーカーアイコンを置きます。

<a href="#" onclick="readOut()" />
  <img src="/image/speaker.png" alt="タイトルを読み上げる" style="border: 0px">
</a>

最後に、body部のどこかにvdsのFlashをロードする場所を作ります。どこでもいいですが、body部最後が良いと思います。

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

４．まとめ

仕組みは、読み上げ文字がvdsサーバに送られて、サーバ側で音声に変換し、vdsのFlashクライアントが読み上げるということです。重そうな音声変換処理はサーバでやってくれるので、パソコン側が多少非力でも問題なさそうです。

こういうのを簡単に組み込むプラグインってのも作ると面白いかな。候補に挙げておこう。

しかし、あれだな。Googleが「じーおーおーじーえるいー」と読まれ、WordPressは「ワードプレス」と読まれる。この違いは何だろう。。。