SpeechSynthesis

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.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

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

プロパティ

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

SpeechSynthesis.paused 読取専用

真偽値。SpeechSynthesis オブジェクトが一時停止状態の場合に true を返します。

SpeechSynthesis.pending 読取専用

真偽値。発声 (utterance) キューにまだ発話されていないものがある場合に true を返します。

SpeechSynthesis.speaking 読取専用

真偽値。SpeechSynthesis が一時停止状態であっても、発声が現在発話処理中の場合に true を返します。

イベントハンドラー

SpeechSynthesis.onvoiceschanged

SpeechSynthesis.getVoices() メソッドにより返される SpeechSynthesisVoice オブジェクトのリストが変更された時に発火します。

メソッド

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

SpeechSynthesis.cancel()

すべての発声を発声キューから削除します。

SpeechSynthesis.getVoices()

現在の端末上のすべての利用可能な音声を表す、SpeechSynthesisVoice オブジェクトのリストを返します。

SpeechSynthesis.pause()

SpeechSynthesis オブジェクトを一時停止状態にします。

SpeechSynthesis.resume()

SpeechSynthesis オブジェクトを一時停止でない状態にします。つまり、一時停止状態であった場合に再開します。

SpeechSynthesis.speak()

utterance を発声キューに追加します。これは、それ以前にキューに追加された他の発声が発話された後に発話されます。

例

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

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

js
var synth = window.speechSynthesis;

var inputForm = document.querySelector("form");
var inputTxt = document.querySelector(".txt");
var voiceSelect = document.querySelector("select");

var pitch = document.querySelector("#pitch");
var pitchValue = document.querySelector(".pitch-value");
var rate = document.querySelector("#rate");
var rateValue = document.querySelector(".rate-value");

var voices = [];

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

  for (i = 0; i < voices.length; i++) {
    var option = document.createElement("option");
    option.textContent = voices[i].name + " (" + voices[i].lang + ")";

    if (voices[i].default) {
      option.textContent += " -- DEFAULT";
    }

    option.setAttribute("data-lang", voices[i].lang);
    option.setAttribute("data-name", voices[i].name);
    voiceSelect.appendChild(option);
  }
}

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

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];
    }
  }
  utterThis.pitch = pitch.value;
  utterThis.rate = rate.value;
  synth.speak(utterThis);

  inputTxt.blur();
};

仕様

Specification
Web Speech API
# tts-section

ブラウザーの実装状況

BCD tables only load in the browser

関連項目