音声読み上げができるSpeak.jsを使ってみた

JavaScriptだけで音声の読み上げができるということで試してみました。
ソースコードはこちら
https://github.com/mattytemple/speak-js

Speak.js使い方

使い方は非常に簡単です。
speakClient.jsとspeakWorker.js、speakGenerator.jsを配置し、
HTMLの中でspeakClient.jsを読み込むだけで事前準備はOK。

speak()というJavaScriptの関数があるので、これを使って読み上げを実現します。

speak()の引数としては、読み上げる対象のテキスト情報を第1引数に、
オプションを第2引数に指定します。

オプションとしては以下のような値が設定可能です。

  • speed 読み上げ速度
  • pitch 読み上げ音声の音程
  • amplitude 読み上げ音声の音量
  • wordgap 単語と単語間の読み上げの間指定

書き方はこのような形です。

speak("Nice to meet you. I am ike-dai.", {speed:150,wordgap: 10});

この時、HTML内に「<div id="audio">」のdivタグを記載する必要があります。
Speak.jsが文字列を音声ファイルに変換した後、このdivタブ内にHTML5の<audio>タグを埋め込み音声再生を実行します。

感想

発音はぎこちない感じです。
単語単位ではある程度形になりますが、長文になるとかなりぎこちないです。
しかし、速度や発音間隔など柔軟に変更できるところは良さげです。

サンプルアプリをGoogleドライブ上にデプロイ

Googleドライブに先日追加されたWebホスティング機能を使ってspeak.jsを利用したWebページを公開してみました。
Googleドライブ上に1つディレクトリを作成し、その中にspeak.jsを利用するhtmlファイル(index.html)とspeakClient.js,speakWorker.js,speakGenerator.jsをアップロードします。
このディレクトリを一般公開設定し、誰でも見れるようにします。

一般公開することで、htmlのファイルの編集ページで「プレビュー」ボタンを押すことができるようになります。

このプレビューを押すと、ホスティングされているWebページを見ることができます。
公開URLはプレビューボタンを押した先のページのURLです。
AmazonS3のようなアクセス制限とかの機能はないですが、簡単に無料で公開できます。

テキストエリアに入力した内容を読み上げてくれます。

https://googledrive.com/host/0B2KNKkBsnhZFX0xRaFR6S2w5RG8/index.html

興味があればお試し下さい。