SpeechSynthesisUtterance

SpeechSynthesisUtterance()

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

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

SpeechSynthesisUtterance.lang

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

SpeechSynthesisUtterance.pitch

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

SpeechSynthesisUtterance.rate

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

SpeechSynthesisUtterance.text

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

SpeechSynthesisUtterance.voice

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

SpeechSynthesisUtterance.volume

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

これらのイベントは、 addEventListener() を使用するか、イベントリスナーを onイベント名 プロパティに代入することで待ち受けしてください。

boundary

音声の発話が単語または文の境界に達すると発行されます。 onboundary プロパティからも利用できます。

end

発話が完了したときに発行されます。 onend プロパティからも利用できます。

error

発話が正常に行われずにエラーが発生したときに発行されます。 onerror プロパティからも利用できます。

mark

音声発話が SSML の名前付き "mark" タグに到達したときに発行されます。 onmark プロパティからも利用できます。

pause

発話の途中で一時停止した場合に発行されます。 onpause プロパティからも利用できます。

resume

一時停止していた発話が再開されたときに発行されます。 onresume プロパティからも利用できます。

start

発話が始まったときに発行されます。 onstart プロパティからも利用できます。

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

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

const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector("input");
const voiceSelect = document.querySelector("select");

let voices;

function loadVoices() {
  voices = synth.getVoices();
  for (let i = 0; i < voices.length; i++) {
    const option = document.createElement("option");
    option.textContent = `${voices[i].name} (${voices[i].lang})`;
    option.value = i;
    voiceSelect.appendChild(option);
  }
}

// Google Chrome では、音声はページの読み込みでは準備できません
if ("onvoiceschanged" in synth) {
  synth.onvoiceschanged = loadVoices;
} else {
  loadVoices();
}

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

  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  utterThis.voice = voices[voiceSelect.value];
  synth.speak(utterThis);
  inputTxt.blur();
};

• ウェブ音声 API