Window: 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 は Window オブジェクトの読み取り専用プロパティで、SpeechSynthesis オブジェクトを返します。これは、ウェブ音声 API の音声合成機能を使用するためのエントリーポイントです。

例

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

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

const synth = window.speechSynthesis;const inputForm = document.querySelector("form");const inputTxt = document.querySelector("input");const voiceSelect = document.querySelector("select");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");  utterThis.voice = voices.find((v) => v.name === selectedOption);  synth.speak(utterThis);  inputTxt.blur();};