SpeechSynthesisUtterance: SpeechSynthesisUtterance() コンストラクター

Baseline Widely available

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

SpeechSynthesisUtterance()SpeechSynthesisUtterance インターフェイスのコンストラクターで、新しい SpeechSynthesisUtterance オブジェクトのインスタンスを返します。

構文

js
new SpeechSynthesisUtterance(text)

引数

text

発話時に合成されるテキストを格納した文字列です。

以下のスニペットは Speech synthesizer demo から抜粋したものです。

js
const synth = window.speechSynthesis;

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

const voices = synth.getVoices();

// ...

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

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

仕様書

Specification
Web Speech API
# dom-speechsynthesisutterance-speechsynthesisutterance

ブラウザーの互換性

BCD tables only load in the browser

関連情報