Web Speech API(TTS部分のみ)を試してみた

TTS(Text To Speech)部分だけですが、Web Speech APIを試してみました。

Web Speech APIとは

Web Speech APIは、W3CのWeb Speech API Specificationで策定されている仕様です。音声認識とテキストスピーチの機能があります。

用途としては次のようなものが挙げられます。

  • 声による検索
  • 声による入力
  • 読み上げ

対応ブラウザ

Can I use | Web Speech APIを見るとChromeなどWebKit系のブラウザで使えます。

自分のChrome最新版とiOS 8.1.2で動作することを確認しました。

Web Speech APIの使い方

Web Speech APIのTTS部分だけだと簡単に次のようなコードでできてしまいます。


var msg = new SpeechSynthesisUtterance('Hello, World');
window.speechSynthesis.speak(msg);

HTMLにあるテキスト情報を取得して読み上げする場合は、次のような感じになります。


<p id="text">ここのテキストを取得します。</p>

var msg = new SpeechSynthesisUtterance();
var text = document.getElementById('text').textContent; //テキストの取得
msg.text = text; //取得したテキストをセット
window.speechSynthesis.speak(msg);

TTSなので、入力した文字を読み上げる場合は次のような感じになります。


<textarea id="text></textarea>


var msg = new SpeechSynthesisUtterance();
var text = document.getElementById('text').value; //テキストの取得
msg.text = text; //取得したテキストをセット
window.speechSynthesis.speak(msg);

他にも言語ボリュームといった設定もできます。


var msg = new SpeechSynthesisUtterance();
var text = document.getElementById('text').value;
msg.volume = 1; //ボリューム
msg.rate = 1;  //レート
msg.pitch = 1; //ピッチ
msg.text = text;
msg.lang = 'ja-JP'; //言語
window.speechSynthesis.speak(msg);

デモ

下記に、入力した文字を読み上げるデモを用意しました。Chromeで試してみてください。

See the Pen Speech Synthesis Demo by Minoru Hayakawa (@e-river) on CodePen.

今度は、TTS以外の機能を試したいと思います。

所感

だいたいこういうのは、日本語の音声エンジンはちょっと残念な感じになることが多いのですが、そこまで色んな単語を試したわけではありませんが、Chromeの日本語の音声エンジンの質は良いと思いました。音声エンジンを開発くださっている方々の努力の賜物だと思います。

以前、vdsを使って、音声読み上げのアプリを作ったことがありましたが、今では、そういったシステムを使わずにブラウザだけでTTSが出来てしまうのかと思うとすごい時代になったなぁと感じます。

そして、Web Speech APIを使うことによって、JavaScriptだけで1.2.9 ライブの音声しか含まないコンテンツの代替コンテンツの達成基準を満たすことも可能となるわけです。レベルAAAの達成基準のものもそこまでコストをかけずに対応可能になっていくわけです。Web Speech APIはアクセシビリティにも大きく貢献しますので、早くより多くのブラウザで実装されることを願っています。

参考