音声読み上げができる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
興味があればお試し下さい。