ブラウザの音声合成でテキスト読み上げを行う

ブラウザで音声合成を使うためのSpeechSynthesisというWeb APIがある。この機能を使うとテキストの読み上げができる。今のところChromeとFirefox、Safariで対応しているが、ここではChromeで音声合成を試してみる。

音声の読み込み

はじめに音声を読み込む。数種類の言語の音声が用意されており、読み上げる言語によって音声を変えることができる。window.speechSynthesisを参照し、そのメソッドであるgetVoicesを使うと音声の配列を取得できる。Chromeの場合は、onvoiceschangedイベントのタイミングでないと取得できない。

var synth = window.speechSynthesis;
var voices = [];

if ( speechSynthesis.onvoiceschanged !== undefined ) {
  // Chromeではonvoiceschangedというイベントがあり、onvoiceschangedが呼ばれたタイミングでないと音声を取得できない
  speechSynthesis.onvoiceschanged  = function (){
    voices = synth.getVoices();
  };
} else {
 // Firefoxではこれで音声が読み込める
    voices = synth.getVoices();
}

ちなみに、ChromeとFirefoxでは使える音声がずいぶん違う。

Chrome
0: native（language defined in HTML） 1: Google Deutsch 2: Google US English 3: Google UK English Female 4: Google UK English Male 5: Google español 6: Google español de Estados Unidos 7: Google français 8: Google हिन्दी （Hindu） 9: Google Bahasa Indonesia" 10: Google italiano 11: Google 日本語 12: Google 한국의 13: Google Nederlands 14: Google polski 15: Google português do Brasil 16: Google русский （Russian） 17: Google 普通话（中国大陆） 18: Google 粤語（香港） 19: Google 國語（臺灣）

Firefox
0: Microsoft Haruka Desktop - Japanese 1: Microsoft Zira Desktop - English (United States)
※先頭の数字は配列の番号

ただし、音声をgetVoicesで読み込まなくてもテキスト読み上げはできる。その場合は、HTMLで定義された言語を元に音声が選択される。

音声オプションの設定

音声の音程などを変えるにはSpeechSynthesisUtteranceを使う。

  // SpeechSynthesisUtteranceインスタンスの作成
  var utterThis = new SpeechSynthesisUtterance();

  // 音声の指定（ここでは日本語音声を指定）
  utterThis.voice = voices[11];
  // 音量の指定（0-1.0）
  utterThis.volume = 1.0;
  // 速度の指定（0.1-10.0）
  utterThis.rate = 1.0;
  // 音程の指定（0-2.0）
  utterThis.pitch = 1.0;
  // 言語の指定
  utterThis.lang = 'ja-JP';

テキストの読み上げ

SpeechSynthesisUtterance.textに読み上げるテキストを設定し、speechSynthesis.speakで読み上げを行う。

  utterThis.text = '読み上げるテキスト';

  // 読み上げの実行
  synth.speak( utterThis );

実装

テキスト入力欄と音声再生用のボタンを配置し、ボタンを押して入力されたテキストを読み上げるようにする。

• サンプルの表示