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() メソッドを通して発声の発話を開始します。
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 |