SpeechSynthesis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2018年9月.

SpeechSynthesis はウェブ音声 API のインターフェイスで、音声発声サービスのための制御インターフェイスです。これは、端末で利用可能な合成音声についての情報を取得するために使用されます。読み上げの開始および一時停止、他のコマンドで制御します。

インスタンスプロパティ

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

SpeechSynthesis.paused 読取専用: 論理値で、SpeechSynthesis オブジェクトが一時停止状態の場合に true を返します。
SpeechSynthesis.pending 読取専用: 論理値で、発声 (utterance) キューにまだ発声されていないものがある場合に true を返します。
SpeechSynthesis.speaking 読取専用: 論理値で、SpeechSynthesis が一時停止状態であっても、発声が現在発話処理中の場合に true を返します。

メソッド

SpeechSynthesis には、その親インターフェイスである EventTarget から継承したメソッドもあります。

SpeechSynthesis.cancel(): すべての発声を発声キューから削除します。
SpeechSynthesis.getVoices(): 現在の端末上のすべての利用可能な音声を表す、SpeechSynthesisVoice オブジェクトのリストを返します。
SpeechSynthesis.pause(): SpeechSynthesis オブジェクトを一時停止状態にします。
SpeechSynthesis.resume(): SpeechSynthesis オブジェクトを一時停止でない状態にします。つまり、一時停止状態であった場合に再開します。
SpeechSynthesis.speak(): utterance を発声キューに追加します。これは、それ以前にキューに追加された他の発声が発話された後に発話されます。

イベントハンドラー

このイベントを待ち受けするには、addEventListener() を使用するか、このインターフェイスの oneventname プロパティにイベントリスナーを代入するかします。

voiceschanged: SpeechSynthesis.getVoices() メソッドにより返される SpeechSynthesisVoice オブジェクトのリストが変更された時に発生します。 onvoiceschanged プロパティからも利用できます。

例

まず、例を示します。

let utterance = new SpeechSynthesisUtterance("Hello world!");
speechSynthesis.speak(utterance);

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

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

const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector(".txt");
const voiceSelect = document.querySelector("select");
const pitch = document.querySelector("#pitch");
const pitchValue = document.querySelector(".pitch-value");
const rate = document.querySelector("#rate");
const rateValue = document.querySelector(".rate-value");

let voices = [];

function populateVoiceList() {
  voices = synth.getVoices();

  for (const voice of voices) {
    const option = document.createElement("option");
    option.textContent = `${voice.name} (${voice.lang})`;

    if (voice.default) {
      option.textContent += " — DEFAULT";
    }

    option.setAttribute("data-lang", voice.lang);
    option.setAttribute("data-name", voice.name);
    voiceSelect.appendChild(option);
  }
}

populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
  speechSynthesis.onvoiceschanged = populateVoiceList;
}

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

  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  const selectedOption =
    voiceSelect.selectedOptions[0].getAttribute("data-name");
  for (const voice of voices) {
    if (voice.name === selectedOption) {
      utterThis.voice = voice;
    }
  }
  utterThis.pitch = pitch.value;
  utterThis.rate = rate.value;
  synth.speak(utterThis);

  inputTxt.blur();
};