SpeechSynthesisUtterance

SpeechSynthesisUtterance.SpeechSynthesisUtterance() (en-US)

新しい SpeechSynthesisUtterance オブジェクトのインスタンスを返します。

SpeechSynthesisUtterance は、その親インターフェイスである EventTarget からのプロパティも継承します。

SpeechSynthesisUtterance.lang

utterance (発声) の言語を取得または設定します。

SpeechSynthesisUtterance.pitch (en-US)

utterance が発話される際のピッチ (音の高低) を取得または設定します。

SpeechSynthesisUtterance.rate (en-US)

utterance が発話される際の速度を取得または設定します。

SpeechSynthesisUtterance.text (en-US)

utterance が発話される際の合成されるテキストを取得または設定します。

SpeechSynthesisUtterance.voice (en-US)

utterance の発話に使用される音声を取得または設定します。

SpeechSynthesisUtterance.volume (en-US)

utterance が発話される際の音量を取得または設定します。

SpeechSynthesisUtterance.onboundary (en-US)

発話された utterance が単語または文の境界に達した時に発火します。

SpeechSynthesisUtterance.onend (en-US)

utterance の発話が完了した時に発火します。

SpeechSynthesisUtterance.onerror (en-US)

utterance の正常な発話を妨げるエラーが発生した時に発火します。

SpeechSynthesisUtterance.onmark (en-US)

発話された utterance が SSML (音声合成マークアップ言語) の "mark" タグに達した時に発火します。

SpeechSynthesisUtterance.onpause (en-US)

utterance の発話が途中で一時停止された時に発火します。

SpeechSynthesisUtterance.onresume (en-US)

一時停止された utterance の発話が再開された時に発火します。

SpeechSynthesisUtterance.onstart (en-US)

utterance の発話が開始された時に発火します。

私たちの基本的な 音声合成のデモ では、最初に window.speechSynthesis を使用して SpeechSynthesis コントローラーへの参照を取得します。必要な変数の定義後、 SpeechSynthesis.getVoices() (en-US) を使用して利用可能な音声のリストを取得し、それらの選択メニューを構成します。ユーザーは、そこから使用したい音声を選べます。

inputForm.onsubmit ハンドラー内部では、preventDefault() でフォーム送信を停止し、テキスト <input> に入力されたテキストを含む新しい SpeechSynthesisUtterance インスタンスを作成します。その発声にユーザーが <select> 要素で選択した音声を設定し、SpeechSynthesis.speak() (en-US) メソッドを通して発声の発話を開始します。

var synth = window.speechSynthesis;

var inputForm = document.querySelector('form');
var inputTxt = document.querySelector('input');
var voiceSelect = document.querySelector('select');

var voices = synth.getVoices();

for(i = 0; i < voices.length ; i++) {
  var option = document.createElement('option');
  option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
  option.setAttribute('data-lang', voices[i].lang);
  option.setAttribute('data-name', voices[i].name);
  voiceSelect.appendChild(option);
}

inputForm.onsubmit = function(event) {
  event.preventDefault();

  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
  for(i = 0; i < voices.length ; i++) {
    if(voices[i].name === selectedOption) {
      utterThis.voice = voices[i];
    }
  }
  synth.speak(utterThis);
  inputTxt.blur();
}

• Web Speech API