SpeechSynthesisUtterance
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
Web Speech API の SpeechSynthesisUtterance
インターフェイスは、発話リクエストを表します。これには、speech サービスが読み上げるコンテンツと、その読み上げ方についての情報 (言語、音の高低、音量) が含まれます。
コンストラクター
SpeechSynthesisUtterance.SpeechSynthesisUtterance()
(en-US)-
新しい
SpeechSynthesisUtterance
オブジェクトのインスタンスを返します。
プロパティ
SpeechSynthesisUtterance
は、その親インターフェイスである EventTarget
からのプロパティも継承します。
SpeechSynthesisUtterance.lang
-
utterance (発声) の言語を取得または設定します。
SpeechSynthesisUtterance.pitch
(en-US)-
utterance が発話される際のピッチ (音の高低) を取得または設定します。
SpeechSynthesisUtterance.rate
(en-US)-
utterance が発話される際の速度を取得または設定します。
SpeechSynthesisUtterance.text
(en-US)-
utterance が発話される際の合成されるテキストを取得または設定します。
SpeechSynthesisUtterance.voice
(en-US)-
utterance の発話に使用される音声を取得または設定します。
SpeechSynthesisUtterance.volume
(en-US)-
utterance が発話される際の音量を取得または設定します。
イベントハンドラー
SpeechSynthesisUtterance.onboundary
(en-US)-
発話された utterance が単語または文の境界に達した時に発火します。
SpeechSynthesisUtterance.onend
(en-US)-
utterance の発話が完了した時に発火します。
SpeechSynthesisUtterance.onerror
(en-US)-
utterance の正常な発話を妨げるエラーが発生した時に発火します。
SpeechSynthesisUtterance.onmark
(en-US)-
発話された utterance が SSML (音声合成マークアップ言語) の "mark" タグに達した時に発火します。
SpeechSynthesisUtterance.onpause
(en-US)-
utterance の発話が途中で一時停止された時に発火します。
SpeechSynthesisUtterance.onresume
(en-US)-
一時停止された utterance の発話が再開された時に発火します。
SpeechSynthesisUtterance.onstart
(en-US)-
utterance の発話が開始された時に発火します。
例
私たちの基本的な 音声合成のデモ では、最初に window.speechSynthesis
を使用して SpeechSynthesis コントローラーへの参照を取得します。必要な変数の定義後、 SpeechSynthesis.getVoices()
(en-US) を使用して利用可能な音声のリストを取得し、それらの選択メニューを構成します。ユーザーは、そこから使用したい音声を選べます。
inputForm.onsubmit
ハンドラー内部では、preventDefault() でフォーム送信を停止し、テキスト <input>
に入力されたテキストを含む新しい SpeechSynthesisUtterance
インスタンスを作成します。その発声にユーザーが <select>
要素で選択した音声を設定し、SpeechSynthesis.speak()
(en-US) メソッドを通して発声の発話を開始します。
var synth = window.speechSynthesis;
var inputForm = document.querySelector('form');
var inputTxt = document.querySelector('input');
var voiceSelect = document.querySelector('select');
var voices = synth.getVoices();
for(i = 0; i < voices.length ; i++) {
var option = document.createElement('option');
option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
option.setAttribute('data-lang', voices[i].lang);
option.setAttribute('data-name', voices[i].name);
voiceSelect.appendChild(option);
}
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];
}
}
synth.speak(utterThis);
inputTxt.blur();
}
仕様
Specification |
---|
Web Speech API # speechsynthesisutterance |
ブラウザーの実装状況
BCD tables only load in the browser