この翻訳は不完全です。英語から この記事を翻訳 してください。

これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

Web Speech APIのSpeechSynthesisUtteranceインターフェイスは、音声要求を表現します。これには、音声サービスが読むべき内容とその読み方に関する情報(例えば、言語、ピッチ、音量など)が含まれています。

コンストラクタ

SpeechSynthesisUtterance.SpeechSynthesisUtterance()
新しいSpeechSynthesisUtteranceオブジェクトインスタンスを返します。

プロパティ

SpeechSynthesisUtteranceは親インタフェースEventTargetからプロパティを継承します。

SpeechSynthesisUtterance.lang
発話の言語を取得および設定します。
SpeechSynthesisUtterance.pitch
発話される音程を取得または設定します。
SpeechSynthesisUtterance.rate
発話される速度を取得および設定します。
SpeechSynthesisUtterance.text
発話したときに合成されるテキストを取得または設定します。
SpeechSynthesisUtterance.voice
発話のために使用される音声を取得して設定します。
SpeechSynthesisUtterance.volume
発話される音量を取得または設定します。

イベントハンドラ

SpeechSynthesisUtterance.onboundary
発話が単語または文の境界に達するとイベントが発生する。
SpeechSynthesisUtterance.onend
発話が終わったらイベントが発生する。
SpeechSynthesisUtterance.onerror
発話が正常に行われないようなエラーが発生した場合にイベントが発生する。
SpeechSynthesisUtterance.onmark
発話がSSML(音声合成マークアップ言語)の「mark」要素タグに到達するとイベントが発生する。
SpeechSynthesisUtterance.onpause
発話が途中で中断されたときにイベントが発生する。
SpeechSynthesisUtterance.onresume
一時停止した発話が再開されたときにイベントが発生する。
SpeechSynthesisUtterance.onstart
発声が始まったときにイベントが発生する。

基本的なSpeechシンセサイザーのデモでは、まずwindow.speechSynthesisを使用してSpeechSynthesisコントローラーへの参照を取得します。いくつかの必要な変数を定義した後、私たちはSpeechSynthesis.getVoices()を使用して利用可能なボイスのリストを取得し、ユーザーが希望するボイスを選択できるようにセレクトメニューを設定します。

inputForm.onsubmitハンドラの内部では、preventDefault()でフォーム送信を停止します。constructorは、<input>要素からのテキストを含む、新しい発話インスタンスを生成します。

voiceでは<select>要素で選択された発声を、発話側に設定してから、 SpeechSynthesis.speak()メソッド経由で発話を開始してください。

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();
}

仕様

仕様 状態 コメント
Web Speech API
SpeechSynthesisUtterance の定義
ドラフト  

ブラウザの互換性

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本的なサポート 33 (有) 49 (49) 未サポート (有) 7
機能 Android Chrome Edge Firefox Mobile (Gecko) Firefox OS IE Phone Opera Mobile Safari Mobile
基本的なサポート (有) (有) (有) 未サポート 2.0 未サポート 未サポート 7.1

こちらもご覧ください

ドキュメントのタグと貢献者

 このページの貢献者: iccha
 最終更新者: iccha,